内容安全策略“数据”不适用于 Chrome 28 中的 base64 图像
Posted
技术标签:
【中文标题】内容安全策略“数据”不适用于 Chrome 28 中的 base64 图像【英文标题】：Content Security Policy "data" not working for base64 Images in Chrome 28 【发布时间】：2013-08-29 04:04:15 【问题描述】：在这个简单的示例中，我尝试使用元 http-equiv 标头设置 CSP 标头。我包含了一个 base64 图像，我正在尝试让 Chrome 加载图像。
我认为 data 关键字应该这样做，
但不知何故它不起作用。
我只是在开发者工具中收到以下错误：
拒绝加载图像 'data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7...nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' 指令，因为它违反了以下“自身内容安全策略数据”指令：“' >
示例代码（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
【问题讨论】：
如果您仍在寻找解决方案，请看这里：***.com/a/62213224/7827321 【参考方案1】：根据the grammar in the CSP spec，需要指定scheme为scheme:，而不仅仅是scheme。因此，您需要将图像源指令更改为：
img-src 'self' data:;
【讨论】：
这种尴尬的原因是很难区分“数据”方案和名为“数据”的主机。 我认为 URL 解析起来有点笨拙。 我有我的数据：引号 - '数据：' - 这也无法正常工作 - 你的回答也提醒我这是一个问题 请注意，您不应该在不考虑安全隐患的情况下添加它。见this security stack exchange question 我真的很想看到一个例子来展示使用img-src data: 具有安全隐患。【参考方案2】：
试试这个
要加载的数据：
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>
获取一个 utf8 到 base64 的转换器并将“svg”字符串转换为：
PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
CSP 是
img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
【讨论】：
我认为不可能在协议之后包含类型。只有“数据：”是有效的。以上是关于内容安全策略“数据”不适用于 Chrome 28 中的 base64 图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Chrome 扩展 Manifest.json 中设置内容安全策略以使 Firebase 正常工作