Politica sulla sicurezza dei contenuti "dati" non funzionanti per le immagini base64 in Chrome 28

247

In questo semplice esempio, sto cercando di impostare un'intestazione CSP con l'intestazione meta http-equiv. Ho incluso un'immagine base64 e sto cercando di far caricare l'immagine a Chrome.

Pensavo che la dataparola chiave dovesse farlo, ma in qualche modo non funziona.

Ho appena ricevuto il seguente errore in Strumenti per gli sviluppatori:

Rifiutato di caricare i dati dell'immagine: image / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7… nw7yk4Mjr6GLUY + joiBI2GGKKHG

Il codice di esempio (JSFiddle non funziona per questo esempio perché non riesco a impostare la meta header lì):

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

Puoi anche aprire questo esempio qui:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

content-security-policy

— fwebdev
fonte

Risposte:

468

Secondo la grammatica nelle specifiche CSP , è necessario specificare schemi come scheme:, non solo scheme. Pertanto, è necessario modificare la direttiva sorgente di immagine in:

img-src 'self' data:;

— spasimo
fonte

La ragione di questo imbarazzo è che è altrimenti difficile distinguere tra lo schema dei "dati" e un host chiamato "dati".

— Mike West,

Penso che gli URL siano un po 'imbarazzanti da analizzare in generale.

Avevo i miei dati: tra virgolette - "dati:" - che anche non funziona - e anche la tua risposta mi ha avvisato di ciò come un problema

— kris

È utile notare che non si dovrebbe semplicemente aggiungere questo senza considerare le implicazioni di sicurezza. Vedi questa domanda di scambio di stack di sicurezza

— Matthijs Wessels,

Gli scanner di sicurezza trovano i dati: come elemento insicuro

— Sajithd

Prova questo

dati da caricare:

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

ottieni un convertitore utf8 in base64 e converti la stringa "svg" in:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

e il CSP lo è

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

— JamesH
fonte

Non credo sia possibile includere un tipo dopo il protocollo. Sono validi solo "dati:".

— Rameezk,