用户生成的内联css是否存在任何安全风险

Question

<div style='user input here'></div>

存储用户生成的CSS代码并输出它是否存在安全风险。我知道我们可以在任何浏览器上做到这一点，我只想确保在允许用户将他们想要的任何代码放入属性时，我注意到了应该注意的任何问题。

添加到问题中以获取更多信息：如果正则表达式只允许数字(0-9(、字母(a-z(和其他一些东西，比如#000的标签(#(或括号((((和逗号(，(，可能还有rgba的句号(.((1281281280.5(和百分比(%(，该怎么办？

如果我对上面的任何一个使用regex，那会有安全风险吗？如果是的话，那会是哪一个呢？白名单只列出一些CSS代码，有没有任何CSS样式绝对没有安全风险？

Answer 1

如果不对用户的字符串值进行编码，那么他们可以利用带有引号的html结构。

例如，这将毫无作用：

<div style="<script>harmfulJavascript();</script>"></div>

但是，如果允许用户break用引号完成html属性，那么他们就可以向DOM添加任何内容。

用户字符串：

"><script>harmfulJavascript();</script></div>

结果：

<div style="">
<script>harmfulJavascript();</script>">
</div>