web-dev-qa-db-ja.com

画像の読み込みを延期/ CSP:埋め込み画像を許可

私のウェブサイトは、img src値をJavaScriptによって(img data-src値から)設定することにより、いくつかのimgロードを遅らせています。 URLがimg srcに設定されていない限り有効なHTMLを保持するために、srcを次のようにインライン埋め込みimgに設定しています。

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="URL-TO-REAL-IMAGE.png">

これは正常に機能しますが、ブラウザコンソール(Firefox、Chrome)にエラーが表示されます。

イメージ 'data:image/png; base64、R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs ='のロードを拒否しました。これは、次のコンテンツセキュリティポリシーディレクティブに違反しているためです: "default-src 'self' * 'unsafe-inline'"。 「img-src」は明示的に設定されていないため、「default-src」がフォールバックとして使用されることに注意してください。

'unsafe-inline'は、これを正確に許可するべきではありませんか?よくわかりません。

1
Marcus

https://content-security-policy.com/ によると、CSPを使用する必要があります

img-src 'self' data:

データスキームを介してリソースを読み込むことができます(Base64でエンコードされた画像など)。

unsafe-inlineは、画像ソースではなく、javascriptソースにのみ関連しているようです。

0