Bootstrapcdnは最近リンクを変更しました。それは今このようになります:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
integrity
およびcrossorigin
属性はどういう意味ですか?それらはスタイルシートのロードにどのように影響しますか?
Subresource Integrity を実装するために、両方の属性がBootstrap CDNに追加されました。
サブリソースインテグリティは、予期しない操作なしにフェッチされたリソースが配送されたことをユーザエージェントが検証することができるメカニズムを定義します。{ 参照
整合性属性 は、ソースが操作された場合にコードが読み込まれないようにするために、ブラウザがファイルソースをチェックできるようにします。
Crossorigin属性 は、 'same-Origin'からロードされていないときのSRIチェックの要件である 'CORS'を使用して要求がロードされたときに存在します。 crossoriginに関する詳細情報
integrity - ブラウザに実行させるために一致させる必要があるリソースのチェックサムのようなハッシュ値を定義します。ハッシュは、ファイルが変更されていないこと、および予想されるデータを含んでいることを確認します。このようにしてブラウザは異なる(例えば悪意のある)リソースをロードすることはありません。あなたのJavaScriptファイルがCDNにハッキングされた状況を想像してみてください、そしてそれを知る方法がありませんでした。整合性属性は、一致しないコンテンツのロードを防ぎます。
クロスオリジンに関係なく、無効なSRIはブロックされます(Chromeデベロッパーツール)。保全性属性が一致しない場合の、以下のNON-CORSケース
整合性 計算することができます を使用して: https://www.srihash.org/ またはコンソールに入力( link ):
openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A
crossorigin - リソースが異なるOrigin上のサーバーからロードされるときに使用されるオプションを定義します。 (ここのCORSを参照してください: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS )。ブラウザから送信されたHTTPリクエストを効果的に変更します。 “ crossorigin”属性が追加されている場合 - 以下のようにHTTPリクエストに Origin:<Origin> key-valueペアが追加されます。
crossorigin は、 "anonymous"または "use-credentials"のいずれかに設定できます。どちらも Origin: をリクエストに追加します。しかし後者は信任状がチェックされることを確実にするでしょう。タグ内にcrossorigin属性がないと、Origin:key-valueペアなしでリクエストが送信されます。
これはCDNから「use-credentials」を要求する場合です。
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="use-credentials"></script>
Crossoriginが正しく設定されていない場合、ブラウザはリクエストをキャンセルできます。
リンク
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
ブログ
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity