What are the integrity and crossorigin attributes and why are they necessary?

  • Updated on
  • read
  • Add to Flipboard Magazine.

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=?

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/

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Subscribe to Newsletter

Advertise Here


Written by: Jacob Lett - Web designer and BootstrapCreative instructor
Category: Common Questions
Tags: ,


Related Posts

Blog Home