JavaScript サンドボックスの探索

1. シナリオ

最近、Web ベースのプラグインシステムに似たものに取り組んでおり、サードパーティアプリケーションのコードを実行するために js サンドボックスを操作しています。

2. サンドボックスの基本機能

実装前に（正確にはいくつかの解決策を研究した後）、サンドボックスはevent bus通信に基づいて上位層機能を実装することが決定されました。基本的なインターフェースは次のとおりです。

エクスポートインターフェースIEventEmitter {
  /**
   * リスニングイベント * @param チャネル
   * @param ハンドル
   */
  on(チャネル: 文字列、ハンドル: (データ: any) => void): void;

  /**
   * リスニングをキャンセル * @param チャネル
   */
  offByChannel(チャンネル: 文字列): void;

  /**
   * トリガーイベント * @param チャネル
   * @param データ
   */
  出力(チャネル: 文字列、データ: 任意): void;
}

/**
 * 基本的な js vm 機能 */
エクスポートインターフェースIJavaScriptShadowboxはIEventEmitterを拡張します{
  /**
   * 任意のコードを実行する * @param code
   */
  eval(コード: 文字列): void;

  /**
   * インスタンスを破棄する */
  破棄(): void;
}

通信機能に加えて、次の 2 つの追加方法が必要です。

eval : jsコードを実行する
destroy : サンドボックスを破壊し、内部実装でいくつかのクリーンアップタスクを処理する

JavaScript サンドボックス図:

以下ではiframe/web worker/quickjsを使用して任意のjsを実行する方法を説明します。

3. iframeの実装

正直に言うと、Web のサンドボックスについて話すとき、最初に思い浮かぶのはおそらくiframeですが、これはエントリファイルとして js ではなくhtmlを使用するため、エントリとして js を使用したいが、必ずしもiframeを表示する必要がないシナリオにはあまり適していません。

もちろん、jsコードをhtmlでラップして実行することもできます。

関数 evalByIframe(コード: 文字列) {
  const html = `<!DOCTYPE html><body><script>$[code]</script></body></html>`;
  定数 iframe = document.createElement("iframe");
  iframeの幅 = "0";
  iframe.height = "0";
  iframe.style.display = "なし";
  document.body.appendChild(iframe);
  const blob = new Blob([html], { type: "text/html" });
  iframe.src = URL.createObjectURL(blob);
  iframe を返します。
}

evalByIframe(`
document.body.innerHTML = 'こんにちは世界'
console.log('location.href: ', location.href)
console.log('localStorage: ',localStorage)
`);

しかし、 iframeは次のような問題があります。

evalとほぼ同じです (主にObject.createObjectURLを使用し、相同性をもたらします) – 致命的
すべてのブラウザapi –すべてのdom apiではなく、挿入されたapiにのみアクセスできることを推奨します。

4. Webワーカーの実装

基本的に、 web worker 、js をエントリポイントとして使用し、 iframe

関数 evalByWebWorker(コード: 文字列) {
  const blob = new Blob([code], { type: "application/javascript" });
  url を URL.createObjectURL(blob) に変換します。
  新しい Worker(url) を返します。
}

WebWorkerによる評価(`
console.log('location.href: ', location.href)
// console.log('localStorage: ', localStorage)
`);

しかし同時に、 iframeよりも優れているのは確かだ

アクセスできないlocalStorage/document APIなど、サポートされるブラウザAPIは限られています。詳細については、[MDN] Web Workersで使用できる関数とクラスを参照してください。
結局のところ、挿入されたAPIはすべて、 postMessage/onmessageに基づく非同期操作です。

5. Quickjsの実装

quickjsを使用する主なインスピレーションは、figmaのプラグインシステムに関するブログ投稿、quickjsの中国語ドキュメントから来ています。

quickjs とは何ですか?これは JavaScript ランタイムです。最も一般的に使用されるランタイムはブラウザとnodejsですが、他にも多くのランタイムがあり、GoogleChromeLabs/jsvu でさらに詳しく見つけることができます。 quickjs 、 wasmへのコンパイルをサポートし、ブラウザ上で実行される軽量の組み込みランタイムです。また、 es2020までの js 機能 (人気のPromiseやasync/awaitを含む) もサポートしています。

非同期関数evalByQuickJS(コード:文字列) {
  const quickJS = getQuickJS() を待機します。
  定数 vm = quickJS.createVm();
  定数 res = vm.dump(vm.unwrapResult(vm.evalCode(code)));
  vm.dispose();
  res を返します。
}

 
console.log(evalByQuickJS(`1+1`) を待機します);

アドバンテージ：

実際、セキュリティの面では比類のないもので、異なるvm上で実行されるため、既存のProxyベースのマイクロフロントエンドで発生する可能性のあるセキュリティ上の問題が発生しにくくなります。
実際のテストはありませんが、 figmaのブログ投稿では、ブラウザの構造化クローンでは大きなオブジェクトを扱うときにパフォーマンスの問題が発生するのに対し、 quickjsではこの問題は発生しないと指摘されています。

欠点:

共通のconsole/setTimeout/setIntervalなどのグローバルapi存在しません。これらはjsの機能ではなく、ブラウザとnodejsランタイムによって実装されているため、手動で実装して挿入する必要があり、これは大きな欠点です。
ブラウザのDevTooデバッグが使用できない
基礎となる実装は C で行われるため、メモリの解放は手動で管理する必要があります。

6. 結論

最終的に、インターフェースに基づいて Web Worker と QuickJS の EventEmitter を実装し、いつでも切り替えられる機能をサポートすることを選択しました。

JavaScript サンドボックスの探索に関するこの記事はこれで終わりです。JavaScript サンドボックスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: