Hack w/ Limbic Media

Interactive Electronica and IoT

Visit Limbic Media

hack.limbicmedia.ca was created by the developers and engineers at Limbic Media to share their knowledge and experiences with DIY and hacker community-at-large.

by Eric McNiece

How to Break ~87,000 Sites With 2 Lines of Code

How many times have you heard the joke "Stack Overflow is down, guess I can't work..."? Seeking user-based technical resources online has become a huge staple of web development, and it is often said that the altruism of open-source software is one of our best qualities as a community. We help out with all ranges of difficulty - even beginners can get assistance. But what happens when people form a habit of copy-pasting code without understanding it?

Yesterday, WordPress released an update to version 4.5 ("Coleman", following the jazz musician theme). The CMS has a nice auto-update feature for the core that helps sites take in security patches and new features, and the update process is very easy for users to execute, so many of the (dozens of?) millions of WordPress sites will be running this new version soon.

*/u/greg8872 points out that WordPress will not, by default, update from 4.4.x to 4.5

Bundled in this WordPress update is a new version of jQuery (1.12) which has a few new features and some performance improvements, but one of the more interesting commits was this:

Remove

A change to a unit test adds proper selector syntax - note those quotes around the '#' character. It's great that their internal tests are now actually testing with the correct syntax, and the tests can all pass now that jQuery itself requires this syntax. Now, if you are using jQuery 1.12 with this syntax, you get a fatal error that halts script execution.

This is now a problem for a lot of front end developers.

Themeforest is a leading marketplace in which designers and developers can sell templates for WordPress websites. Enfold alone has over 87,000 sales and happens to use this particular $('a[href*=#]') syntax on 2 lines in such a way that some big parts of the theme break. Websites using this theme that updated overnight are now missing images and buttons and leave visitors unable to view content.

Site affected by the jQuery selector fix

In this specific context, this particular jQuery change will only affect a portion of WordPress sites that auto-update, use WP's bundled jQuery, and have this syntax in use. There will be some people that will be in real trouble though: in Enfold's case, the theme does not auto-update by itself and if those theme files have been modified it may not be a trivial task to drop a new theme version on top. While best practice for WP theme development is to use a child theme, it is not always possible to do so. This will leave a lot of people seeking support, and will require many studios and developers to fix their clients' sites.

Fixing a bug almost always breaks something.
timmywil, Github 01/18/2016

We have known about this issue for some time - there was discussion back in January about this update. It turns out that this jQuery syntax was more or less a loophole, as it never was correct according to the W3 Attribute Selectors specification. There is some interesting discussion here about whether this should be labelled as a "breaking change" instead of a bug, and it would have been nice if the release notes for this version of jQuery would have mentioned it.

The act of sharing code and experience that builds our communities can be harmful if not done well. This Stack Overflow example (similar to the first one), if not read properly and used in code "just because it works" is what leads to scenarios like today. The other answers on that question actually contain the correct syntax, but they are below the fold and much less visible, leading less experienced developers to grab the incorrect syntax answer and slap it into their project.

A scenario like this highlights some decisions that developers make on a daily basis:

  • How much time should developers spend on education and specification analysis?
  • Is it a good idea to lock software to a specific version?
  • Are we responsible for seeking out potential future problems?
  • Should we vet code that is not under our own control?
  • When is a good time to abstract and implement inheritance?

Grabbing examples and copy-pasting code from online resources is not inherently bad - that is where a lot of learning happens! A developer might copy-paste an example the first time, remember to look at it the second time, and write it by heart the third time - this repetition is exactly how we come to be proficient. The real problem is how much time we have available.

A typical modern web application can have dozens or hundreds of modules that have been created by other users, and it is definitely not efficient to go through each one and analyze the code. A front-end developer can't be expected to learn how to move through registers in Assembly. It's just turtles all the way down. Reliance on other modules (and people) is sometimes taken for granted, but we all stand on the shoulders of giants.

The field of web development is moving at such an enormous pace that we find ourselves dealing with a signal/noise filter as we try to figure out what is important and relevant to our jobs. Even if a theme author was able to catch this bug(fix) back in January when it was first reported, they still would have had to deal with people that haven't updated their theme for a long time. No doubt that the author has learned some things today though - and they won't make this mistake again in the future.

It's impossible to know everything, and we will continue to grow from the knowledge of our peers. Next time you reach to hit that Cmd+C, take a second to look a bit deeper into the unknown.

Need help with a similar project?

Innovative Digital Art

Limbic Media

Consulting Engineering

Limbic Consulting