使用内联样式有哪些风险？

Question

一项带有default-src或style-src指令的 内容安全策略（Content Security Policy） 将防止内联样式应用于<style>元素或样式属性。要允许使用内联样式，必须将unsafe-inline值应用于CSP获取指令。这似乎表明，内联样式是不安全的。

虽然内联JavaScript是XSS攻击的明显攻击向量（使用script-src 'unsafe-inline'时CSP几乎无效），但Google Web基础知识认为内联样式 是相对等效的威胁, 并提供了一个例子，展示了从2009年的博客文章中巧妙的数据外泄方法。

另一方面，另一篇Web Fundamentals article建议内联样式可以帮助优化关键呈现路径，因为在浏览器获取外部资源时，第一次渲染不会被阻塞。看起来安全性和性能之间存在非常实际的权衡：

总的来说，内联样式有多大的风险？

- myconode

---

不是一个答案，但如果你想看一些使用内联样式可以注入的例子，我建议你查看HtmlSanitizer的测试套件。 - Tieson T.

Answer 1

从“是否可能有漏洞”的角度来看，内联样式和内联JavaScript一样危险。然而，利用这类漏洞的情况要少得多。

CSS可以被恶意使用的方式有几种，其中最常见的方法是注入图像。至少有两种可能发生这种情况：

div {
  background-image: url("evil.png");
}

img {
  content:url("evil.png").
}

允许用户“强制”渲染图像是极其危险的，因为您可以使用PHP来欺骗图像的内容--您可以从查看PHP图像的人那里挖掘各种信息，例如他们的cookie、浏览器甚至操作系统。更糟糕的是，图像将正确地呈现，所以查看图像的人甚至不会注意到任何可疑的东西。

考虑其他情况，用户能够上传图像，例如在论坛上设置个人资料图片（最终将成为<img>）。关键在于用户如何保存图像，以便另一个用户可以呈现它。对于个人资料图片上传，服务器验证通常会阻止用户上传非图像文件或恶意图像。几乎不可能验证作为background-image或content URL内联注入的图像。

除此之外，我们甚至可以进一步告诉URL本身运行JavaScript：

url('javascript: eval(evil)');

作为你可以想象的，这使得攻击者几乎可以做任何他们想做的事情。

还有一些更罕见的XSS方法，甚至允许使用behavior标签和HTC直接执行JavaScript。

body {
  behavior: url(evilscript.htc);
}

值得注意的是，同源策略的使用本身是可以被利用的，因此并不安全。因此，虽然内联样式稍微提高了速度，但正如您所说，安全和速度之间存在明显的权衡。尽可能避免使用内联样式；希望这可以帮到您！

- Obsidian Age

---

如果img-src被正确设置，url('javascript: eval(evil)');会被阻止。 - Constantin Galbenu

如果正确设置了 img-src，background-image: url("evil.png"); 也会被阻止。 - Constantin Galbenu

如果通过正确配置img-src可以阻止inline-style的漏洞，那么是否可以说inline-style现在完全安全了？ - Ram Babu

如果“img-src”被正确设置，使用内联样式会更安全吗？我也想了解更多相关信息。 - lastmjs

如果您正在转义用户发布的任何HTML，则我不认为这是一个问题。 - ijt