Inhaltssicherheitsrichtlinie "Daten" funktionieren nicht für base64-Bilder in Chrome 28

247

In diesem einfachen Beispiel versuche ich, einen CSP-Header mit dem Meta-HTTP-Äquiv-Header festzulegen. Ich habe ein base64-Image eingefügt und versuche, Chrome dazu zu bringen, das Image zu laden.

Ich dachte, das dataSchlüsselwort sollte das tun, aber irgendwie funktioniert es nicht.

In den Entwicklertools wird nur der folgende Fehler angezeigt:

Das Laden der Bilddaten wurde abgelehnt: image / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7… nw7yk4Mjr6GLUY

Der Beispielcode (JSFiddle funktioniert in diesem Beispiel nicht, da ich dort keinen Meta-Header festlegen kann):

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

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

content-security-policy

— fwebdev
quelle

Antworten:

467

Entsprechend der Grammatik in der CSP-Spezifikation müssen Sie Schemata scheme:nicht nur als angeben scheme. Sie müssen also die Bildquellenanweisung ändern in:

img-src 'self' data:;

— Stich
quelle

Der Grund für diese Unbeholfenheit ist, dass es ansonsten schwierig ist, zwischen dem 'Daten'-Schema und einem Host namens' Daten 'zu unterscheiden.

— Mike West

Ich denke, URLs sind im Allgemeinen etwas umständlich zu analysieren.

Ich hatte meine Daten: in Anführungszeichen - 'Daten:' - das funktioniert auch nicht - und Ihre Antwort hat mich auch darauf aufmerksam gemacht

— kris

Es ist nützlich zu beachten, dass Sie dies nicht einfach hinzufügen sollten, ohne die Auswirkungen auf die Sicherheit zu berücksichtigen. Siehe diese Frage zum Austausch von Sicherheitsstapeln

— Matthijs Wessels

Sicherheitsscanner finden Daten: als unsicheres Element

— Sajithd

Versuche dies

zu ladende Daten:

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

Holen Sie sich einen Konverter von utf8 in base64 und konvertieren Sie die Zeichenfolge "svg" in:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

und der CSP ist

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

— JamesH
quelle

Ich denke nicht, dass es möglich ist, einen Typ nach dem Protokoll einzufügen. Nur "Daten:" ist gültig.

— Rameezk