Chrom拡張機能 外部リソースを読み込めない

Question

jquery.xdomainajax.jsを入れ、選択範囲した英単語の意味を辞書サイトから取得する
Chromeの拡張機能を作っています。
ですが実際に使ってみるとコンソールに以下のエラーが出ており

Refused to load the script 'http://query.yahooapis.com/v1/public/yql?callback=jQuery32103336417300481622_1518054734369&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=select%20*%20from%20htmlstring%20where%20url%3D%22https%3A%2F%2Fejje.weblio.jp%2Fcontent%2F%22%20and%20xpath%3D%22*%22&format=xml&_=1518054734372'
because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

Xdomainajaxで使われているyqlのapiが取得できていないようでしたのでmanifest.jsonを以下に書き換えたのですが変わらず同じエラー内容が出ます。

{
	"manifest_version": 2,
	"author": "test",
	"homepage_url": "http://example.com",
	"name": "translater",
	"description": "test",
	"version": "1.0",
	"icons": {
		"32": "icon/zisyo_icon.png",
		"48": "icon/zisyo_icon.png",
		"128": "icon/zisyo_icon.png"
	},
	"browser_action": {
		"default_icon": "icon/zisyo_icon.png",
    "default_popup": "popup.html",
		"default_title": ""
	},
	"content_security_policy":"script-src 'self' http://localhost http://query.yahooapis.com ; object-src 'self'",
}

機能の流れはpopup.htmlから単語取得する処理を書いたjsを呼び出しています。

アドバイスお願いいたします。

Answer 1

CSPにhttp（httpsではない）が出てきたら要注意です。

... The host part of the origin must explicitly be specified for the https and chrome-extension schemes. ...

Content Security Policy (CSP) - Google Chrome

拡張機能でAjaxを使うときはhttpsにしましょう。

なお、引用は省略しますが、http://localhost（またはhttp://127.0.0.1）については、例外的に許容されているとのことです。

また、当該ライブラリはYQL側の仕様変更により、改造しないと使えなくなっているはずなので、この記事などを参考に改造を施されているのではないかと推測しますが、こちらも例外なくhttpsでYQLにアクセスさせるようにする必要があります。

1つ気になるのは、この回答を書く前に手元でも試しているのですが、提示されたCSPの書き方だと、インストールの時点で警告が出ていないでしょうか？

この拡張機能をインストールしようとしたときに、次の警告がありました。
Ignored insecure CSP value "http://query.yahooapis.com" in directive 'script-src'.

CSPをhttpで書くと、手元のChrome 64ではインストール時にこのようなメッセージが表示されました。httpsに修正すると警告は出なくなります。

（訂正：表示されるメッセージはエラーではなく警告でした。警告が出ても、インストールは行われました。）

Comments

[tomagurosu]

回答ありがとうございます。
YQL、CSPの記述をhttpsに変えてみたのですが変わらず

Refused to load the script 'https://query.yahooapis.com/v1/public/yql?callback=jQuery32102536949303061271_1518065517669&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=select%20*%20from%20htmlstring%20where%20url%3D%22https%3A%2F%2Fejje.weblio.jp%2Fcontent%2F%22%20and%20xpath%3D%22*%22&format=xml&_=1518065517670'
because it violates the following Content Security Policy directive: "script-src ".

とエラーが出てしまいます。
インストール時の警告なのですが書き換えた後も変わらず
この拡張機能をインストールしようとしたときに、次の警告がありました。
Ignored insecure CSP value "'self'https://query.yahooapis.com" in directive 'script-src'.
と表示されてしまいます。
httpsでYQLにアクセスとは単にxdomainajax.jsのYQLのURLをhttpからhttpsに変えればいいだけでしょうか？
よろしくお願いいたします

[sii_side]

> Ignored insecure CSP value "'self'https://query.yahooapis.com" in directive 'script-src'.

"'self'https://query.yahooapis.com"で1つの値と解釈されているようですが、スペースが必要なのではないでしょうか。

[tomagurosu]

すみません、空白に気づいていませんでした。
修正したところアクセスを確認できました！
ありがとうございます！！