とあるweb屋の仕事術

とあるweb屋の仕事術

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

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

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

さて昨今CDNで外部ドメインから

CSSやJSを参照することが多いと思います。

その際に指定しておきたいのが「integrity属性」です。

「integrity属性」とはなんぞや、ということなんですが、

下記のブログが参考になります。

 

3jigen.net

上記ページでも引用されていますが、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属性が間違っていると、

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