web-dev-qa-db-ja.com

整合性とクロスオリジンの属性は何ですか？

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属性はどういう意味ですか？それらはスタイルシートのロードにどのように影響しますか？

htmlhtml5cross-domaincorssubresource-integrity
296
New user

Subresource Integrity を実装するために、両方の属性がBootstrap CDNに追加されました。

サブリソースインテグリティは、予期しない操作なしにフェッチされたリソースが配送されたことをユーザエージェントが検証することができるメカニズムを定義します。{ 参照

整合性属性 は、ソースが操作された場合にコードが読み込まれないようにするために、ブラウザがファイルソースをチェックできるようにします。

Crossorigin属性 は、 'same-Origin'からロードされていないときのSRIチェックの要件である 'CORS'を使用して要求がロードされたときに存在します。 crossoriginに関する詳細情報

ブートストラップCDNの実装の詳細

211
jim.taylor.1974

integrity - ブラウザに実行させるために一致させる必要があるリソースのチェックサムのようなハッシュ値を定義します。ハッシュは、ファイルが変更されていないこと、および予想されるデータを含んでいることを確認します。このようにしてブラウザは異なる（例えば悪意のある）リソースをロードすることはありません。あなたのJavaScriptファイルがCDNにハッキングされた状況を想像してみてください、そしてそれを知る方法がありませんでした。整合性属性は、一致しないコンテンツのロードを防ぎます。

クロスオリジンに関係なく、無効なSRIはブロックされます（Chromeデベロッパーツール）。保全性属性が一致しない場合の、以下のNON-CORSケース

enter image description here

整合性 計算することができます を使用して： 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ペアが追加されます。

enter image description here

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が正しく設定されていない場合、ブラウザはリクエストをキャンセルできます。

enter image description here

リンク
- 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

61
Witold Kaczurba