我们的网络服务受到了一些Zalgo text的影响，我正在尝试为未来找到一个好的解决方案。我们的策略是接受所有用户输入并将其保存在永久存储中（我们正确编码后端的输入，因此这部分是可以的）。在输出阶段，我们通过带有白名单的过滤器/解析器运行原始用户输入，以避免XSS攻击和其他混乱。最近一些用户已经找到了Zalgo的世界，他们只是喜欢给其他人带来麻烦。
正如我所看到的，Zalgo文本只是一段从预期容器中泄漏出来的Unicode文本。因此，我认为自动删除所有复杂的组合字符是过于激烈的防御。 是否有人知道一个CSS技巧来强制Zalgo文本包含在给定的父元素中而没有一些令人讨厌的副作用？
例如，如果我有
<section class="userinput">
... user input here ...
</section>
如何确保用户输入不会泄漏到section.userinput的边界之外？我猜overflow: hidden或clip: rect(...)可能是正确答案，但您对这个用例有更好的了解吗？我最好仍然可以使用section.userinput { max-height: 200vh; }或类似的东西来避免用户创建人为的长评论。如果某些评论的长度超过200vh，则该评论应该仅包含该评论的滚动条。通常情况下，整个页面应该只有一个滚动条。
请注意，我只是想在视觉领域解决问题。我非常乐意接受任何有效的UTF-8序列作为用户输入，如果一个混乱的用户评论导致该用户评论看起来像垃圾，我很好。我只是想避免那个垃圾溢满了整个地方。具体来说，我不是trying to block the zalgo text或filter zalgo-like text before display。
答案 0 :(得分：5)
在使用Firefox和Chrome测试an example case之后，我会说最好的选择是使用声明overflow: auto。只有当可能的滚动条被认为比丢失用户内容更糟时，才使用overflow: hidden才有意义。
如果内容不适合，overflow: auto允许自动回退到滚动条，它仍会强制剪切到所选元素。
声明clip: rect(0,auto,auto,0);不合适，因为它仅适用于position: absolute;且不适用overflow: visible。