Les «données» de la stratégie de sécurité du contenu ne fonctionnent pas pour les images base64 dans Chrome 28

247

Dans cet exemple simple, j'essaie de définir un en-tête CSP avec l'en-tête meta http-equiv. J'ai inclus une image base64 et j'essaye de faire charger Chrome à l'image.

Je pensais que le datamot - clé devrait faire ça, mais d'une manière ou d'une autre ça ne marche pas.

Je reçois simplement l'erreur suivante dans les outils de développement:

Refus de charger l'image 'data: image / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7… nw7yk4Mjr6GLUY + joiBI2QAACABwJDCHgoKOHEAAYVBAGK

L'exemple de code (JSFiddle ne fonctionne pas pour cet exemple car je ne peux pas y définir de méta-en-tête):

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

Vous pouvez également ouvrir cet exemple ici:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

content-security-policy fwebdev
la source

Réponses:

468

Selon la grammaire de la spécification CSP , vous devez spécifier des schémas en tant que scheme:, pas seulement scheme. Vous devez donc modifier la directive source d'image en:

img-src 'self' data:;
Serrement
la source
41
La raison de cette maladresse est qu'il est autrement difficile de faire la distinction entre le schéma de «données» et un hôte nommé «données».
Mike West
1
Je pense que les URL sont un peu difficiles à analyser en général.
5
J'avais mes données: entre guillemets - 'data:' - qui ne fonctionne pas non plus - et votre réponse m'a également alerté de cela comme un problème
kris
18
Il est utile de noter que vous ne devez pas simplement ajouter cela sans tenir compte des implications en matière de sécurité. Voir cette question d'échange de pile de sécurité
Matthijs Wessels
1
Les scanners de sécurité trouvent des données: comme élément non sécurisé
Sajithd
0

Essaye ça

données à charger: 

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

obtenir un convertisseur utf8 en base64 et convertir la chaîne "svg" en:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

et le CSP est 

img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
JamesH
la source
Je ne pense pas qu'il soit possible d'inclure un type après le protocole. Seule "data:" est valide.
rameezk