ブラウザ上にセキュリティ上の懸念がない任意のスクリプト実行環境を用意したい

Question

前提・実現したいこと

チャットのようなインタラクティブなWebアプリケーションを構築しようとしています。
そこに、ユーザーがブラウザ上に入力したコードをそのまま実行できる機能の追加を検討しています。
不特定多数に公開することを想定しており、ユーザーtoユーザーで任意コードを送れてしまうので、単純にJavaScriptでeval()するみたいな実装にしたくありません。
また、パフォーマンスの都合上、サーバーにPOSTして実行するのは避けたいなと考えています。
実現するライブラリや方法をご存知の方はいらっしゃらないでしょうか？

例えば、以下のようなものがあればいいなと思っていました。

• ブラウザ上で実行できるスクリプト実行エンジン。
• JavaScriptで window.location などの任意のAPI使用を制限する方法。

利用イメージ

ユーザー入力のコードは、例えば以下のようなものを想定しています。

function onPostRound(ctx, api) [
  if (ctx.round === 2) {
    api.triggerEvent('hitman', {});
  }
}

function hitman(arg, api) {
  // ...
}

Comments

[plasticgrammer]

どこまでできると要件が満足できるのか知りたいのですが、
DOM要素を操作することは不可としてよいのでしょうか？
DOM要素の操作は不可とした場合、それ以外で何をしたいのでしょうか。（提示頂いた利用イメージでは、理解が進みませんでしたので補足をお願いしたいです）

[payoppa]

一番理想的なのは、DOM操作含むブラウザが提供するWindow配下のAPIが使えなくなることです。

要求としては、以下２点を満たす処理系が欲しいです。
・パラメータ付きで処理が起動できること。
・結果を何らかの形で呼び出し元(JavaScript)で返却できること。API経由でも何らかのストリーム経由でもよし。

目的はセキュリティとしていますが、実のところ個人でやるものなので、ある程度コントロールできれば満足です。（最悪、アプリで注意喚起を強く入れて自己責任とすることを考えています。）
仮に被害を想定するなら、例えば悪意のある人物が、同セッションに居合わせたユーザーにJavaScriptに埋め込まれた任意のバイナリをダウンロードさせて実行を促すとか、認証と称したUIを表示してID/パスワードを詐取するとかを防げたらな、という感じです。

Answer 1

きちんと試してはいませんが、<iframe sandbox="allow-scripts">上で実行するのはどうでしょうか。

    <iframe id="test" sandbox="allow-scripts" src=""></iframe>
    <script src="main.js"></script>

document.getElementById('test').src = URL.createObjectURL(new Blob([`
<h1>test</h1>
<script>
    console.log('test'); 
    // 動作する

    console.log(parent.location);
    // 取得できる

    // console.log(parent.document);
    // エラー

    // console.log(parent.location.href);
    // エラー

    console.log(document.referrer);
    // ""
    
    fetch("/"); 
    // リクエストヘッダーの origin が null になる　→ CORSでブロックできる
    
    alert('"alert" not working');
    // エラーにならないが動作しない

    // console.log(document.cookie);
    // エラー
</script>
`], { type: 'text/html' }));

参考：
CSP: sandbox - HTTP | MDN

Comments

[payoppa]

ありがとうございます、お恥ずかしながら、Contents Security Policyという機能を初めて知りました。
すごくサンドボックスしてて信頼感しかないですね！

ただ試した所、iframe内の処理結果をiframeの外から取り出す方法が分からず苦戦しています。
sandboxにallow-same-originを付与するのは本末転倒だし、
パイプになりそうだったlocalStorageもallow-same-originが必要。
なんとかsandbox属性にあたるプロパティを動的に変更できないか探すも、それらしきものになかなかありつけず。
引き続き、研究になりそうです。

[Lhankor_Mhy]

レスポンスが必要だったのですね。

試したわけではないのですが、postMessage はどうでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage

[payoppa]

ありがとうございます。手元でそれらしく動作するコードができました！！
迅速で正確な回答、恐れ入ります。

``````````````````````````````````````````````````````
// sandbox環境にスクリプトを仕込む
document.getElementById('test').src = URL.createObjectURL(new Blob([`
<h1>test</h1>
<script>
// sandbox環境に提供するAPIなどの想定
const scriptid = 'usr0001';
const api = {
requestCommands: (commands) => {
parent.postMessage(
{
type: 'requsetCommand',
sender: 'userscript:' + scriptid,
commans: commands
},
'*'
);
}
};

// 親からPostMessageを受けた時のイベントハンドラ
window.addEventListener('message', (event) => {
const data = event.data || {};

switch (data.type) {
case 'postRound':
!window.onPostRound || onPostRound(event.data);
break;
}
});

// 以下、ユーザー実装する想定のコード

// イベントハンドラ
function onPostRound(ctx) {
if (ctx.round === 2) {
hitman({damage: 1});
}
}

// サブルーチン
function hitman(arg) {
console.log('hitman(' + JSON.stringify(arg) + ')');

api.requestCommands([
{command: 'damage', target: 'p1', amount: arg.damage}
]);
}
</script>
`], { type: 'text/html' }));

// sandbox→親に渡ってくるメッセージのイベントハンドラ
window.addEventListener('message', (event) => {
console.log('parent reserved message:', event);
});

// 親→sandboxにイベント発火。
document.getElementById('test').onload(() => {
document.getElementById('test').contentWindow.postMessage({type: 'postRound', round: 2 }, '*');
});
``````````````````````````````````````````````````````