Content-Sicherheitsrichtlinie "data" funktioniert nicht für base64-Bilder in Chrome 28

Question

In diesem einfachen Beispiel versuche ich, einen CSP-Header mit dem Meta-Http-Equiv-Header zu setzen. Ich habe ein Base64-Bild eingefügt und versuche, Chrome das Bild laden zu lassen.

Ich dachte, das data-Schlüsselwort sollte das tun, aber irgendwie funktioniert es nicht.

Im Entwicklertools erhalte ich folgenden Fehler:

Die Anfrage zum Laden des Bildes 'data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7…nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' wurde verweigert, da sie gegen die folgende Content-Security-Richtlinie verstößt: "img-src 'self' data".

Der Beispielscode (JSFiddle funktioniert in diesem Fall nicht, da ich dort den Meta-Header nicht setzen kann):

        #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///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
            border: 1px solid red;
        }

CSP

Sie können dieses Beispiel auch hier öffnen:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

Answer 1

Gemäß der Grammatik im CSP-Spezifikation, müssen Sie Schemas als Schema: angeben, nicht nur als Schema. Daher müssen Sie die Bildquelle-Anweisung ändern zu:

img-src 'self' data:;

Answer 2

Für mich war es notwendig, auch "data:" zum Element "default-src 'self'" hinzuzufügen:

default-src 'self'; ... -> default-src 'self' data:; ...

Answer 3

Versuchen Sie dies

Daten zum Laden:

Holen Sie sich einen UTF-8 zu Base64 Konverter und konvertieren Sie den "svg" String zu:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

und die CSP lautet

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