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

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を一時的に停止することができるようです。