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

  • read

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.


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.




Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn

Category: Common Questions
Tags: ,

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?