プロトタイプが汚染されたヨ〜😭

これからどうなっちゃうの！？

プロトタイプが汚染されたヨ〜😭

これからどうなっちゃうの！？

はじまるよ〜〜〜〜〜！！！！

自己紹介

• canalun (@i_am_canalun)
• elementチーム@テックタッチ

趣味でやっていること

• DOMDOMタイムス�(zennでやってるよ)

• TAPL.ts�(TAPLの輪読会)

• Chromium Contributor

プロトタイプやグローバルの汚染が怖い

当たり前だけど、汚染は怖い

• コードの振る舞いが完全に予知不可能になる
• 安全性にも影響を与えてしまう�(極端な例を考えて見るなら、Array.filterをやると勝手にfetchされるとか)

プロトタイプやグローバルの汚染が怖い

当たり前だけど、汚染は怖い

• コードの振る舞いが完全に予知不可能になる
• 安全性にも影響を与えてしまう�(極端な例を考えて見るなら、Array.filterをやると勝手にfetchされるとか)

クライアントサイド(3rd party script)も

サーバーサイドも

サードパーティスクリプトって広告以外にもいろいろある

• 分析ツール
• SNS連携のボタンだのなんだの
• チャットボットとかガイダンスを出すとかカスタマーサポート的なツール
• 決済系のツール

汚染してくるコードは意外とある

グローバル汚染

Zone.js

(Angular

非同期処理

ライブラリ)

汚染してくるコードは意外とある

グローバル汚染

Zone.js

(Angular

非同期処理

ライブラリ)

手がこんでるねえ😇

汚染してくるコードは意外とある

​

プロトタイプ汚染

有名なSaaSの

OSSライブラリ

汚染してくるコードは意外とある

汚染というか

チェーン差し込み？

どっかのサイト

不要なpolyfill、polyfillのバグ

• 対応しているはずのブラウザなのにpolyfill(自家製含む)を入れているアプリも多くある(感覚値)
• かつ、polyfillが正しく動く保証はやはりない
• 例えばcore-jsのバグで、descriptorのwritableがデフォルトではない値でpolyfillされてlodashが落ちた(修正済み)

https://github.com/zloirock/core-js/issues/1312

不要なpolyfill、polyfillのバグ

• 対応しているはずのブラウザなのにpolyfill(自家製含む)を入れているアプリも多くある(感覚値)
• かつ、polyfillが正しく動く保証はやはりない
• 例えばcore-jsのバグで、descriptorのwritableがデフォルトではない値でpolyfillされてlodashが落ちた(修正済み)

https://github.com/zloirock/core-js/issues/1312

現状の対策: どうにかしてrealmを作る

• worker
• webならiframe

iframeの例

それができないこともある

• worker
• 基本は非同期が前提になる
• workerでは使えないAPIがある
• iframe
• ページ自体にCSP: sandbox

汚染まわりをECMAScriptはどう思っているんだろう

汚染まわりをECMAScriptはどう思っているんだろう

汚染まわりをECMAScriptはどう思っているんだろう

• proposalの内容はstage 4になるまで�変わり続けるよ！
• ここに書いてあるのは�2024年1月下旬時点で調査した内容！

Object.freeze()というものがあるよ

Object.freeze()をやる前

Object.freeze()をやると！！

Object.freeze()をやると！！

上書きできなくなってる！！

いい感じ！

Object.freeze()をやると！！

上書きできなくなってる！！

いい感じ！

でも既に汚れてたらどうする？

既に汚れているものをObject.freeze()

してもしょうがない

​

​

👶「もっとすごいのないの〜？」

​

Secure ECMAScript, Jessie...

https://docs.agoric.com/guides/js-programming/hardened-js.html#hardening-javascript-strict-mode

Frozen Realmと呼ばれていたやつ

https://docs.agoric.com/guides/js-programming/hardened-js.html#hardening-javascript-strict-mode

どういう状況なのか？

Kris Kowal

QやCJSを

作ったすごい人

SESまわりで

活躍している

https://es.discourse.group/t/what-is-the-current-status-of-ses-tinyses-and-jessie/1306

どういう状況なのか？

https://es.discourse.group/t/what-is-the-current-status-of-ses-tinyses-and-jessie/1306

Secure ECMAScriptは

• ShadowRealm
• Compartment
• Hardened JavaScript

に分解されたよ

どういう状況なのか？

見てみよう

https://es.discourse.group/t/what-is-the-current-status-of-ses-tinyses-and-jessie/1306

Secure ECMAScriptは

• ShadowRealm
• Compartment
• Hardened JavaScript

に分解されたよ

ShadowRealm

1度目の検索は

絶対に遊戯王のカードにたどり着いてしまう

恐ろしいproposal

ShadowRealmは相当前からある

https://github.com/tc39/proposal-shadowrealm

ShadowRealmができること

• realmを独立させてそこでコードを実行できる
• realm = globalThis + built-in objects

(built-in objects = ArrayとかObjectとか。正確にはspecを、ざっくりとはMDNを参照)

• ライブラリ同士の干渉がなくなる

ShadowRealmのインターフェース

https://github.com/tc39/proposal-shadowrealm/blob/main/explainer.md

👶「これで全部解決や！！！」

👶「これで全部解決や！！！」

ShadowRealmでは

web APIがほぼ使えない……！

​

​

• ECMAScript的built-inは使える
• webのAPIのうち何が使えるかは協議中
• WinterCGのMinimum Common Web Platform API
• stage 3へ行くための要請

たしかにDOMとか論外だよね

​

realmの隔離が目的であって、

グローバルに強く結びついたDOMだとかを

ShadowRealmから操作するのは論外

​

👶「なにか他のものがほしいね」

Compartmentはどうか？

​

いろいろ制御した

仮想環境を作れる

• タイムゾーン
• モジュール

Compartmentはどうか？

​

いろいろ制御した

仮想環境を作れる

• タイムゾーン
• モジュール

と思っていた時代が私にもありました

Compartmentのスコープはモジュールローディングに限定された

​

https://github.com/tc39/proposal-compartments/pull/46

Compartmentの現在の内容(stage 1)

​

• モジュールを第一級オブジェクトにして、もっと操作可能にしようという提案
• Module/ModuleSourceなるbuilt-inを導入する
• モジュールグラフ解析、HMR、非JSモジュール利用の容易化、異なる実行環境の再現ができる
• 実行環境ごとにモジュール解決の仕組みは違う

冷静に、CompartmentもけっきょくShadowRealmと同じ話になるのでは？

​

API使えるのかな……

Compartmentもある種globalThisを隔離する

👉 ShadowRealmと同じように省かれるかも？

ではHardened JavaScriptは？

https://docs.agoric.com/guides/js-programming/hardened-js.html#hardening-javascript-strict-mode

Hardened JavaScriptの概要

• mutableなbuilt-inの排除
• built-inを凍結する(frozen built-ins)
• ambient authorityの排除
• 各オブジェクトがどんな関数を使っていいのかを制御できる(OCap)

https://docs.agoric.com/guides/js-programming/hardened-js.html

これけっこう安全では？

• built-inを凍結して
• 各オブジェクトがどんな関数を使っていいのかを制御できる

👉とにかく安全！

でも冷静に……

Object.freeze()と同じで、

既に汚染されていたら凍らせても、、、ねえ？

​

それに、Hardened JavaScript上で動くライブラリと動かないライブラリが併存したらどうなるの？？

けっきょく……隔離も凍結もむずくない？

• 隔離する系(ShadowRealm, Compartment)
• その理念からしてweb APIが使えない
• 凍結する系(Object.freeze, Hardened JS)
• 既に汚染されていたら無力なんじゃないか
• 他のライブラリは汚染「したい」かも

取り出す系はないのか？

proposal-get-intrinsic

proposal-get-intrinsic

proposal-get-intrinsic

👶「任意のタイミングで汚染されていないオリジナルのプロトタイプがとれる！これだ！」

proposal-get-intrinsic

👶「任意のタイミングで汚染されていないオリジナルのプロトタイプがとれる！これだ！」

と思っていた時代が私にもありました

proposalをよく読んでみると

proposalをよく読んでみると

呼び出された時点でのprototypeを

キャッシュして

後続のみんなで取り回す仕組みらしい

​

だからfirst-run code、

つまり一番最初のコードで呼び出される

想定らしい

くわしくは: https://github.com/tc39/proposal-get-intrinsic

proposalをよく読んでみると

呼び出された時点でのprototypeを

キャッシュして

後続のみんなで取り回す仕組みらしい

​

だからfirst-run code、

つまり一番最初のコードで呼び出される

想定らしい

くわしくは: https://github.com/tc39/proposal-get-intrinsic

汚染されてたら、

汚染されたものが取り回されるってワケ

👀「それなにがメリットなんですか？」

まとめ

• 明るい未来はない
• CompartmentでAPIが使える可能性に賭ける？
• でも、stage 1。いつ実現するんだろう？
• 現時点では、webならiframeでがんばるしかない
• CSP: sandboxだったら終わるけど
• オリジナルのprototypeを取り出せる提案をしてみたい。たぶん理由があるんだろうけど

参考にさせて頂いたソース

petamorikenさんの記事

https://zenn.dev/pixiv/articles/2f6511742d7907

https://zenn.dev/pixiv/articles/6656b387555610