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

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

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

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

HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim ...
script标签async和defer的区别及作用
作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...
html5新标签和css3的新属性
html5新特性较为常用的有:<artical></artical>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,总之久是可以连接外部类似文章的东西.< ...
script 标签的 defer 与 async 属性
前言在面试的时候,经常会遇到一道经典的面试题: 如何优化网页加载速度? 常规的回答中总会有一条: 把 css 文件放在页面顶部,把 js 文件放在页面底部. 那么,为什么要把 js 文件放在页面的最 ...
php中script标签,关于 script 标签你应该知道的
script标签用来在网页中执行JavaScript,它可以直接包含JavaScript代码,也可以直接通过src指向一个同域或者不同域的外链. 1. script标签默认会阻塞页面解析,并按照它们出 ...
script标签的同步和异步
1).把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后,才开始展现页面内容,为避免这个问题一般把js代码全部放在<body&g ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script 标签上的 defer 和 async 属性是什么？
我们经常使用 script 标签向页面插入一个常规的 JavaScript 文件: <script src="/path/to/script.js"></scri ...
script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

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

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

最新文章

热门文章