26

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"}/
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Nikhil Thombare
  • 1,058
  • 2
  • 11
  • 26

2 Answers2

53

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

Schmalzy
  • 17,044
  • 7
  • 46
  • 47
  • 29
    Note for React Server Rendering Users: You need to use camelCase for `crossOrigin`. – Florian Wendelborn Jun 16 '16 at 04:14
  • 11
    crossOrigin is also case sensitive if you load async via javascript. `` – Mike Purcell Jan 10 '19 at 18:58
24

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);
Kayce Basques
  • 23,849
  • 11
  • 86
  • 120