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

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

Je pense que les URL sont un peu difficiles à analyser en général.

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

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

Les scanners de sécurité trouvent des données: comme élément non sécurisé

— Sajithd

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
source

Je ne pense pas qu'il soit possible d'inclure un type après le protocole. Seule "data:" est valide.

— rameezk