A couple of years ago, thousands of websites globally were hijacked by code, which made computers run cryptocurrency mining software.
Discovered by renowned security-expert Scott Helme, the malicious code was injected into a 3rd party accessibility-script, “browsealoud” by a company called texthelp.
Among the hijacked sites were most UK government sites, the website of the swedish police, and many more.
There's no doubt about where the crimes of the future will take place, so it's surprising to see, how few websites take security seriously.
And I admit, it's a hard sell: Unlike new, cool UI-components, engaging animations, creative user-journeys etc., security isn't sexy — it's not even visible!
But it will be the day, a security flaw scrapes important data, or otherwise ruins revenue.
Security should be an ongoing strategy for any company, but who should maintain it? Some of it is clearly front-end related.
The first line of defense is fixing frontend-assets. If your site use
node_modules, test for vulnerabilities by running npm-audit:
$ npm run audit, optionally with the
The latter will try to fix vulnerabilities, as well as give you a report with further steps to take. Yes, some projects contains 500MB+ of
node_modules, but it has to be done.
I have a project where I'm using unpkg to deliver a script.
unpkg is a fast, global content delivery network for everything on npm.
<script defer src="https://email@example.com/dist/smoothscroll.min.js"> </script>
Now, if unpkg gets hacked, my site will get the hacked script.
Luckily, there's an attribute called
integrity, which we can add to
<script>-tags. It's a SHA-key, generated from the (unhacked) script-source. If the script is hacked, the key will not match anymore, and the script will not load. The hack I mentioned at the beginning of this post could have been prevented, if the affected sites had used the
For unpkg-scripts, append
?meta to the end of the url:
This will return a json-string/object:
Take the integrity-part and add to your
<script>-tag — and add a
crossorigin-attribute as well:
<script defer src="https://firstname.lastname@example.org/dist/smoothscroll.min.js" integrity="sha384-EYn4rWu1DHvYD0sSSSbMEtXQmMl58CFJd897806+RT1jJVYbhuZlZMN6yG9nCyFa" crossorigin="anonymous"> </script>
The official name is “Subresource Integrity”, and most of the large CDN's and script-delivery-services support it.
Documentation is here:
In an upcoming article, I'll focus on how to set up and configure a Content Security Policy.
Thanks for reading!