[html] script的crossorigin属性

1. 同源策略

如果两个页面的协议，端口和域名都相同，则两个页面具有相同的源（origin）。

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.

同源策略是一种安全机制，它限制了非同源脚本之间的交互方式。
例如，在使用XMLHttpRequest或 <img> 标签时，会受到同源策略的约束。

这些交互通常分为三类：
（1）通常允许跨域写操作（Cross-origin writes）。例如链接（links），重定向以及表单提交。
（2）通常允许跨域资源嵌入（Cross-origin embedding）。
（3）通常不允许跨域读操作（Cross-origin reads）。但常可以通过内嵌资源来巧妙的进行读取访问。
例如，可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或 availability of an embedded resource。

以下是可能嵌入跨域的资源的一些示例：
（1）<script src="..."></script> 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
（2）<link rel="stylesheet" href="..."> 标签嵌入CSS。
（3）<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...
（4）<video> 和 <audio>嵌入多媒体资源。
（5）<object>, <embed> 和 <applet> 的插件。
（6）@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
（7）<frame> 和 <iframe> 载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。

2. 跨域资源共享

跨域资源共享 Cross-Origin Resource Sharing (CORS)，通过在服务器端设置 Access-Control-Allow-Origin 响应头，
允许浏览器发起跨域请求，例如，跨域 XMLHttpRequest，Fetch 请求。

Access-Control-Allow-Origin 的值为发起跨域请求的那个域名，表示允许这个域名的网页访问当前资源。
服务器端可以通过请求头中的 Origin 字段，来判断某个请求是否跨域请求。

3. onerror信息

服务器端如果没有设置 CORS，
普通的跨域<script>标签，将只向window.onerror反馈尽量少的内容。

window.onerror = (...args) => console.log(args);  // ["Script error.", "", 0, 0, null]

给<script>标签添加 crossorigin 属性，
并在服务器端设置 Access-Control-Allow-Origin 响应头，允许脚本被跨域访问，
就可以在window.onerror中获取更详细的日志信息。

[
    "Uncaught ReferenceError: a is not defined", 
    "http://127.0.0.1:8081/index.js", 
    1, 
    1, 
    ReferenceError: a is not defined
        at http://127.0.0.1:8081/index.js:1:1]

注：
普通<script>标签是可以加载跨域脚本的，
但如果给跨域<script>标签添加了crossorigin属性，
（且服务器端没有设置Access-Control-Allow-Origin 响应头），
就会出现以下错误，

Access to Script at 'http://127.0.0.1:8081/index.js' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://127.0.0.1:8080' is therefore not allowed access.

示例代码：
（1）在./test-cors1/ 文件夹下启动静态网站，监听8080端口

<!-- ./test-cors1/index.html -->
<script crossorigin src="http://127.0.0.1:8081/index.js"></script>

（2）在./test-cors2/ 文件夹下启动静态网站，监听8081端口

// ./test-cors2/index.js
a;

4. crossorigin属性

crossorigin 属性不止可以用于<script>标签，还可以用与<img>，<video>等标签，
用于配置 CORS 的请求数据，见下表，

Keyword	State	Request Mode	Credentials Mode
the attribute is omitted	No CORS	"no-cors"	"omit"
""	Anonymous	"cors"	"same-origin"
"anonymous"	Anonymous	"cors"	"same-origin"
"use-credentials"	Use Credentials	"cors"	"include"

不同的crossorigin值，指定了不同的Request Mode 和 Credentials Mode。

其中，术语use credentials指的是，cookies，http authentication 和客户端ssl证书。

The term user credentials for the purposes of this specification means cookies, HTTP authentication, and client-side SSL certificates that would be sent based on the user agent's previous interactions with the origin. Specifically it does not refer to proxy authentication or the Origin header.

---

参考

MDN: Same-origin policy
MDN: Cross-Origin Resource Sharing (CORS)
MDN: script - crossorigin
MDN: The crossOrigin attribute
W3C HTML5: CORS settings attributes
W3C: CORS
Wikipedia: Cross-origin resource sharing