web-dev-qa-db-ja.com

CSPに違反しているため、インラインイベントハンドラーの実行を拒否しました。 (サンドボックス)

Googleを開発していますchrome packagedアプリ、Sandboxをmanifest.json

 {
  "manifest_version": 2,
  "name": "WM32216",
  "version": "2.1",
  "minimum_chrome_version": "23",
  "permissions":["webview", "https://ajax.googleapis.com/*"],
  "sandbox":{
      "pages":["index.html"]
  },
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

アンカータグのonclickイベントが機能し、アプリのフローが完了することを除いて、CSSスタイルシートのアイコンは読み込まれません。

コンソールからerrorを取得しました

File not found

しかし、それらはfontsなので、私には問題ありません。

大きな問題は、iframe内のビデオが再生されず、フォントの前に追加のエラーが発生したことです。

VIDEOJS:エラー:(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)サーバーまたはネットワークに障害が発生したか、フォーマットがサポートされていないため、メディアをロードできませんでした。

ローカルリソースをロードできません:blob:null/b818b32c-b762-4bd9 -...

Manifest.jsonファイル内のサンドボックスを削除すると、コンソールでフォントに関するエラーが発生せず、すべてが正常に動作します。

しかし、私がヒット/アンカータグをクリック jsに新しい関数をロードするクリックイベントがあるとき、私は次を取得していますコンソールエラー

次のコンテンツセキュリティポリシーディレクティブ「default-src 'self' blob:filesystem:chrome-extension-resource:」に違反しているため、インラインイベントハンドラーの実行を拒否しました。インライン実行を有効にするには、「unsafe-inline」キーワード、ハッシュ(「sha256 -...」)、またはノンス(「nonce -...」)のいずれかが必要です。また、「script-src」は明示的に設定されていないため、「default-src」がフォールバックとして使用されることに注意してください。

非常に長い間申し訳ありませんが、

私はすでに3日間ここで立ち往生しているので、これで助けが必要です。

14
JC Borlagdan

サンドボックスに関連しない質問の回答:

コードには次のようなものがあります。

<button onclick="myFunction()">Click me</button>

一言で言えば、これはchromeアプリと拡張機能では許可されていません。

これを次のように変更すると動作します:

  • html:

    <button id="myButton">Click me</button>
    <script src="script.js"></script>
    
  • script.js:

    document.getElementById("myButton").addEventListener("click", myFunction);
    
    function myFunction(){
      console.log('asd');
    }
    

長い話:

chromeアプリでは、コンテンツセキュリティポリシーはインラインjavascriptを許可しません。したがって、javascriptを.jsファイルに入れてHTMLに含める必要があります。

さらに読む: https://developer.chrome.com/extensions/contentSecurityPolicy

43
kailniris