web-dev-qa-db-ja.com

Chromeとしてエラーを表示：Content-Security-Policyのためにインラインスクリプトの実行を拒否

私はChrome画像クロップウィジェットの拡張機能を作成しています。私のpopup.html 以下のとおりであります：

    <body>
            <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
            <script type="text/javascript">
                var protocol=window.location.protocol;
                var Host= window.location.Host;
                var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
                <script type="text/javascript" src="'+protocol+'//'+Host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
                <script type="text/javascript">init_widget()<\/script>');
                document.getElementById("widget_script").innerHTML=head;
            </script>
    </body>

変数protocolおよびHost takeprotocolandHost ブラウザのURLから。これをChrome拡張機能として統合しようとすると、機能しません。完全に機能する場合、テキストエリアに次のコードが表示されます。

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

外部のJSファイルにJSコードを配置し、manifest.json私のpopup.html、しかしどれも機能しなかった。

誰かが私が間違っていることを教えてもらえますか、それとも他に何を機能させるべきですか？

前もって感謝します...

jquerygoogle-chromegoogle-chrome-extension
37
V15HM4Y

Chrome拡張CSPドキュメント から：

インラインJavaScriptは実行されません。この制限により、両方のインライン<script>ブロックとインラインイベントハンドラー（例：<button onclick="...">）。

あなたはできませんあなたの拡張機能HTMLに次のようなインラインスクリプトがあります：

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

むしろ、スクリプトを別のファイルに配置する必要があります。

<script src="somescript.js"></script>
73
apsillers

content_security_policyをmanifest.jsonファイルに追加する必要があります。

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

コンソールからハッシュを見つけます。

enter image description here

4
emon