Load preview in secure frame

Certain features, such as the camera API, don’t work properly in the preview iframe because it is not considered secure. This is odd to me, since it’s a srcdoc iframe in a secure parent frame, but it is what it is.

One idea: create a static HTML page whose job is to render the preview. That page would basically be a blank document with the previewSupport JavaScript bundle loaded in. In addition to the current previewSupport functionality, we’d listen for an initial message from the parent document containing the full HTML document that is to be previewed, and then use a document.open() followed by a document.write() to replace the entire DOM with the project preview. I think it would be most sensible for this hook to just be part of the initial JS Channel initialization handshake.

Live-updating of the preview should work pretty well out of the box, since we already load each successive compiled project iteration in a fresh iframe. The main thing to look out for is that we preload the on-deck iframe, with the preview support bundle loaded and ready. I think the current logic for managing the preview frames should naturally produce this behavior, but itʼs worth confirming.

Worth noting that this would considerably simplify the bundling and loading of previewSupport, which is currently quite hacky.

Original bug report

Submitter: Z
Email: zwilkinson@westinghousehs.org
I can’t use the browser’s Camera API from inside the preview window, because the preview is a data: URI that is not considered secure.

まず、previewSupport bundle、JS Channel の初期化ハンドシェイク、およびプリロードされたプレビューフレームを管理するロジックを特定します。親がプロジェクトの HTML を送信する方法と、後続のコンパイル済みイテレーションが読み込まれる方法を追跡し、その後、静的なセキュアページが初期ドキュメントを受信して DOM を置き換え、ライブ更新を維持できることを確認します。