La política de seguridad de contenido "datos" no funciona para imágenes base64 en Chrome 28

247

En este ejemplo simple, estoy tratando de establecer un encabezado CSP con el encabezado meta http-equiv. Incluí una imagen base64 y estoy tratando de hacer que Chrome cargue la imagen.

Pensé que la datapalabra clave debería hacer eso, pero de alguna manera no funciona.

Acabo de recibir el siguiente error en Herramientas para desarrolladores:

.Fac.

El código de ejemplo (JSFiddle no funciona para este ejemplo porque no puedo establecer meta encabezado allí):

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

También puede abrir este ejemplo aquí:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

content-security-policy fwebdev
fuente

Respuestas:

468

De acuerdo con la gramática en la especificación CSP , debe especificar esquemas como scheme:, no solo scheme. Por lo tanto, debe cambiar la directiva de fuente de imagen a:

img-src 'self' data:;
Angustia
fuente
41
La razón de esta incomodidad es que, de lo contrario, es difícil distinguir entre el esquema de 'datos' y un host llamado 'datos'.
Mike West el
1
Creo que las URL son un poco incómodas de analizar en general.
55
Tenía mis datos: entre comillas - 'datos:' - eso también no funciona - y su respuesta también me alertó sobre eso como un problema
kris
18
Es útil tener en cuenta que no solo debe agregar esto sin tener en cuenta las implicaciones de seguridad. Vea esta pregunta de intercambio de pila de seguridad
Matthijs Wessels el
1
Los escáneres de seguridad encuentran datos: como elemento inseguro
Sajithd
0

Prueba esto

datos para cargar: 

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

obtenga un convertidor utf8 a base64 y convierta la cadena "svg" a:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

y el CSP es 

img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
JamesH
fuente
No creo que sea posible incluir un tipo después del protocolo. Solo "datos:" es válido.
rameezk