iframe内の転送量を制限する Transfer Size Policy とは

Web w3c

Webページにソーシャルボタンや広告といったiframeを埋め込むことがあります。

この時、埋め込んだ側はiframeの中で使用されるリソースを制限する方法はありません。例えば動画を再生すればトラフィックとCPUが消費されますし、最近では実はBitcoinの採掘に利用されるということもあるかもしれません。

そのようなリソースの消費は、特にモバイル環境においてWebページのユーザ体験を損ねることになります。

そこで、W3CのWICG及びWebPerf WGでは、Transfer Size Policyという仕様が議論されています。まだまだ議論が始まるところで、たたき台というところかと思います。

この仕様は、TPAC 2017のWebPerf WGのミーティングでも議論されるようで、資料がすでに公開されており、アジェンダより確認できます。

docs.google.com

Transfer Size Policy

Transfer Size Policy の仕様はWICGのリポジトリから確認できます
github.com

この仕様では、iframeの属性に転送上限と、上限に達した際に発火するイベントを登録できます。

下記の例では、300KB以上転送した際に、ontransferexceededイベントが発火しonBigFrameが呼ばれます。

  <script>
    function onBigFrame(event) {
      console.log("Frame id: " + event.target.id + " exceeded its threshold bytes in category: " + event.category);
    }
  </script>

  <iframe id="foo" ontransferexceeded="onBigFrame(event)" transfersize="300" src="...">


また、例えば、自ドメインとの通信は無制限、example.comとはスタイルシートは50KBで合計500KBまでといった指定もできるようになっています。

  transfersizes: {"default":"100", "self":"*", "*.example.com":"style:50, total:500"}

この仕組によって、リソースを消費するiframeを検知できるようになる。また、最悪iframeのdomを消すことで対応することも出来るが、別途提案されているPausing Documentsを使うことで処理を一時停止することもできる。

Pausing Documents

あわせて、著者の個人リポジトリですがPausing Documentsという仕組みもあわせて議論されています。
github.com

この仕様では、フレーム内の読み込み・レンダリング・スクリプトの実行を停止できるようにする仕組みです。

await frameElement.pause({loading: true, rendering: false, script: false});
await frameElement.unpause();

Transfer Size Policyの仕組みとあわせて、リソースを大量に消費するframeを一時的に停止することができるようです。