crossorigin屬性 & integrity屬性

在Bootstrap v4的官網看到了link和script有兩個不認識的屬性integrity和crossorigin，長見識的機會又到了

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

integrity 和 crossorigin 是幹什麼的？

crossorigin 屬性

我們知道，對於 <img>、<link>、<script> 等，是可以加載非同源下的資源的，此時請求頭會帶上資源所在域下的 Cookie。

---

如果設置了 crossorigin 屬性，則資源的響應頭必須設置 Access-Control-Allow-Origin

// 通配符，所有域都可以跨域訪問
res.setHeader('Access-Control-Allow-Origin', '*');

// 指定特定域可以跨域訪問
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');

---

當 crossorigin 屬性如下時，則表示不帶憑證，即請求頭不帶 Cookie

<script crossorigin>
<script crossorigin="">
<script crossorigin="anonymous">

---

當 crossorigin 屬性如下時，則表示帶憑證，即請求頭帶 Cookie

<script crossorigin="use-credentials">

此時，資源的響應頭 Access-Control-Allow-Origin 不能爲通配符 *，且必須設置 Access-Control-Allow-Credentials 爲 true

res.setHeader('Access-Control-Allow-Credentials', true);

---

對於非同源下的 script 資源，設不設置 crossorigin 還有一個區別，就是 window.onerror 觸發後的回調函數的參數信息， 如果沒有 crossorigin，其參數總是如下

Arguments(5) ["Script error.", "", 0, 0, null, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "Script error."
1: ""
2: 0
3: 0
4: null

如果設置了 crossorigin，則參數會有詳細錯誤信息

Arguments(5) ["Uncaught ReferenceError: a is not defined", "http://x/x/x.js", 4, 23, ReferenceError: a is not defined
    at http://x/x/x.js:4:23, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "Uncaught ReferenceError: a is not defined"
1: "http://x/x/x.js"
2: 4
3: 23
4: ReferenceError: a is not defined at http://x/x/x.js:4:23

但無論如何，錯誤信息都會在控制檯打印出來

x.js:4 Uncaught ReferenceError: a is not defined
    at a.js:4

---

corssorigin 屬性對於同源下的資源不起作用，Cookie 想不帶都不行。

integrity 屬性

SRI，Subresource Integrity 的縮寫，中文：子資源完整性，由 Web 應用安全工作組（Web Application Security Working Group）發佈。

integrity 屬性就表示開啓 SRI，支持 SRI 的瀏覽器有 Chrome 45+ 和 FireFox 43+。

啓用 SRI 後，瀏覽器會根據資源的簽名算法(支持 sha256、sha384 和 sha512)對資源進行驗證，如果簽名不一致，則不執行資源，下面是使用sha384算法生成https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css的簽名

curl https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl enc -base64 -A

rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ

integrity 的值是 算法-簽名，可以看一下官網 CDN 資源https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css 的 integrity 值與我們生成的一樣，如果該資源被篡改，則生成的簽名就不一樣了，瀏覽器就不會執行該資源。

SRI 要求被請求的資源必須同域，或者加 crossorigin 屬性，否則 CSS 和 JS 不會起作用。