内容安全政策“数据”在Chrome 28中不适用于base64图像 [英] Content Security Policy "data" not working for base64 Images in Chrome 28
问题描述
在这个简单的示例中，我尝试使用meta http-equiv标头设置CSP标头。我添加了一个base64图像，并且试图使Chrome加载该图像。
In this simple example, I'm trying to set a CSP header with the meta http-equiv header. I included a base64 image and I'm trying to make Chrome load the image.
我认为 data 关键字应该这样做，
，但是由于某种原因它不起作用。
I thought the data keyword should do that,
but somehow it's not working.
我在开发人员工具中仅收到以下错误：
I just get the following error in Developer Tools:
拒绝加载图像'data：image / png; base64，R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7 ... nw7yk4Mjr6GLUY + joiBI2QAYCAgKGxAKVKA7KAKAVKAKA7KAKVCA自我数据。
Refused to load the image 'data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7…nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' because it violates the following Content Security Policy directive: "img-src 'self' data".
示例代码（JSFiddle在本示例中不起作用，因为我无法在此处设置元标头）：
The example code (JSFiddle is not working for this example because I cannot set meta header there):
<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
You can also open this example here:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html
推荐答案
根据 CSP规范中的语法，您需要将方案指定为方案：，而不仅仅是方案。因此，您需要将图片来源伪指令更改为：
According to the grammar in the CSP spec, you need to specify schemes as scheme:, not just scheme. So, you need to change the image source directive to:
img-src 'self' data:;
这篇关于内容安全政策“数据”在Chrome 28中不适用于base64图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
