犬ターネット

CDN から提供される css や javascript には以下のように integrity 属性が付いていることが多い。

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
  integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
  crossorigin="anonymous"
>

これはブラウザ側のセキュリティ機能で「Subresource Ingegrity (SRI)」と呼ばれている。読み込んだソースのハッシュ値と integrity で指定したハッシュ値が一致すればOK、一致しなければ読み込んだソースは実行されない。詳しくは以下 MDN を参照。

Subresource Integrity - ウェブセキュリティ | MDN

なお、ソースのハッシュ値は以下コマンドで取得できる（sha384の場合）。

cat FILENAME | openssl dgst -sha384 -binary | openssl base64 -A

どういう挙動を示すか試してみる。先ずは OK パターン( ok.html )。背景がライトブルーになり「integrity test!!」が表示される。css も js も実行されることを確認。

<link rel="stylesheet" href="./test.css" integrity="sha384-xznRfr4pvbi6rmUdY3fy7rkmB2dJjP8t6hEw3tN1fp2WcWNTYiyW6sRikWZ/iK2u" />
<script src="./test.js" integrity="sha384-fMo3E3lE6tPGBbryv/9Yw69+1fuY0e7T0GjVtM9sqcG9PTv8tiV8yuJkE1L+RlWl"></script>

次は integrity 値を変更した NG パターン( ng.html )。css も js も実行されず、コンソールには「integrity 属性内の sha384 ハッシュが subresource のコンテンツと一致しません」と出力された。

<link rel="stylesheet" href="./test.css" integrity="sha384-XznRfr4pvbi6rmUdY3fy7rkmB2dJjP8t6hEw3tN1fp2WcWNTYiyW6sRikWZ/iK2u" />
<script src="./test.js" integrity="sha384-FMo3E3lE6tPGBbryv/9Yw69+1fuY0e7T0GjVtM9sqcG9PTv8tiV8yuJkE1L+RlWl"></script>

CDN に限らず自サーバの css や js にも integrity 属性をつけておくと安心かも。運用が面倒だけど。