開発者 / HTML
HTMLビューア：CSSとJavaScriptに対応したライブサンドボックスプレビュー
HTMLと任意のCSSを貼り付けて、隔離されたライブプレビューを確認できます。JavaScriptを明示的に有効化し、プレビューを全画面表示したり、HTMLプレビューファイルをダウンロードしたりできます。
HTMLビューア：CSSとJavaScriptに対応したライブサンドボックスプレビュー: ソースを不透明なオリジンのサンドボックス化されたフレーム内にレンダリングします。スクリプトは初期状態で無効になっています。コンテンツセキュリティポリシーにより、外部リソース、fetchリクエスト、フォーム、埋め込みページをブロックしつつ、インラインスタイルとdata画像は使用できます。ページを更新できるメタデータ、base要素、埋め込みブラウジングコンテキストは削除されます。ダウンロードしたファイルでも、隔離されたフレームが維持されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
プレビューはこのサイトから分離されています。スクリプトはデフォルトで無効です。外部スタイル、スクリプト、画像、fetchリクエスト、フォーム、埋め込みページはブロックされますが、インラインスタイルとデータ画像は許可されます。スクリプトを有効にすると、プレビュー内に貼り付けたコードが実行されます。
ダウンロードしたHTMLでは同じ分離プレビューが開きます。このページにソースは挿入されません。
フレームの分離
WHATWG HTML標準は、iframeのサンドボックス制限（https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-sandbox）を定義しています。このプレビューでallow-same-originが許可されることはありません。
コンテンツの制限
W3C Content Security Policy仕様は、リソースの制限（https://www.w3.org/TR/CSP3/）を定義しています。プレビューでは、提供されたマークアップの前に制限の厳しいポリシーを適用します。ダウンロードしたラッパーにもサンドボックス境界が維持されます。
使い方
- HTMLと任意のCSSまたはJavaScriptを貼り付けます。
- 貼り付けたコードを隔離されたプレビューで実行したい場合のみ、スクリプトを有効にします。
- ライブプレビューまたは全画面プレビューを確認し、サンドボックス化されたプレビューファイルをダウンロードします。
プライバシーと制限事項
入力内容とファイルはブラウザ内で処理されます。アップロードされることはありません。
関連ツール
よくある質問
プレビューから、このサイトのCookieやページにアクセスできますか？
サンドボックスによって同一オリジンアクセスが許可されることはありません。貼り付けたコードから、このサイトのDOMやストレージを読み取ることはできません。スクリプトは有効にした場合のみ実行されます。
外部の画像やライブラリが読み込まれないのはなぜですか？
ローカルプレビューではリモートリソースがブロックされます。スタイルとスクリプトはエディターに直接記述し、画像にはdata URLを使用してください。
完全なHTMLドキュメントを貼り付けられますか？
はい。プレビューは完全なドキュメントと断片の両方に対応しています。メタデータと埋め込みブラウジングコンテキストを削除し、独自のコンテンツセキュリティポリシーを適用したうえで、結果を隔離されたフレームにレンダリングします。
ダウンロードには何が含まれますか？
ソースを同じサンドボックス内で開くHTMLファイルが含まれます。通常のページにソースを直接貼り付けたものではなく、プレビューファイルです。
無料ツール · ブラウザ内で · アカウント不要