コンテンツセキュリティポリシーの「データ」がChrome 28のbase64画像に対して機能しない


247

この単純な例では、メタhttp-equivヘッダーを使用してCSPヘッダーを設定しようとしています。base64イメージを含め、Chromeにそのイメージをロードさせようとしています。

dataキーワードはそれで十分だと思いましたが、どういうわけか機能していません。

開発者ツールで次のエラーが表示されるだけです。

画像の読み込みを拒否しました 'data:image / png; base64、R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7…nw7yk4Mjr6GLUY + joiBI2QAACAB.It Security'ポリシー 'セキュリティ'ポリシー 'ポリシー'の次のとおりです。

サンプルコード(この例では、そこにメタヘッダーを設定できないため、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

回答:


468

CSP仕様の文法によればスキームをscheme:だけでなくとして指定する必要がありますscheme。したがって、画像ソースディレクティブを次のように変更する必要があります。

img-src 'self' data:;

41
このぎこちなさの理由は、「データ」方式と「データ」という名前のホストを区別するのが難しいためです。
Mike West

1
URLは一般的に解析するのが少し厄介だと思います。

5
「データ:」 - -引用符で囲まれた:私は私のデータを持っていたにも仕事に失敗したことを-と、あなたの答えはまた、問題とそれに私を警告
KRIS

18
セキュリティへの影響を考慮せずにこれを追加するだけではいけないことに注意してください。このセキュリティスタック交換質問を
Matthijs Wessels 2017

1
セキュリティスキャナーがデータを検出:安全でない要素として
Sajithd

0

これを試して

ロードするデータ:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>

utf8からbase64へのコンバーターを取得し、「svg」文字列を次のように変換します。

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

そしてCSPは

img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

プロトコルの後に型を含めることは可能ではないと思います。「data:」のみが有効です。
rameezk
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.