HTMLのintegrity属性はファイル読み込み時のセキュリティ機能

HTMLでBootstrapなどのフレームワークを使う際に、scriptタグにintegrityという見慣れない属性の後に意味不明な文字列が並んでいるのを見たことありませんか？

<!-- Bootstrapのはじめにより -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

このintegrity属性はCDN(Content Delivery Network)のようにインターネット経由で外部ファイルを読み込む際にセキュリティ機能の役割を果たすため、消さない・付与することをおすすめします。

Integrity属性とは？

integrity属性はインターネット経由で読み込む外部ファイルが改ざんされていないかをブラウザにチェックさせるための属性です。

後に続いている文字列は取ってくるファイルを暗号化して生成された文字列です。先頭の”sha384″が暗号化の方法（ハッシュ関数）となっています。

ファイルを暗号化したものを付与することでスクリプトの読み込み時に読み込んだファイルを暗号化したものがintegrity属性と一致するかブラウザがチェックすることで改ざんされていないことをチェックすることができます。

どのようにintegrity属性を付与するか

integrity属性はSRI Hash Generatorから生成することができます。

テキストボックスの中に取得するファイルのURLを入力するとintegrity属性を含んだscriptタグを生成してくれます。

ぜひ使用してみてください！