"Data" Kebijakan Keamanan Konten tidak berfungsi untuk Gambar base64 di Chrome 28

247

Dalam contoh sederhana ini, saya mencoba mengatur header CSP dengan header meta http-equiv. Saya menyertakan gambar base64 dan saya mencoba membuat Chrome memuat gambar.

Saya pikir datakata kunci harus melakukan itu, tetapi entah bagaimana itu tidak berfungsi.

Saya baru saja mendapatkan kesalahan berikut di Alat Pengembang:

Menolak untuk memuat data gambar ': gambar / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7… nw7yk4Mjr6GLUY + joiBI2QGAgUdAkAdAkAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdAdDo.

Kode contoh (JSFiddle tidak berfungsi untuk contoh ini karena saya tidak dapat mengatur meta header di sana):

<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>

Anda juga dapat membuka contoh ini di sini:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

content-security-policy

— fwebdev
sumber

Jawaban:

468

Menurut tata bahasa dalam spesifikasi CSP , Anda perlu menentukan skema sebagai scheme:, bukan hanya scheme. Jadi, Anda perlu mengubah arahan sumber gambar ke:

img-src 'self' data:;

— Pang
sumber

Alasan kecanggungan ini adalah karena sulit untuk membedakan antara skema 'data', dan host yang bernama 'data'.

— Mike West

Saya pikir URL agak canggung untuk diurai secara umum.

Saya memiliki data saya: dalam tanda kutip - 'data:' - yang juga gagal berfungsi - dan jawaban Anda juga mengingatkan saya akan hal itu sebagai masalah

— kris

Penting untuk dicatat bahwa Anda tidak seharusnya menambahkan ini tanpa mempertimbangkan implikasi keamanannya. Lihat pertanyaan pertukaran tumpukan keamanan ini

— Matthijs Wessels

Pemindai keamanan menemukan data: sebagai elemen tidak aman

— Sajithd

Coba ini

data yang akan dimuat:

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

dapatkan konverter utf8 ke base64 dan konversikan string "svg" ke:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

dan CSP adalah

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

— JamesH
sumber

Saya tidak berpikir mungkin untuk memasukkan tipe setelah protokol. Hanya "data:" yang valid.

— rameezk