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

Question

一个内容安全策略与default-src或style-src指令将阻止内嵌样式被应用到<style>的元素或样式属性.要允许使用内联样式,unsafe-inline必须将值应用于CSP fetch指令.这似乎表明内联样式是不安全的.

虽然联JavaScript是XSS攻击的一个明显的攻击向量(CSP是几乎无用带script-src 'unsafe-inline'),谷歌的Web基础认为直列风格是相对等同的威胁,提供了一个例子,从2009年的博客文章聪明的数据泄露的方法.

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

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

Answer 1

从一个可利用的角度来看,然后是的,内联样式和内联JavaScript一样危险.但是,利用这些漏洞的情况要少得多.

有一些方法可以恶意使用CSS,最常见的方法是注入图像.有(至少)两种可能的方式:

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

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

允许用户"强制"渲染图像是非常危险的,因为你可以使用PHP来欺骗图像的内容 - 你可以从查看PHP图像的人那里挖掘各种信息,例如他们的cookie,他们的浏览器,甚至他们的操作系统.更糟糕的是图像将正确渲染,因此观看图像的人甚至不会发现任何可疑的图像.

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

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

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

可以想象,这允许攻击者几乎做任何他们想做的事情.

还有一些比较罕见的XSS方法,甚至允许使用behavior标签和HTC 直接执行JavaScript等事情:

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

另外值得一提的是,使用的同源策略是可利用的本身,所以是不是安全.

基本上,虽然内联样式稍微提高了速度,但正如您所说,安全性和速度之间存在明确的权衡.尽可能避免使用内联样式;)

希望这可以帮助!