Subresource Integrityについて調べた

Subresource Integrity という記事をみて、
ちょっと興味深かったのでSubresource Integrityについて、軽く見てみた。

Subresource Integrityはどういうものか

おそらく、以下のようなもの。
ウェブアプリケーションでCDNをつかって、サブリソースを参照することは当たり前になっている。
しかし参照先のサブリソースが安全であるという保証はない。
もし、CDN経由で参照しているサブリソースが攻撃者により改変された場合、XSSの危険性が生じる。

これは、サブリソースの整合性をチェックする仕組みを導入することで、危険を回避できる。
Subresource Integrityとは、サブリースをSHA256, SHA512などでハッシュ化して、linkタグやscriptタグにintegrity属性として付与することで、整合性を確認できるようにしたもの。
もし、integrity属性がある場合は、ブラウザは読み込み時に整合性をチェックして一致した場合にのみロードされる。

Subresource Integrityを試す

MDN Subresource Integrityをみると
Chrome v45, Firefox v43 とのことだったので、Chrome Canaryで試した。

まず適当なファイルをsha256でハッシュ化して、integrity属性の値を生成する。

あとはscriptタグなりlinkタグなりにintegrity属性を付与する

ちなみにscriptタグに付与しているcrossorigin属性は「anonymous」キーワードが指定された場合、
リクエストにはcookieやクライアントサイドのSSL証明書、HTTP認証などのユーザ認証情報は利用されなくなるらしい。

もし、コードが改変され整合性が確認できない場合は

また、そのような場合に備えてfallbackを追加しておく

ハッシュ値はSRI Hash Generatorを使うと便利。
WordpressではSubresource Integrity (SRI) Managerなどが使えそう。

参考しにたページ
Subresource Integrity
Subresource Integrity
CORS 設定属性