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

Question

A Content Security Policy用default-src或 style-src指令将阻止内联样式应用于 <style>元素或样式属性。要允许使用内联样式，值 unsafe-inline必须应用于 CSP 提取指令。这似乎表明内联样式是不安全的。

虽然内联 Javascript 是 XSS 攻击的明显攻击媒介(CSP 是 pretty much useless 和 script-src 'unsafe-inline' )，但 Google Web Fundamentals 考虑了内联样式 to be a relatively equivalent threat , 提供 one example 2009 年博客文章中的巧妙数据渗漏方法。

另一方面，另一个Web Fundamentals article建议内联样式可以帮助优化关键渲染路径，因为在浏览器获取外部资源时不会阻止首次绘制。似乎在安全性和性能之间存在一个非常真实的权衡:

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

Answer 1

从可能被利用的 Angular 来看，是的，内联样式与内联 JavaScript 一样危险。但是，利用此类漏洞的情况要少得多。

可以通过多种方式恶意使用 CSS，最常见的方法是注入(inject)图像。有(至少)两种可能的方式来实现:

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

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

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

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

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

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

如您所想，这允许攻击者几乎任何他们想做的事。

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

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

同样值得注意的是 same-origin policy 的使用本身是可利用的，not secure也是如此.

所以本质上，虽然内联样式略微提高了速度，正如您所说，但在安全性和速度之间存在明确的权衡。尽可能避免内联样式 ;)

希望这对您有所帮助!