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 data
Schlü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
quelle
Versuche dies
zu ladende Daten:
Holen Sie sich einen Konverter von utf8 in base64 und konvertieren Sie die Zeichenfolge "svg" in:
und der CSP ist
quelle