“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