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

362

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平均属性？それらはスタイルシートの読み込みにどのように影響しますか？

— 新しいユーザー
ソース

回答:

237

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

サブリソースインテグリティは、ユーザエージェントがフェッチリソースが予期しない操作なしに送達されたことを確認することができるメカニズム定義リファレンス

整合性属性は、ブラウザがファイルソースをチェックして、ソースが操作された場合にコードがロードされないようにすることを可能にするためのものです。

Crossorigin属性は、リクエストが「CORS」を使用してロードされるときに存在します。これは、「same-origin」からロードされない場合のSRIチェックの要件になりました。 crossoriginの詳細

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

— jim.taylor.1974
ソース

：「整合性」属性使用しているときだけは、W3C HTMLバリデータを使用して、このメッセージが表示されましたAttribute integrity not allowed on element link at this point.

— トマス・ゴンザレス

@TomasGonzalez私は、w3cツールがまだSRIサポートを含むように更新されていないことを安全に想定できると思います

— Josh_at_Savings_Champion

参考までに

— ました

W3C HTMLチェッカー（別名バリデーター）のメンテナーはこちら。ええ、申し訳ありませんが、チェッカーはintegrity属性についてまだ何も知りません。しかし、github.com / validator / validator / issues / 151でリクエストされているように、すぐにサポートを追加する予定です。したがって、その問題をサブスクライブして、問題が発生したときに通知を受け取ることができます。

— sideshowbarker

OnlineWebCheck.comはintegrity属性をサポートしています（私はそのチェッカーのメンテナーです）。

— Albert Wiersch 16

112

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

クロスオリジンに関係なく、無効なSRIはブロックされます（Chrome developer-tools）。整合性属性が一致しないNON-CORSの場合：

整合性は次を使用して計算できます：https : //www.srihash.org/ またはコンソールに入力（リンク）：

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin-リソースが別のオリジンのサーバーからロードされるときに使用されるオプションを定義します。（こちらのCORS（Cross-Origin Resource Sharing）を参照してください：https : //developer.mozilla.org/en-US/docs/Web/HTTP/CORS）。ブラウザから送信されるHTTPリクエストを効果的に変更します。「crossorigin」属性が追加された場合- 以下に示すように、origin：<ORIGIN>キーと値のペアがHTTPリクエストに追加されます。

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>

クロスオリジンが正しく設定されていない場合、ブラウザはリクエストをキャンセルできます。

リンク
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML /要素/リンク

ブログ
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity

— ウィトールドカツールバ
ソース

とても便利な答えです！

— Emiel Koning

ご回答有難うございます。技術的な詳細が大好きです！

— アントラン

ファイルの整合性がまだ操作されていないものであるかどうかは、どうすればわかりますか？何かアドバイス？

— vadi taslim

@ yon.fun：独自のリンクを追加するための編集を提案しないでください。ここでは、たとえあなたのコンテンツが価値があるとしても、スパムの可能性にかなり敏感です。

— halfer

技術的には、整合性属性はそれだけで役立ちます。データソースの適切な検証を可能にします。つまり、ブラウザがCDNサーバー上にあるソースファイルから要求された金額を使用して、正しいソースファイル内の数値を確認できるようにするだけです。

このソースの暗号化されたハッシュ値が確立され、ブラウザで事前定義された値に準拠していることが確認された場合、コードが実行され、ユーザー要求が正常に処理されます。

Crossorigin属性は、開発者がCDNパフォーマンスの速度を最適化すると同時に、悪意のあるスクリプトからWebサイトコードを保護するのに役立ちます。

特に、Crossoriginは、Cookieをダウンロードしたり認証手順を実行したりせずに、サイトのプログラムコードを匿名モードでダウンロードします。このようにして、特定のCDNサーバーに最初にサイトをロードするときのユーザーデータの漏洩を防ぎます。これにより、ネットワーク詐欺師がアドレスを簡単に置き換えることができます。

ソース：https : //yon.fun/what-is-link-integrity-and-crossorigin/

— yon.fun
ソース