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

本文介绍了使用内联样式有哪些风险？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 具有内容安全政策 c> default-src 或 style-src 指令将阻止将内联样式应用于< style> 元素或样式属性。要允许使用内联样式，必须将 unsafe-inline 的值应用于CSP提取指令。这似乎表明内联样式不安全。A Content Security Policy with a default-src or style-src directive will prevent inline styles from being applied to <style> elements or style attributes. To allow the use of inline styles, a value of unsafe-inline must be applied to a CSP fetch directive. This seems to indicate that inline styles are unsafe.内联Javascript是XSS攻击的明显攻击媒介（CSP为几乎没有用，并带有 script-src'unsafe-inline'），Google Web基础知识认为内联样式成为相对等价的威胁，并提供一个示例，来自2009年博客文章中的一种巧妙的数据泄露方法。While inline Javascript is an obvious attack vector for XSS attacks (CSP is pretty much useless with script-src 'unsafe-inline'), Google Web Fundamentals considers inline-styles to be a relatively equivalent threat, providing one example of a clever data exfiltration method from a 2009 blog post.另一方面，另一个 Web基础知识文章建议内联样式可以帮助优化关键的渲染路径，因为在浏览器获取外部R时不会阻塞第一笔绘画资源。在安全性和性能之间似乎存在着非常真实的折衷：On the other hand, another Web Fundamentals article suggests that inlining styles can help optimize the critical rendering path, as first paint won't be blocked while the browser fetches external resource(s). It seems there is a very real tradeoff between security and performance:通常，内联样式的风险有多大？In general, how risky are inline styles?推荐答案从可能被利用的角度来看，是的，内联样式与内联JavaScript一样危险。但是，利用这种漏洞的情况要少得多。From an is-an-exploit-possible point of view, then yes, inline styles are just as dangerous as inline JavaScript. However, exploitation of such vulnerabilities is much less common.有几种方法可以恶意使用CSS，最常见的方法是注入图像。至少有两种可能的发生方式：There are a handful of ways that CSS can be used maliciously, with the most common method being injection of images. There are (at least) two possible ways for that to occur:div { background-image: url("evil.png");}img { content:url("evil.png").}允许用户强制渲染图像非常危险，因为您可以使用PHP欺骗图像的内容-您可以从查看PHP图像的人那里挖掘各种信息，例如Cookie，浏览器，甚至操作系统。更糟糕的是，该图像将正确呈现，因此查看该图像的人甚至不会注意到任何可疑的东西。Allowing the user to 'force' an image to render is incredibly dangerous, as you can use PHP to spoof the content of the image -- you can mine all sorts of information from someone who views a PHP image, such as their cookies, their browser, and even their operating system. What's worse is that the image will render correctly, so the person viewing the image won't even notice anything suspicious.请考虑其他情况，用户可以上传图片，例如在论坛上设置个人资料图片（最终将成为< img> ）。关键在于用户如何保存图像，以便其他用户渲染图像。对于个人资料图片上传，服务器验证通常会阻止用户上传不是图片或恶意图片的文件。几乎不可能验证以背景图像或 content URL内联注入的图像。Consider other situations where a user is able to upload an image, such as setting a profile picture on a forum (that would ultimately become an <img>). The key lies in how the user is able to save the image so that another user would render it. For profile picture uploads, server validation usually prevents users from uploading files that aren't images, or are malicious images. It's almost impossible to validate images that are injected inline as background-image or content URLs.除此之外，我们甚至可以通过告诉URL 自身运行JavaScript来进一步执行 ：In addition to this, we can even take that a step further, by telling the URL itself to run JavaScript:url('javascript: eval(evil)');您可以想象，这使得攻击者几乎可以做任何事情。As you can imagine, that allows an attacker to do almost anything they want. XSS还有一些较为罕见的方法，它们甚至允许诸如以行为标签和HTC：There are also rarer methods of XSS, that even allow for things such as executing JavaScript directly with the behavior tag and HTC:body { behavior: url(evilscript.htc);}也应注意使用同源政策本身可被可利用，因此 不安全。It's also worth noting that use of a same-origin policy is exploitable in itself, so is not secure.从本质上讲，内联样式可以稍微提高速度，正如您所说，在安全性和速度之间存在一定的权衡。尽可能避免使用内联样式;）So essentially, while inline styles slightly improve speed, as you say, there is a definite trade-off between security and speed. Avoid inline styles wherever possible ;)希望这会有所帮助！ 这篇关于使用内联样式有哪些风险？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！