1. シナリオ最近、Web ベースのプラグイン システムに似たものに取り組んでおり、サードパーティ アプリケーションのコードを実行するために js サンドボックスを操作しています。 2. サンドボックスの基本機能実装前に(正確にはいくつかの解決策を研究した後)、サンドボックスは エクスポートインターフェースIEventEmitter { /** * リスニングイベント * @param チャネル * @param ハンドル */ on(チャネル: 文字列、ハンドル: (データ: any) => void): void; /** * リスニングをキャンセル * @param チャネル */ offByChannel(チャンネル: 文字列): void; /** * トリガーイベント * @param チャネル * @param データ */ 出力(チャネル: 文字列、データ: 任意): void; } /** * 基本的な js vm 機能 */ エクスポートインターフェースIJavaScriptShadowboxはIEventEmitterを拡張します{ /** * 任意のコードを実行する * @param code */ eval(コード: 文字列): void; /** * インスタンスを破棄する */ 破棄(): void; } 通信機能に加えて、次の 2 つの追加方法が必要です。
JavaScript サンドボックス図: 以下では 3. iframeの実装正直に言うと、Web のサンドボックスについて話すとき、最初に思い浮かぶのはおそらく もちろん、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) `); しかし、
4. Webワーカーの実装基本的に、 関数 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) `); しかし同時に、
5. Quickjsの実装
quickjs とは何ですか?これは JavaScript ランタイムです。最も一般的に使用されるランタイムはブラウザと 非同期関数evalByQuickJS(コード:文字列) { const quickJS = getQuickJS() を待機します。 定数 vm = quickJS.createVm(); 定数 res = vm.dump(vm.unwrapResult(vm.evalCode(code))); vm.dispose(); res を返します。 } console.log(evalByQuickJS(`1+1`) を待機します); アドバンテージ:
欠点:
6. 結論最終的に、インターフェースに基づいて Web Worker と QuickJS の EventEmitter を実装し、いつでも切り替えられる機能をサポートすることを選択しました。 JavaScript サンドボックスの探索に関するこの記事はこれで終わりです。JavaScript サンドボックスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...
フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...
データのバックアップ操作は非常に簡単です。次のコマンドを実行します。 docker run --vo...
前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...
この記事の例では、参考までに虫眼鏡コンポーネントを開発するためのjsの具体的なコードを共有しています...
1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....
目次1. 遅いクエリSQLを見つけて最適化する方法a. スローログに基づいてスロークエリSQLを見つ...
Unicode 署名 BOM - BOM とは何ですか? BOM は Byte Order Mark...
<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...
目次問題の説明原因分析解決問題の説明最近、奇妙な問い合わせを受けました。更新ステートメントはエラーな...
最初の方法: デモとしてボタンをクリックしてテキストを表示または非表示にするクラスを動的に追加します...
目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...
まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...
フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...