Question

所以今天我看到了一段代码片段并且感到震惊：

<p style='background-image: url("javascript:alert(&apos;foo&apos;);");'>Hello</p>

是否可以通过这种方式从CSS中执行javascript？（当我在一个干净的Firefox配置文件上测试它时它没有用，但也许我在这里犯了一些愚蠢的错误，但这个概念有效。）
如果是这样，通过HTTP标头或HTML本身的声明（例如从其他服务器获取CSS文件时）有什么方法可以防止这种情况发生？
如果没有，这是不可能的还是改变了？

Answer 1

当前The spec表示background-image只能使用“有效图片格式”：

在某些情况下，图像无效，例如指向不是有效图像格式的资源的“＆lt; url＆gt;”。无效图像呈现为纯色“透明”图像，没有内在尺寸。 [...]如果UA无法下载，解析或以其他方式成功地将URL中的内容显示为图像，则必须将其视为无效图像。

{{3}}没有提及返回有效图像数据的javascript:网址是否有效 - 尝试构建一个网页是一个有趣的练习！ - 如果确实如此，我会非常惊讶。

用户代理处理无效URI或指定不可用或不适用资源的URI的方式可能会有所不同。

（正如@Kaiido指出的那样，SVG中的脚本也不会在这种情况下运行，所以我希望整个javascript:协议被视为“不适用的资源”。）

Answer 2

是的，in the past此攻击媒介有效（旧版浏览器，如IE6）。我相信大多数现代浏览器应该防止这种攻击。也就是说，总有more complicated attacks可以绕过目前的保护措施。如果您在任何地方添加任何用户生成的内容，最好在将其注入您的网站之前对其进行清理。

Answer 3

IE支持CSS表达式：

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

但它们不是标准的，并且不能跨浏览器移植。尽可能避免使用它们。自IE8以来，它们已被弃用。

Answer 4

可以通过在javascript:前添加前缀来执行需要URI的JavaScript。事实上，这就是bookmarklet的工作原理。但是，我不认为这适用于css url()，但适用于href或window.location。

<a href="javascript:alert('foo');void(0);">say foo</a>

我认为编写那段代码的人对此感到困惑。