In the code snippet below, you will see how Bootstrap uses a CDN to deliver their minified scripts and styles. But what is that long string of random characters after integrity=?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
With this technology, developers can benefit from the performance gains of using Content Delivery Networks (CDNs) without having to fear that a third-party compromise can harm their website.
What does it do and why is it necessary?
The main reason you want to include this is security. Since you are loading some code hosted on another server you want to make sure you are downloading exactly what you expect. Sometimes CDN servers are hacked to add malicious code to all sites that use that referenced file. That long character string or hash, requires the browser to download only the file with the same hatch.
Think of the integrity hash like a coat claim check tag. Your coat ticket has a specific number that matches up to your coat. If the coat attendant tries to give you someone else’s coat that looks exactly like yours, you will know its false because the numbers won’t match up.
Ok but what does the crossorigin mean?
The crossorigin attribute tells the browser to download the file as anonymous and to omit any cookies or authentication from the CDN site. This will prevent any data leaks from sharing information across sites.
Summary
So to summarize, even though it looks messy and random It is highly recommended to include this. As user data protection and security is a priority, these two attributes will help you strengthen your website or application to prevent a third-party from attacking your site with malicious code you don’t know about.
Sources
https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attribute
https://hacks.mozilla.org/2015/09/subresource-integrity-in-firefox-43/
