当我想使用跨域脚本资源时...

目录

问题：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation

尝试解决方案

总结

crossorigin

anonymous

integrity

生成integrity 

---

问题：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation

兴起想了解Vue的生命周期钩子，看了一篇文章的代码实例，想自己运行一下，尝试在谷歌运行时代码提示了以下错误。

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

报错：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation.（跨源资源需要“跨源”属性才能进行完整性验证。）

应该是讲src跨域访问的问题。

毕竟写成如下本地引用就没有报错QAQ

<script type="text/javascript" src="../js/vue.js"></script>

尝试解决方案

1. 修改——增加 crossorigin="anonymous"，没有报错了，但有警示。

这个crossorigin有什么用？anonymous（匿名）又是什么？

2.修改——添加integrity

还得有个匹配的integrity??——The format of the 'integrity' attribute should be 'sha(256|384|512)-HASH'.

3.修改——随意复制了一个HASH

The hash in the 'integrity' attribute doesn't match the received payload.

搜到了一篇文章，讲的非常通俗易懂，感谢作者大大。链接如下：

HTML5 <script> 标签里的 crossorigin 属性到底有什么用？ – Chrisyue's Blog

CORS settings attributes - HTML（超文本标记语言） | MDN

总结

crossorigin

大概总结而知，<script>中crossorigin的出现是出于安全性的考虑，可以让本地获取到跨域脚本的错误详细信息，但它也有两个条件，一是跨域脚本的服务器必须通过Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息，二是script 标签也必须指明 src 属性指定的地址是支持跨域的地址。

作者还提到，link和img等也有crossorign属性，但是和script中的不太一样。

HTML5 <img> <link> 标签里的 crossorigin 属性到底有什么用 – Chrisyue's Blog

anonymous

对CORS的请求不设置凭据标志。不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。就是不交换用户账号密码之类的？

除了这个还有use-credentials。

integrity

而integrity可以检查下载的CDN静态文件（也就是src里的内容？即我要用的js）有没有被篡改，那也就可以理解为什么它的哈希值得是匹配的了。

那我现在有的这个“https://cdn.staticfile.org/vue/2.2.2/vue.min.js”，怎么知道它的integrity是啥？

生成integrity 

SRI Hash Generator

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" integrity="sha384-M5+vdn0ZJoRfNHbhVIuvYmIj44NZOP255FJMIWB9bzTbHEzWjE7fBh+rP+fwJ0OA" crossorigin="anonymous"></script>

 没有报错！成功！

鄙人菜鸡，如有错误，敬请指出~！