2020-12-28に更新

Mastodon v3.3.0 で導入された Subresource Integrity とは何か? CDN 経由で WebUI がうまく表示されないときの対処方法

Mastodon v3.3.0 では、セキュリティ向上のため Subresource Integrity(SRI)が導入されました。

  • Add subresource integrity for JS and CSS assets (Gargron)
    If you use a CDN for static assets (JavaScript, CSS, and so on), you have to trust that the CDN does not modify the assets maliciously
    Subresource integrity compares server-generated asset digests with what's actually served from the CDN and prevents such attacks
    Release v3.3.0 · tootsuite/mastodon

これについて少し解説し、CDN を経由した時に発生しうる現象と解消方法について書きます。

Subresource Integrity とは何か?

CDN の導入により、ページの読み込みに必要な時間や帯域を減らすことができます。
しかし CDN が攻撃され、CDN がキャッシュしているスクリプトが悪意のあるものに書き換えられたらどうなるでしょうか?
CDN がホストしているスクリプトを使っている 全てのWebサイトが攻撃対象になってしまうわけです。

こういう事態を防ぐために導入されたのが SRI です。
サブリソース完全性 - Web セキュリティ | MDN

どういう仕組みで動いてるの?

スクリプトやCSSを読み込む HTML タグに、integrity 属性を追加し、ハッシュ値を記載します。
Mastodon v3.3.0 では勝手に埋め込んでくれるので、サーバー管理者が特に意識する必要はありません。
HTML を見てみると、下記のようにハッシュ値が記載されているのが確認できます。

<link rel="preload" href="/packs/js/features/getting_started-ac6a1f26725fa47043fd.chunk.js" as="script" type="text/javascript" crossorigin="anonymous" integrity="sha256-GnAX+3Gsq9hKmz8cqCNgi+X82II945b9WXz1OHJQfBA=">

ここに埋め込んだハッシュ値と、ブラウザが実際に読み込んだファイルのハッシュ値が一致しなかった場合、ブラウザはそのファイルのロードをブロックします。
そうすることで、意図せず改変されたコードが実行されることを防ぎます

この変更で起こりうること

Cloudflare などの CDN にはより効率的にキャッシュを配信する仕組みがいくつもあります。
この仕組みの中には、HTML、JavaScript、CSS 等のサイズを縮小するものがあります。

SRI が導入されたプログラムで、このような CDN の機能を使うとどうなるでしょうか?
CDN 側でコードが縮小された結果、ハッシュ値が変わり、WebUI が正常に表示できなくなってしまうのです。

これを回避するためには、CDN がファイルを縮小したりしないように設定します。
例えば Cloudflare なら、 Speed > Auto Minify のチェックを全て外します。
image.png
その後、Cloudflare のキャッシュを全てパージ、ブラウザのキャッシュも削除して、WebUI をリロードしてみてくささい。

ツイッターでシェア
みんなに共有、忘れないようにメモ

cybergene

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント