twitter-bootstrap 如何解决 bootstrap.min.css 上有完整性属性问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35323268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:37:37  来源:igfitidea点击:

How to solve has an integrity attribute issue on bootstrap.min.css

twitter-bootstrapcssruby-on-rails-4twitter-bootstrap-3haml

提问by Nikhil Thombare

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.

子资源完整性:资源 ' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' 具有完整性属性,但该资源要求请求启用 CORS 以检查完整性,事实并非如此。资源已被阻止,因为无法强制执行完整性。

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"}/

回答by Schmalzy

I think you are missing crossorigin="anonymous".

我想你失踪了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.

当请求与同源策略不匹配时,必须存在 crossorigin 属性以检查文件的完整性。在外部源上设置完整性并且缺少交叉源时,浏览器将选择“失败打开”,这意味着它将加载资源,就像未设置完整性属性一样。

Source

来源

回答by Kayce Basques

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:

我试图通过 Chrome DevTools 控制台将 jQuery 插入到页面中,但我收到了这个错误。这是我使用的代码:

// 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 crossoriginto crossOrigin(uppercase O for Origin):

解决方案是更改crossorigincrossOrigin(Origin 的大写 O):

// 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);