Как избежать кровотечения текста 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, я бы сказал, что лучше всего использовать декларацию overflow: auto, С помощью overflow: hidden будет иметь смысл, только если возможные полосы прокрутки считаются хуже, чем потеря пользовательского контента.

overflow: auto позволяет автоматически возвращаться к полосам прокрутки, если содержимое не помещается, и оно все еще вызывает обрезку выбранного элемента.

Декларация clip: rect(0,auto,auto,0); это не хорошо, потому что это работает только с position: absolute; и без overflow: visible,

Смотрите пример без overflow: auto для сравнения.