web-dev-qa-db-ja.com

Chrome Extension "次のコンテンツセキュリティポリシーディレクティブに違反するため、スクリプトのロードを拒否しました"

Chrome拡張機能を作成しようとしていますが、JSが機能しません。コンソールにこのエラーが表示されます。

スクリプト ' https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js 'のロードを拒否しました。次のコンテンツセキュリティポリシーディレクティブに違反しているためです： " script-src 'self' blob：filesystem：chrome-extension-resource： "。

JQueryの実行をブロックしているのはなぜですか？

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension
22
Mia

Chome website で説明したように、スクリプトがリモートスクリプトをロードできないようにするコンテンツセキュリティポリシーがあります。

HTTPS経由でexample.comからスクリプトリソースをロードできるようにする緩和されたポリシー定義は次のようになります。

"content_security_policy"： "script-src 'self' https://example.com ; object-src 'self'"

あなたの場合、manifest.jsonには以下を含める必要があります。

 {
  "name": "My Extension",
  "manifest_version": 2,
  "background":{
     "scripts": [...]
  },
  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
 }
13
Charles Gueunet

マニフェストJSONファイルで許可しましたか。このようなもの：

manifest.json

 {
   "name": "My Extension",
   "content_scripts": [{
     "js": ["jquery.min.js", "YourJavaScriptFile.js"],
     "matches": ["http://*/*", "https://*/*"]
   }]
 }

省略した必須フィールドがありますが、基本的な考え方を示しています。

11
epascarello

コンテンツセキュリティポリシーは、アプリケーションのセキュリティのもう1つのレイヤーです。スタイル、スクリプト、またはデータの読み込み元となるすべての原点を定義できます。スタイル、スクリプト、フォント、または接続のそれぞれについて、アプリケーションにロードするドメインを指定する必要があります。別のドメインのCDN jQueryを使用している場合は、コンテンツセキュリティポリシーでこのドメインを指定する必要があります。

このセキュリティレイヤーを追加したくない場合、任意のドメインからスタイルまたはスクリプトをロードする場合は、index.htmlに次のメタタグを追加し、インポートの前に配置するようにしてください。

<meta http-equiv="Content-Security-Policy" content="default-src *;">

ここで*は、任意のドメインにアクセスできるワイルドカード文字です。この追加のセキュリティレイヤーが必要な場合は、アプリケーションにインポートするすべてのドメインを指定する方法について非常に明確な documentation に移動することをお勧めします

2
Shiva Sairam M

まあ、jsにCDNを使用することはできません。「 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js 」のコンテンツをコピーする必要があります= "jsディレクトリ内に新しいファイルを作成し、jquery.min.jsを呼び出してすべてを貼り付けます。次に、HTMLファイルヘッダーでこのURLを含む行を削除し、代わりにこのファイルを使用します

<script src="js/jquery.min.js"></script>

ただし、これが上記のURLのすべてのデータを含むファイルの書き込みパスであることを確認してください

乾杯、

2
Kareem Essawy

簡単に長い話をします。 Google Chrome has CSP（Content Security Policy）は、chrome拡張機能は外部スクリプトを許可しないことを意味します。 vue cdnを使用して、次の手順を実行するだけで準備完了です。

  • Manifest.jsonに次のコードを追加し、必要に応じてファイル名を変更します。ここに'unsafe-eval'が探しています。これを追加してください。
{
    "manifest_version": 2,
    "name"            : "Hello Extension",
    "version"         : "1.0",
    "permissions": [
        "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
    ],
    "background": {
        "scripts": ["popup.js"],
        "persistent": false
      },
    "description"     : "Testing the hello world extension",
    "icons": {
        "16"    : "icons16.png",
        "48"    : "icons16.png",
        "128"   : "icons16.png"
    },
    "browser_action": {
        "default_icon"   : "icons16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"
}
  • ここのexternal jsにpopup.jsを追加すると、Vueコードが追加され、すべてがうまく機能します。
var app = new Vue({
    el: "#app",
    data: {
        name: ""
    }
});
0
Shahrukh Anwar

Chrome拡張機能のドキュメント によると、外部リソースのコピーをパッケージフォルダーにダウンロードし、スクリプトをローカルにロードする必要があります。

外部スクリプトのロードは許可されていません。

0
Jared Cordova

HTMLファイルには<script> some js code within it </script>。スクリプトタグを削除すると、エラーはなくなりました。

0
Deke