ユーザーが作成したコードをブラウザ上で安全に実行できるPluginシステムへのアプローチ by Saji

BuriKaigi 2026
レギュラー

ユーザーが作成したコードをブラウザ上で安全に実行できるPluginシステムへのアプローチ

Saji sajikix

テーマ

webフロントエンドにおいて、実用的なプラグインシステム(ユーザーの書いたコードを安全に実行する環境)をどのように実現するか

想定する参加者層(前提知識)

  • JavaScriptの実行環境自体に興味があるようなフロントエンドの中上級者の方
  • CORSやCSPなどのブラウザのセキュリティ機構について最低限の知識がある方
  • 「プラグインシステム」や「ユーザーカスタマイズ」といったユーザーの書いたコードを実行する機能を提供するサービスを開発してる・したい方

トーク概要

SaaSなどのWebサービスには画面や挙動をユーザでカスタマイズできる機能を提供するものがあり、Webフロントエンドにおいてはユーザの作成したJavaScriptを実行することでこれらの機能を実現することが多いです。

一方で、ユーザーの作成したコードを無責任に実行することは重大なセキュリティリスクに繋がります。また仮に悪意がないコードだとしても、以下のような問題を容易に発生させます。

  • 過大な権限による不可逆な操作を行えてしまう / 逆に権限を制限しすぎるとプラグインで実行したいことができない
  • 追加したコードによって製品本体の挙動が不安定になる
  • 製品の挙動や構造に強く依存するコードが原因で製品自体のアップデートがしづらくなる

これらの問題を避けるためには、ユーザーの作成したコードを安全に隔離しつつ、細かく権限を設定できる仕組みが必要です。

このセッションでは、「ユーザーが追加したスクリプトを実行する機能」や「プラグイン/カスタマイズ機能」の開発における課題と、その解決策となる関連技術について解説します。より具体的には、実際にtoBのSaaSサービスで「ユーザーの作成したコードを実行する新しいプラグイン機能」を設計・開発した経験をもとに、以下のような内容について話します。

  • ユーザーの作成するコードを実行する難しさについて
    • セキュリティ上の問題だけでなく、製品の可用性などにも関わる
  • 現状考えられる隔離の方式とメリット・デメリット
    • iframe / web worker / JSEngine on WASM / Realm Shims
  • iframeを選択した理由と注意すべきこと
    • オリジンによるリソースアクセス制限やCookieについて
  • 機能やアクセス先を制限するための仕組み
    • CSPの設定・Channel Messaging APIによる疎通と注意点
  • これから期待される関連仕様
    • ShadowRealm について

これらの「プラグイン/カスタマイズ機能」開発に携わる方々をサポートするとともに、「JavaScriptを安全に実行する」という観点から、ブラウザのセキュリティ機構やJavaScriptエンジンの仕組みへの理解を深めるきっかけを提供することを目指します。