HTML5 script 标签的 crossorigin 属性到底有啥用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 script 标签的 crossorigin 属性到底有啥用相关的知识,希望对你有一定的参考价值。

最近 Bootstrap 4 已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4。不过今天要说的不是 BS4,而是官网里引入 BS4 框架依赖的 jQuery 的代码:

Xhtml
1
2
3
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>

看起来比以前的写法复杂好多的样子。先不着急慢慢看,多了一个 integrity 属性,看值的样子就知道是用来验证文件完整性的。另外还有一个 crossorigin 属性……怎么?直接通过 script 标签加载网站外 JS 资源也要开始考虑跨域的问题了吗?

这里不讨论 script 里 crossorigin 属性怎么用,以及服务器端如何支持此属性,MDN 上的文档已经说得很清楚。

不知道大家对此新属性的感觉如何,我的第一感觉是:新加了这么一个属性,难道是以前 script 不用 crossorigin 属性的时候,会出什么问题吗?到底可能会出什么问题呢?

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

script error

但 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin 头信息允许当前域名可以获取错误信息,二是当前域名的 script 标签也必须指明 src 属性指定的
参考技术A

示例: 使用 crossorigin 的 script 元素

你可以使用下面的<script> 元素告诉一个浏览器执行来自 https://example.com/example-framework.js 的脚本而不发送用户凭据。

<script src="https://example.com/example-framework.js"
        crossorigin="anonymous"></script>

本回答被提问者采纳

以上是关于HTML5 script 标签的 crossorigin 属性到底有啥用的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 script 标签的 crossorigin 属性到底有啥用

ie6支持哪些html5标签?

总结前端开发模式和规范 2HTML5中script的async属性异步加载JS

HTML5类标签

script标签

HTML5标签简化写法