How to solve “resource requires the request to be CORS enabled… resource has been blocked because the integrity cannot be enforced” error

Question

I am using bootstrap icons in my project which gives me error

Subresource Integrity: The resource 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

Can any one help me to solve this issue and when we move to production the icon is not loaded.

So I am using below link for bootstrap icons

%link{:href => "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", :integrity => "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7", :rel => "stylesheet"}/

Cottar

crossOrigin="anonymous" (casing important!) fixed it for me. – Cadge

Answer 1

I think you are missing crossorigin="anonymous".

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

When the request doesn't match Same Origin Policy the crossorigin attribute MUST be present for the integrity of the file to be checked. With an integrity set on an external origin and a missing crossorigin the browser will choose to 'fail-open' which means it will load the resource as if the integrity attribute was not set.

Source

Hereabouts

Note for React Server Rendering Users: You need to use camelCase for crossOrigin. – Bekelja

crossOrigin is also case sensitive if you load async via javascript. <script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://pro.fontawesome.com/releases/v5.6.3/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; css.integrity = 'sha384-somehash'; css.crossOrigin = 'anonymous'; console.log(css); document.getElementsByTagName('head')[0].appendChild(css); })(); </script> – Batrachian

Answer 2

I was trying to insert jQuery into a page via the Chrome DevTools Console, and I was getting this error. Here's the code I was using:

// Bad code
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossorigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

The solution was to change crossorigin to crossOrigin (uppercase O for Origin):

// Good code
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Tower

This was exactly the solution I needed, perfect! – Valenzuela

Woohooo... this fixed it instantly :D – Hygienist