2

この問題を克服することはできません。誰かアドバイスをいただけますか？

  1. Chrome 拡張機能で実行する必要がある ExtJS ライブラリを使用するこのアプリケーションがあります。メッセージング ブリッジ ( ) を正常に作成し、postMessageアプリケーション全体をサンドボックス化して、すべてが通常どおりに動作します。ExtJS が読み込まれ、アプリケーションが実行されています。

  2. 次に、ExtJS ビューポートで HTML スニペットの一部をプレビューする必要があるロジックを作成します。それ自体に を作成し、iframeその中にスニペットを書き込もうとしました。これは私が使用するコードです：Panelafterrender

    html: '<iframe src="about:blank" style="width:100%;height:100%;border:none;"></iframe>';

......

//p is the panel found in afterrender
p.body.down('iframe').dom.contentDocument.write(content);

    次にエラー：

    安全でない JavaScript が、URL chrome-extension://fcnpmlgapilgclcelfanblpbglmkghbc/core/themes/default/app.html のフレームから URL about:blank のフレームにアクセスしようとしています。ドメイン、プロトコル、およびポートが一致する必要があります。

  3. サンドボックス内でこの動的 iframeを試してみましpostMessageたが、何も起こりません。マニフェストで属性を設定してsandboxも機能しません。これが唯一の方法であり、機能します。以下の私の答えを見てください。

質問：

  1. この種のユースケースをサポートするには、マニフェストをどのように設定する必要がありますか?
  2. または、を使用せずに HTML スニペットをプレビューするより良い方法はありますiframeか? iframe親CSSを台無しにすることなくスニペットをサンドボックス化したので、Afaikのプレビューは最高です。

ノート

このコードはマニフェスト v1 で問題なく動作していましたが、マニフェスト v2 に移行する予定でした。Content Security Policy (CSP) がここまで厳しくなっているとは知りませんでした。

問題を説明する画面 ;)

画面

4

1 に答える 1

6

申し訳ありませんが、これは厄介です。どうやらpostMessageそれが唯一の方法であり、iframeがまだロードされていないため、以前はそれを機能させることができませんでした。また、iframe内のdomドキュメントにアクセスすることは、CSPのcontentWindow下では大したことではありませんが、アクセスして実行することは可能postMessageです。

これは私がこの問題を解決するためにしたことです。誰かがこれから恩恵を受けることを願っています：

  1. preview.html拡張ルートにを作成します

  2. 下に、属性manifest.jsonの一部として追加しますsandbox

  3. の中にpreview.html、次のコードを追加します。私のスニペットは完全なhtmlなので、document.write代わりに使用したことに注意してください。

    <!DOCTYPE html>
<html>
    <head>
        <script>
        window.addEventListener("message", function(e) {
            if (e.data.content) {
                document.write(e.data.content);
            }
        });
        </script>
    </head>
    <body></body>
</html>

  4. 通常どおりコードにiframeを作成し、それを自分のにポイントしてpreview.html、親のdivまたはにアタッチしますExt.Panel。

  5. 次のコードを使用してpostMessage、要素が描画/作成/追加された後。

    var content = '<!DOCTYPE html><html><body>Hello World!</body></html>';
var iframe = p.body.down('iframe').dom; //or the iframe node

iframe.onload = function() {
    iframe.contentWindow.postMessage({content: content}, '*');
};

楽しみ ;）

編集

ChromiumフォーラムでMikeが指摘したように、この問題はによっても解決できますsrcdoc。iframeのsrcdocを設定するだけで、問題は解決します。

のステータスがわからないsrcdoc

于 2012-09-25T05:09:46.253 に答える