<script> 属性crossorigin

今日偶然见到如下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

 

一般来说，我们几乎都是直接使用<script src>标签, 不怎么加其他属性的（目前我一直是这么写的，或许是我代码写的少嘛~~~~）

例如

	<script src="js/vendor/jquery-2.2.4.min.js"></script>

　　首先我们了解下这两个属性的意思：

intergrity:脚本文件的密码散列

crossorigin:跨域

 

1.关于intergrity，这篇文章写的很好，这里只做核心描述：--------------------传送门----------->

许多网站都使用一套通用的JavaScript库。为了节省带宽及提高性能，它们会使用由第三方托管的JavaScript库。jQuery是Web上最流行的JavaScript库，截至2014年大约30%的网站都使用了它。其它流行的库还有Facebook SDK、Google Analytics。如果一个网站包含了指向第三方托管JavaScript文件的script标签，那么该网站的所有访问者都会下载该文件并执行它。如果攻击者攻陷了这样一个托管JavaScript文件的服务器，并向文件中添加了DDoS代码，那么所有访问者都会成为DDoS攻击的一部分，这就是服务器劫持，

这种攻击之所以有效是因为HTTP中缺少一种机制使网站能够禁止被篡改的脚本运行。为了解决这一问题，W3C已经提议增加一个新特性子资源一致性。该特性允许网站告诉浏览器，只有在其下载的脚本与网站希望运行的脚本一致时才能运行脚本。这是通过密码散列实现的。这就是守门神：integrity=文件指纹

密码散列可以唯一标识一个数据块，任何两个文件的密码散列均不相同。属性integrity提供了网站希望运行的脚本文件的密码散列。浏览器在下载脚本后会计算它的散列，然后将得出的值与integrity提供的值进行比较。如果不匹配，则说明目标脚本被篡改，浏览器将不使用它。

 

2.crossorign

从谷歌的结果来看，比较一致的说法是，引入跨域的脚本（比如用了 apis.google.com 上的库文件），如果这个脚本有错误，因为浏览器的限制（根本原因是协议的规定），是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时，跨域脚本的错误只会返回 Script error。

但 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息，但有两个条件：一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin 头信息允许当前域名可以获取错误信息，二是当前域名的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。