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

A 内容安全政策 https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP with a default-src or style-src指令将阻止内联样式应用于<style>元素或样式属性。要允许使用内联样式，值为unsafe-inline必须应用于 CSP 获取指令。这似乎表明内联样式是不安全的。

虽然内联 Javascript 是 XSS 攻击的明显攻击媒介（CSP 是几乎没用 https://research.google.com/pubs/pub45542.html with script-src 'unsafe-inline'），Google Web 基础知识考虑内联样式成为相对同等的威胁 https://developers.google.com/web/fundamentals/security/csp/，提供一个例子 http://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html2009 年一篇博客文章中巧妙的数据泄露方法。

另一方面，另一个Web 基础知识文章 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp#adding_javascript_and_css_into_the_mix建议内联样式可以帮助优化关键渲染路径，因为当浏览器获取外部资源时，第一次绘制不会被阻止。安全性和性能之间似乎存在非常现实的权衡：

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

From an 是否有可能被利用从观点来看，是的，内联样式与内联 JavaScript 一样危险。然而，利用此类漏洞的情况并不常见。

恶意使用 CSS 的方法有很多种，最常见的方法是注入图像。有（至少）两种可能的方式来实现这种情况：

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

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

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

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

除此之外，我们甚至可以采取这一步further，通过告诉 URLitself运行 JavaScript：

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

正如你可以想象的那样，这使得攻击者几乎可以做anything他们要。

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

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

还值得注意的是，使用同源策略 https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy is 可利用的其本身也是如此not secure https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy.

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

希望这可以帮助！