如何避免Zalgo文本在没有完全删除的情况下出血？

Question

我们的网络服务受到了一些Zalgo文本的影响,我正试图为未来提出一个很好的解决方案.我们的策略是接受所有用户输入并将其保存在永久存储中(我们正确编码后端的输入,因此这部分是可以的).在输出阶段,我们通过带有白名单的过滤器/解析器运行原始用户输入,以避免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序列作为用户输入,如果一个混乱的用户评论导致该用户评论看起来像垃圾,我很好.我只是想避免那个垃圾溢满了整个地方.具体来说,我不打算在显示之前阻止zalgo文本或过滤类似zalgo的文本.

Answer 1

在使用Firefox和Chrome 测试示例后，我会说最好的选择是使用clarification overflow: auto。overflow: hidden 仅在认为可能的滚动条比失去用户内容更糟糕的情况下，使用才有意义。

该overflow: auto允许，如果内容不适合，它仍然部队裁剪到所选元素自动回落到滚动条。

该声明clip: rect(0,auto,auto,0);是不好的，因为它仅在有position: absolute;和没有时才起作用overflow: visible。

请参阅一个没有overflow: auto比较的示例。