CDNを参照するlinkタグやscriptタグに必要な属性について調べた

ASP.NET Coreのプロジェクトを作った状態の Views/Shared/_Layout.cshtml の、CSSやJavaScriptを読み込んでいる記述は以下のようになっています。（抜粋）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
        asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
        asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
        crossorigin="anonymous"
        integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
        asp-fallback-test="window.jQuery"
        crossorigin="anonymous"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
        crossorigin="anonymous"
        integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>

CDN経由でファイルを取得するようになっていますが、タグに crossorigin や integrity という見慣れない属性があり、気になったので調べてみました。

crossorigin属性

crossorigin 属性: コンテンツへの CORS アクセスの要求 | MDNからの引用です。

developer.mozilla.org

HTML5 では、 CORS への対応が <img>, <video>, <script> など一部の HTML 要素で行われ、 crossorigin 属性 (crossOrigin プロパティ) で、要素が取得するデータに関する CORS リクエストを構成することができます。

crossorigin="anonymous"のときのリクエストヘッダー

GET /css/site.css HTTP/1.1
Host: localhost:5001
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: text/css,*/*;q=0.1
Accept-Language: ja
Accept-Encoding: gzip, deflate, br
Referer: https://localhost:5001/
DNT: 1
Connection: keep-alive
Cookie: .AspNet.Consent=yes
Pragma: no-cache
Cache-Control: no-cache

crossorigin="use-credentials"のときのリクエストヘッダー

GET /ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css HTTP/1.1
Host: cdnjs.cloudflare.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: text/css,*/*;q=0.1
Accept-Language: ja
Accept-Encoding: gzip, deflate, br
Referer: https://localhost:5001/
Origin: https://localhost:5001
DNT: 1
Connection: keep-alive
Cookie: __cfduid=d0c0f4f210dea6cf067de9ca255f7b4041540889478
Pragma: no-cache
Cache-Control: no-cache

違いは？

crossorigin="use-credentials"とすると、Originが明示されCookieにセッション情報を含めて送るようになるようです。

integrity属性

サブリソース完全性 | MDNからの引用です。

developer.mozilla.org

サブリソース完全性 (SRI) は、 (CDN などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。

ファイルが改ざんされていないことを検証するための属性のようです。CDN経由でファイルを使用する際はちゃんとこの属性をつけたほうが良さそうですね。

ではこのハッシュ値はどう作る？というところですが、opensslやshasumといったコマンドでも作れますが、このサイトを使うと簡単です。対象のファイルURLを指定するとハッシュ値を生成してくれます。

SRI Hash Generator

ハッシュ値を生成する