共有HTMLのJavaScriptはどこまで動く？CORSとsandboxの確認

HTML2WEBの共有linkでJavaScriptが動くかを確認するときは、「動く」「動かない」の 二択にしません。documentのcontextと、必要なresourceを分けて確認します。現在の viewerはHTMLをsandbox="allow-scripts"のopaque originで実行しますが、アプリの cookieや外部networkを共有する通常のhosting環境ではありません。

このlinkは短時間のreview用previewです。login、決済、live API、永続URLが必要な applicationの代わりにはなりません。

現在のHTML viewerの実行範囲

項目	raw HTML preview	確認すること
inline <style>	実行pathに含まれる	意図したlayoutとstyleか確認する
inline <script>	実行pathに含まれる	synthetic dataでDOM interactionを試す
外部<script>・CSS	許可されると仮定しない	必要なcodeをsingle fileに入れるか本番appへ移す
fetch・XHR・WebSocket	network接続が遮断される範囲	CORS設定だけでviewer policyは変わらない
外部font	許可されると仮定しない	system fontまたはinline assetを使う
外部image	raw HTML policyでは依存しない	小さい画像はdata:やinline SVGで確認する
<iframe>	frameの埋め込みは範囲外	外部serviceのembedを主要機能にしない
<form>送信	外部submitは範囲外	UI確認にとどめ、実際の受付はapplicationで行う

HTML2WEBはallow-scriptsを使いますが、allow-same-originは付与せず、content responseには追加のCSP sandboxを適用します。MDNのiframe sandbox reference が説明するように、sandboxはpermissionを分ける仕組みであり、外部serviceと同じ 実行環境を再現する機能ではありません。

まずinline動作をsynthetic fixtureで確認する

実際のAPI keyや顧客dataをtestに入れず、短いfixtureから始めます。

<button id="toggle" type="button">状態を変更</button>
<p id="state">待機中</p>
<script>
  document.querySelector('#toggle').addEventListener('click', () => {
    document.querySelector('#state').textContent = '動作を確認';
  });
</script>

まずこのfileを公開し、DOM変更とstyleを確認します。その後、次の項目を一つずつ 追加し、想定と違い始めた段階を記録します。

1. inline SVGまたはdata: image
2. 外部imageとweb font
3. 外部scriptとfetch request
4. iframeとform action

依存関係を一度に増やすと原因が分かりません。raw HTML viewerは connect-src 'none'の境界で動くため、MDNのCORS guideを読んでもviewerの network制限は解除されません。

MarkdownとHTMLは同じresource policyではない

HTML2WEBはMarkdownを安全なrendererでstatic HTMLへ変換します。現在のtestでは Markdown画像にHTTPS・data:・blob: resourceを許可しますが、raw HTMLはinline asset中心の狭いpolicyです。Markdownで表示できた外部imageがraw HTMLでも表示される とは限りません。content typeと実際のURLを一緒に記録してください。

次の要件なら本番applicationへ移す

• login、cookie、userごとの権限が必要
• server API、live data、WebSocket接続が必要
• 決済、予約、問い合わせを実際に保存する
• 外部script、font、map、chart moduleへの依存が複数ある
• review後も検索される永続URLが必要

この場合はHTML共有・URL変換・本番配布の選び方 で寿命と運用責任を比較し、HTML2WEBは承認前のreview linkとして使ってください。

共有前のcompatibility checklist

• synthetic fixtureでinline styleとscriptを先に試した。
• 外部image・font・script・APIを一つずつ確認した。
• remote serverにCORS headerがあってもconnect-src 'none'が残ると理解した。
• iframe、form、login、cookieを本番機能として説明していない。
• raw HTMLとMarkdownのresource policyを区別した。
• API key、個人情報、社内URLのないcopyだけを共有する。
• 実際のexpiryを確認し、継続運用にはdurable hostingを選んだ。

公開前のsecret確認はHTML共有前のセキュリティchecklist、 password・expiry・noindexの違いは共有link保護guideで確認できます。 HTMLをURLに変換するtoolは、この境界を隠さずreview可能な一時URLを 作るためのものです。