css - 什么是安全和不安全的 css 样式(我们会过滤掉什么，我们会允许什么)？

Question

我想允许用户在我的网站上提交自定义 CSS。

我知道某些样式组合可能不安全，例如 position:absolute。

然而，如果我们用 position:relative 将内容包装在一个 div 中，上述内容就不会受到影响。

我也听说有一些通过 css 执行脚本的可能性，但我不记得也没有想到。

所以我的问题是:

• 哪些可能被认为是安全的？
• 什么会进入黑名单？

理想情况下，我将编写函数来接受 style="*"标签的内容，并相应地清理它们。

我也会考虑一些关于哪种方法更好的建议:

• 从黑名单中匹配并过滤掉不安全的属性，
• 或者只允许绕过白名单中的那些(尽管列表可能会变得很大)

如果您的火炮中有一些广泛的功能 - 这是吐出来​​的正确位置! :-)

Answer 1

您需要定义安全性的含义。如果你的意思是“不要让用户破坏我的布局”，那么我认为你根本不能让用户以 CSS 的方式使用太多。或许字体、颜色和背景可以让用户更改，但除此之外您就是在自找麻烦。 (即使像 margin 和 padding 这样的东西在任何字段中都可以是“有趣的”负值，特别是当与 zindex 结合使用时......)作为一般的经验法则，如果它有 HTML 标签(例如 <font> ， <i> 等)。 ) 那么这里就没问题了。

现在，如果您在谈论安全性，因为您希望防止跨站点脚本问题，那么您需要禁止任何可能执行代码的 css 元素。 (例如，如 BoltClock 的评论所示)

如果我是你，我会听从评论者的建议，根本不让人们使用 CSS——如果你希望用户能够对代码进行一些自定义，那么就让他们进行这些自定义；但不要让他们输入任意代码。人们总是会打破这些类型的过滤器，您不太可能捕捉到所有可能的极端情况。