[解決済み] Chrome 28でコンテンツセキュリティポリシーの "データ "がbase64画像に対して機能しない件
2022-03-17 19:19:59
質問
この簡単な例では、meta http-equiv ヘッダーで CSP ヘッダーを設定しようとしています。base64 画像を含め、Chrome に画像を読み込ませようとしています。
と思ったのですが
data
というキーワードがあるはずです。
が、なぜかうまくいきません。
デベロッパーツールで以下のエラーが出るだけです。
画像 'data' の読み込みを拒否されました。 image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVf3v7...nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' は以下の Content Security Policy directive に違反しているので、読み込みを拒否されました。img-src 'self' data"。
サンプルコード（この例ではメタヘッダを設定できないため、JSFiddleは動作しません）。
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
default-src 'none';
style-src 'self' 'unsafe-inline';
img-src 'self' data;
" />
<style>
#helloCSP {
width: 50px;
height: 50px;
background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>CSP</h1>
<div id="helloCSP"></div>
</body>
</html>
このサンプルはこちらでも開くことができます。
https://dl.dropboxusercontent.com/u/638360/ps/csp.html
解決方法は？
によると
CSP仕様の文法
として、スキームを指定する必要があります。
scheme:
だけでなく
scheme
. そこで、画像ソースディレクティブを変更する必要があります。
img-src 'self' data:;
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン