HTML5 script 标签的 crossorigin 和integrity属性的作用

Bootstrap 4 依赖的基础库中出现了两个新的属性

1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
2 <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
3 <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息，但有两个条件：一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin 头信息允许当前域名可以获取错误信息，二是当前域名的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。听名字也知道是跨域的时候用的属性，加载本地静态文件根本就不牵涉跨域的问题，所以本地就不应该用它（理论上使用也没关系，但浏览器就是这么定的，印象中如果 crossorigin 用在了本地文件上，浏览器报错信息会告诉你 crossorigin 只能支持 http/https/… 等协议上，所以你非要加载本地静态文件也不是没办法，只能自建本地 web 服务器然后地址写带 scheme 和 host 的完全绝对路径）。

另外除了 script ，所有能引入跨域资源的标签包括 link 和 img 之类，都有一样的属性。

integrity （大部分情况）是给 CDN 的静态文件使用的，比如大名鼎鼎的 ajax.googleapis.com，或者国内的 cdn.bootcss.com。CDN虽然好但 CDN 有可能被劫持，导致下载的文件是被篡改过的（比如通过 DNS 劫持），有了 integrity 就可以检查文件是否是原版。但因为本地文件用的域名跟网页是同一个域名，不存在劫持的问题（或者劫持就连网站本身一起被劫持了，那就不是 integrity 能解决的问题了），所以本地静态文件没有太大必要用这个属性。

当然，还有一种情况是你自己搭了一套提供静态文件的独立站点，这个时候用 integrity 是有意义。MDN 文档里也提到了 integrity 值的生成方式，这里也再引用一下：

1 cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

或者

1 shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64

总之简单一句话：只有当你的网页域名和要载入的静态文件存放的站点域名不一样的时候，使用这两个属性才有意义（并且因浏览器的规定 crossorigin 属性只有这个时候才能正常使用）。

转载于:https://www.cnblogs.com/ihuangqing/p/10717018.html

HTML5 script 标签的 crossorigin 和integrity属性的作用相关推荐

html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 1 2 3 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Contr ...
html5新标签和css3的新属性
html5新特性较为常用的有:<artical></artical>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,总之久是可以连接外部类似文章的东西.< ...
script 标签的 defer 与 async 属性
前言在面试的时候,经常会遇到一道经典的面试题: 如何优化网页加载速度? 常规的回答中总会有一条: 把 css 文件放在页面顶部,把 js 文件放在页面底部. 那么,为什么要把 js 文件放在页面的最 ...
script标签async和defer的区别及作用
作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script 标签上的 defer 和 async 属性是什么？
我们经常使用 script 标签向页面插入一个常规的 JavaScript 文件: <script src="/path/to/script.js"></scri ...
html里loop标签,html5 embed标签的loop属性是怎么用的？embed标签的属性总结！
本篇文章介绍了关于html5 embed标签的loop属性的使用方法详情,还有embed标签的属性使用总结,接下来让我们一起来看这篇文章吧我们先了解HTML5 embed标签的loop属性的用法: ...
原生JavaScript小白入门001之HTML为＜script＞标签定义的6种属性
HTML为script标签定义的6种属性 1. async属性 async属性:表示立刻下载脚本,并不会影响页面中其他操作,只对外部JS文件有效,用来改变外部脚本行为,设置了异步响应,实现异步加载. ...
html embed音乐循环,html5 embed标签的loop属性是怎么用的？embed标签的属性总结！
本篇文章介绍了关于html5 embed标签的loop属性的使用方法详情,还有embed标签的属性使用总结,接下来让我们一起来看这篇文章吧我们先了解HTML5 embed标签的loop属性的用法: ...

HTML5 script 标签的 crossorigin 和integrity属性的作用

HTML5 script 标签的 crossorigin 和integrity属性的作用相关推荐

最新文章

热门文章