内容安全政策“数据”不适用于Chrome 28中的base64图像

246

在这个简单的示例中，我尝试使用meta http-equiv标头设置CSP标头。我添加了一个base64图像，并且试图使Chrome加载该图像。

我以为data关键字应该这样做，但是以某种方式它不起作用。

我在开发人员工具中收到以下错误：

拒绝加载图片'data：image / png; base64，R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7 ... nw7yk4Mjr6GLUY + joiBI2QAACABwJDCHgoNGHEoAYVBAgY8GGA'A'ACCA'A'AVACA

示例代码（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

content-security-policy

— fwebdev
source

Answers:

467

根据CSP规范中的语法，您需要将方案指定为scheme:，而不仅仅是scheme。因此，您需要将image source指令更改为：

img-src 'self' data:;

— ang
source

这种尴尬的原因是，否则很难区分“数据”方案和名为“数据”的主机。

— Mike West

我认为网址通常很难解析。

我有数据：用引号引起来-“数据：”-也无法正常工作-您的回答也提醒我这是一个问题

— 克里斯（Kris）

值得注意的是，您不应该不考虑安全性就添加它。看到这个安全堆栈交换问题

— Matthijs Wessels'Apr

安全扫描程序查找数据：作为不安全元素

— Sajithd

试试这个

要加载的数据：

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

— 詹姆斯·H
source

我认为在协议之后不可以包含类型。仅“数据：”有效。

— rameezk