“Dados” da Política de Segurança de Conteúdo não funcionam para imagens base64 no Chrome 28

247

Neste exemplo simples, estou tentando definir um cabeçalho CSP com o cabeçalho meta http-equiv. Incluí uma imagem base64 e estou tentando fazer o Chrome carregar a imagem.

Eu pensei que a datapalavra-chave deveria fazer isso, mas de alguma forma não está funcionando.

Acabei de receber o seguinte erro nas Ferramentas do desenvolvedor:

Recusou-se a carregar a imagem 'data: image / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7…

O código de exemplo (JSFiddle não está funcionando para este exemplo porque não consigo definir o cabeçalho meta):

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

Você também pode abrir este exemplo aqui:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

content-security-policy fwebdev
fonte

Respostas:

468

De acordo com a gramática na especificação do CSP , você precisa especificar esquemas como scheme:, não apenas scheme. Portanto, você precisa alterar a diretiva de origem da imagem para:

img-src 'self' data:;

Pang
fonte

A razão desse constrangimento é que, de outra forma, é difícil distinguir entre o esquema de 'dados' e um host chamado 'dados'.

Mike Oeste

Eu acho que os URLs são um pouco difíceis de analisar em geral.

Eu tinha meus dados: entre aspas - 'dados:' - que também não trabalho - e sua resposta também me alertou para isso como um problema

kris

É útil observar que você não deve apenas adicionar isso sem considerar as implicações de segurança. Veja esta pergunta sobre troca de pilhas de segurança

Matthijs Wessels

Os scanners de segurança encontram dados: como um elemento inseguro

Sajithd 6/3

Tente isto

dados para carregar:

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

obtenha um conversor utf8 em base64 e converta a string "svg" para:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

e o CSP é

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

JamesH
fonte

Eu não acho que é possível incluir um tipo após o protocolo. Somente "dados:" são válidos.

rameezk 12/02