とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

CDNから参照するcss、JavaScriptには Integrity 属性を入れよう

CDNから参照するcss、javascriptには Integrity 属性を入れよう

昨今CDNで外部ドメインからCSSやJSを参照することが多いと思います。
その際に指定しておきたいのが「integrity属性」です。

 

Integrity属性とは

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

https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrityから引用)

と、いうことです。

何がどうなるのというと、具体的にはこんな感じになります。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" integrity="sha384-Pn+PczAsODRZ2PiGg0IheRROpP7lXO1NTIjiPo6cca8TliBvaeil42fobhzvZd74" crossorigin="anonymous"></script>

 

上記は<script>タグですが、<link>タグでも同様です。

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" integrity="sha384-MI32KR77SgI9QAPUs+6R7leEOwtop70UsjEtFEezfKnMjXWx15NENsZpfDgq8m8S" crossorigin="anonymous">

 

こんなかんじで「integrity属性」をつけると、予期せぬ改ざんを受けずに提供されたかをユーザーエージェントが検証できるようになるということですね。
セキュリティ的にはつけておいたほうがいいということなので、今後CDNから外部ファイルを参照する場合はつけておくのがよいでしょう。

 

この属性は、以下のサイトで取得できます。

www.srihash.org

 

方法は簡単。
CDNのURLを入力して「Hash!」ボタンで自動生成です。

CDNから参照するcss、javascriptには Integrity 属性を入れよう

Integrity属性が間違っていると、

エラーで動かないようなので注意しましょう。