在這個簡單的例子中,我試圖用meta http-equiv頭設置一個CSP頭。我包括一個base64圖像,我試圖讓Chrome加載圖像。內容安全策略「數據」不適用於base64 Chrome中的圖像28
我以爲data
關鍵字應該這樣做,但是不知何故它不起作用。
,我會在開發者工具以下錯誤:
拒絕加載圖像 '數據:圖像/ PNG; BASE64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7 ... nw7yk4Mjr6GLUY + joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7',因爲它違反了以下內容安全策略指令:「img-src」自我「數據」。
的示例代碼(的jsfiddle不工作在這個例子中,因爲我不能設置有元頭):
<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>
你也可以在這裏開這個例子:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html
這樣做的原因尷尬的是,這是其他方法難以將「數據」方案進行區分,並且主機名爲「數據」。 –
我認爲URL在解析一般時有點尷尬。 – 2013-11-06 11:43:21
我有我的數據:在引號 - '數據:' - 也無法正常工作 - 並且您的答案也提醒我這是一個問題 – kris