How to avoid Zalgo text bleeding all over place without totally removing it?

Our web service has been hit with some Zalgo text and I'm trying to come up with a good solution for the future. Our policy is to accept all user input and save it in permanent storage (we correctly encode the input for our backend so this part is okay). During the output phase, we run the original user input through filter/parser with a whitelist to avoid XSS attacks and other mayhem. Lately some users have found the world of Zalgo and they just love to cause some trouble to other people with that.

As I see it, Zalgo text is just a piece of Unicode text that leaks out of the intended container. As a result, I think automatically removing all complex combining characters is too drastic defence. Does anybody know a CSS trick to force the Zalgo text to be contained in a given parent element without some nasty side-effects?

For example, if I have

<section class="userinput">
... user input here ...
</section>

how can I make sure that the user input does not leak outside the borders of section.userinput? I guess overflow: hidden or clip: rect(...) could be the correct answer, but do you know something better for this use case? Preferably I could still use section.userinput { max-height: 200vh; } or something similar to avoid users from creating artificially long comments. If some comment were longer than 200vh, it should have a scroll bar for that comment alone. Normally there should be just a single scroll bar for the whole page.

Note that I'm trying to combat the problem in visual domain only. I'm perfectly happy to accept any valid UTF-8 sequence as user input and I'm okay if a messed up user comment results in that user comment looking like crap. I'm only trying to avoid that crap overflowing all over the place. Specifically, I'm not trying to block the zalgo text or to filter zalgo-like text before display.

Solution

After testing an example case with Firefox and Chrome, I would say the best option is to use declaration overflow: auto. Using overflow: hidden would make sense only if possible scrollbars are considered worse than losing user content.

The overflow: auto allows falling back to scrollbars automatically if content does not fit and it still forces clipping to selected element.

The declaration clip: rect(0,auto,auto,0); is no good because it only works with position: absolute; and without overflow: visible.

See an example without overflow: auto for an comparision.

Above examples inlined here as snippets:

An example without safeguards against Zalgo text:

body
{
    background: #ccc;
    color: #000;
    font-family: sans-serif;
    padding: 4em 1em;
}
section.userinput
{
    margin-top: 0.5em;
    padding: 0.1em 0.25em;
    background: #fff;
    border: solid #ccc 0.1em;
    border-radius: 0.5em;
    font-size: 120%;
}
.v1 section.userinput
{
    overflow: auto;
}
.v2 section.userinput
{
    position: absolute;
    clip: rect(0em,auto,auto,0em);
}

<body class="">
    <section class="userinput">
        Some real content here.
    </section>
    <section class="userinput">
        T̠̬̘̯̙̲̪̪͇̜̭̣̘̟̲͇̳̬͕̖̜̯̘͉͈͉͎̱͓̣̰̳̳͉̙̯̙̰͚͇͎͕̘̯̳̞̲̼̱̖̩͙͕̤͂̋͌ͤ̒ͬ̀͒͂͒ͩ̌͗̋̓ͭ́̀̿͒ͣͮ̓̋ͭ͊͒͐ͩ̆̓͂ͫ̐͂̇͛͑̓̚ͅẽ̗̙͚̮̭̮̬̠͈̻̦̭̭̳̹̯̹̦̔̌ͯ͂̎̈̊̍ͣ̿̈̈̿̄ͦͭ̍͑̽̎̅͛͗͐ͬ̂̊̽̌̎̋ͭ͆̈́̓ͦͦ̑͛ͯs̭̠͖̝͙̩̫̫̥̦͚̝̼̣̥̗ͣͦ͑́͐ͭ͊ͧ̽͐̈̔͛ͨ́̎̔ͤ͐͒̓̀̅̈́̊̋͋̀̿̎͒̉̽͂ͮͬt̾͒̂̽̐ͪ̆̾ͮ͌̽͛̌͒̔ͧ͗̿ͩ̄̿̿̌ͪͩ̊̏͑͌̀̋ͩ͆ͣ̑̏́̽̐͐̔ͪ̓̓ͭ͆ ̯̘͙̠̦̩̝͎̭̖̪̗̞̖̟̲͖̥͙͕̟̝̹͎̽o̼̮̭̞ͯͬ̀͐͗̿ͣ͛ͮͭ̎ͨ͒̌̾̐̉̍͗̎̈́̆ͪͦ̌ͧͦ̓ͨ̐ͯ͒͑͛ͯ̽ͅf̝̪̼̠͎͇̹̝̙̰̟̼͎̱͂ͩ̈́̌ͬ̒ͧ̽̅̉ͧ́͒̒͊ͦͭͭͭ͗́̽ͦ ͚̝̝̠̪͍̰̺̳̫̭͎͔̭̟͍͎͇͎͈͔̠̬͇̦͈̟̰̱̹̲̰̭̲̭̺̜͚̰̹̮̣̤̲̪̙̞͇̦͙͆ͪͨ̐ͨ̽̒͛ͩ̐ͤ͌̂́͒̌ͭͩͦ̎́̈ͬ̓̑̔͐̎͒̔̄ͥ̏ͥͯͧ͐ͪͧͥ̂ͬ̒̀̉̓ͭ̚ͅͅͅͅZ̘̥̲͍̠͎̱̺̘͈͍̟̤̠̮͖͉͕̙̩̲̣̠͎̥̣̜͚̜͕̻͔̰̞̫̭̹͕͙̝̠̮̣̰ͤͦ̍̓ͪͥ̒ͩ̋͆̍͋̽̅͗̈ͨ̂ͨ͋̔̔̓ͪͣ̅̇̏͒ͬ͐ͩ̇ͨ̋ͣ̌̔ͨ́ͪ̔̾̄ͤ̅͑̚ͅA̞̜̺̣͓̼̭̭͈̳̞͚̭̭͕̺͉̜̗̼̣̩̪͂ͯ̈́̍̍͛ͮ̂ͯ̽̎ͬͯ͆̋͌̍͐̌͗ͤ̒ͤ͊̐̈́ͧ̓̇ͬͦ̾ͭ̐̆̚ͅͅͅL̪͉̬̦̝̠̲͖̘̮̙̳͓͇͇̪̱͉̱͓̺͙͓̲̇́̍̽̇̎͊̍̐ͩ̔̋́ͬ̍ͮͫͮ͗̍͋ͭͯ̑̉̈́̄̾̂̀͆̅͑̽̃̚G̣̺̼͔̺̖̣̥̝̰͙̖͖̮̻̩͓̞͈̜̗̤̺̥̻̞͇̩͕̲̙̝̲̤̤̜̐͗͐ͦ̉͐͗ͩ̿ͩ̑ͫ̍͛̄ͦ̔̚O͇͎̬̰̦̜̻͔͇̖͇̞̪͉͉͔͕̥͇̬̮̰̠̟̤̰̹͖̗̺̙͍ͮͨ̿ͪͯ̈́ͫ̔̽̃̀ ̺͕̠̰̝͎̰̟̠̲̗͈̬̥͈͎̺̮̗͍̺͚̟̠̙̠̜̘̹͉̖̤͉̫̰̱̭̠̲̲̗͒ͥͯ̎͐ͨ̓̓ͮ͒ͧ̒̾́̍̍ͦͥ̈́͒͊̃̓̈̈́̀ͮ̂ͪ̓̄̏ͫ̄̓̓̿̓̔̋̎ͧͪͩͪ͋ͫt̘̥̳̺̳̟̯̜̱̯̬̣̣͔̬̟͈͖̗̹͉̫̯́̋͒͂̈́̎͐̇́ͫ̒͛ͥͦ̐̿͂͒͗̃ͮ͒ͪ̌͆̏ͯ̏ͯ̊ͣ̾̃͋ͩ̃̿͐e̹̠̻̟̪̪͎̭̭͎͎̮̹̬̮̪̓̑ͨ̐͐̈́̓ͤͦ͂̿̅͋ͭ̑̓ͬ͐͐ͤ͐ͪ̒ͥ̀̈́ͪ̇̆ͤ̏̏̄̾̌͒ͬ̊ͬ͛̄̄̌̍͋ͥͅͅx̪͇̞̫̰̠͓̣̻̯̞̭̙̝̣͉̱̘̤͇̦̘̙̥͚̫̩̲̘̻͈͉̱͙͇͙ͫ̐̌͛̓͛ͨ͒̂t̩̖̮̙̻ͬ͗͛̍̅̌ͧ͒ͫ̓ͮ̈͒̾ͮͣͮͨͪ͆ͥ̐̍ͮ̽̅̈́̿ͫ͐̍̉ͦͮ͆͗̔̎̿̇ͧ̋ͨͮ̐̓͑̽̑ͤ̊̚̚ͅ ̝͔̺̩͔͈̰͈̣̫̤͉͚͇̟̹̘͔͇̥̘̘̝͛͛̒ͭͣͮͥͦ̿̏ͥͦ̀͂̾͆ͯͧͮͤ͌̌́͗ͨ̎̒ͬ̈́ͧ̊ͨ̓͂̾̉͐ͦ̃̃̚ͅẖ̰̠̮͓̣̯̭̥̹̜̟͍͍͇̀ͧ̽͑̄͊̋̐͋ͨ̔ͭͬ́̀̐͌͗ͥ̓̇͗̂̊ͅe͇͙͕̺̖̰̟̠̩̘̪̳̻̳͉͔̺̳̲̦̘̞̬̬̝͓̬̣̟͕̘͓̬̍͗̋ͮ͑ͣ͗̓̓̎̈̃̾̊̃ͧ̊ͪ̃̀͋̋̄͑̈́̂́͒̔̎̎ͥ͛͌̃͒̈́ͤ͛ͬͫͪ̚r͉̮̼̙̩͖͍̗̣̘͚̭̩͙͙̻͓̦̱̣͉̮̲͇̥͉͚̲͕͖̩̦̫̪̬͔̟͔̦̻̼̼̫̫̯̣̮͈̺͓͖̬̂̾͛̉̆̍ͥ̈́̓̆ͫ͑̄̔̅̈̏̅̓ͨ͐̊ͮ̋̈́ͣͮ̋̓̾ͤ͊ͬ̀̑ͣ͊̇͌ͯ̚ͅḙ̲͍͙͕̯̘͓͔͔͈̹͈̗͎͕̬̖̟̖͚̳͎̖ͩ͊̃ͫ̔̓͒͗ͩ͋̂ͩͩͧ̍͛̿͒ͩͅ.̯̗͗̑̍̑͗ͫͦͦͪͪͧ́̾̓̌̉͑̊̌̿̓ͫ̆̑̽̽ͪͦͨ͌ͦͨ̓
    </section>
    <section class="userinput">
        Some another real content here.
    </section>
</body>

And example with safeguards against bleeding zalgo text:

With overflow: auto applied to each user input container (the only differences is the v1 class in body element; you could also try class v2 to understand why it doesn't work for this purpose):

body
{
    background: #ccc;
    color: #000;
    font-family: sans-serif;
    padding: 4em 1em;
}
section.userinput
{
    margin-top: 0.5em;
    padding: 0.1em 0.25em;
    background: #fff;
    border: solid #ccc 0.1em;
    border-radius: 0.5em;
    font-size: 120%;
}
.v1 section.userinput
{
    overflow: auto;
}
.v2 section.userinput
{
    position: absolute;
    clip: rect(0em,auto,auto,0em);
}

<body class="v1">
    <section class="userinput">
        Some real content here.
    </section>
    <section class="userinput">
        T̠̬̘̯̙̲̪̪͇̜̭̣̘̟̲͇̳̬͕̖̜̯̘͉͈͉͎̱͓̣̰̳̳͉̙̯̙̰͚͇͎͕̘̯̳̞̲̼̱̖̩͙͕̤͂̋͌ͤ̒ͬ̀͒͂͒ͩ̌͗̋̓ͭ́̀̿͒ͣͮ̓̋ͭ͊͒͐ͩ̆̓͂ͫ̐͂̇͛͑̓̚ͅẽ̗̙͚̮̭̮̬̠͈̻̦̭̭̳̹̯̹̦̔̌ͯ͂̎̈̊̍ͣ̿̈̈̿̄ͦͭ̍͑̽̎̅͛͗͐ͬ̂̊̽̌̎̋ͭ͆̈́̓ͦͦ̑͛ͯs̭̠͖̝͙̩̫̫̥̦͚̝̼̣̥̗ͣͦ͑́͐ͭ͊ͧ̽͐̈̔͛ͨ́̎̔ͤ͐͒̓̀̅̈́̊̋͋̀̿̎͒̉̽͂ͮͬt̾͒̂̽̐ͪ̆̾ͮ͌̽͛̌͒̔ͧ͗̿ͩ̄̿̿̌ͪͩ̊̏͑͌̀̋ͩ͆ͣ̑̏́̽̐͐̔ͪ̓̓ͭ͆ ̯̘͙̠̦̩̝͎̭̖̪̗̞̖̟̲͖̥͙͕̟̝̹͎̽o̼̮̭̞ͯͬ̀͐͗̿ͣ͛ͮͭ̎ͨ͒̌̾̐̉̍͗̎̈́̆ͪͦ̌ͧͦ̓ͨ̐ͯ͒͑͛ͯ̽ͅf̝̪̼̠͎͇̹̝̙̰̟̼͎̱͂ͩ̈́̌ͬ̒ͧ̽̅̉ͧ́͒̒͊ͦͭͭͭ͗́̽ͦ ͚̝̝̠̪͍̰̺̳̫̭͎͔̭̟͍͎͇͎͈͔̠̬͇̦͈̟̰̱̹̲̰̭̲̭̺̜͚̰̹̮̣̤̲̪̙̞͇̦͙͆ͪͨ̐ͨ̽̒͛ͩ̐ͤ͌̂́͒̌ͭͩͦ̎́̈ͬ̓̑̔͐̎͒̔̄ͥ̏ͥͯͧ͐ͪͧͥ̂ͬ̒̀̉̓ͭ̚ͅͅͅͅZ̘̥̲͍̠͎̱̺̘͈͍̟̤̠̮͖͉͕̙̩̲̣̠͎̥̣̜͚̜͕̻͔̰̞̫̭̹͕͙̝̠̮̣̰ͤͦ̍̓ͪͥ̒ͩ̋͆̍͋̽̅͗̈ͨ̂ͨ͋̔̔̓ͪͣ̅̇̏͒ͬ͐ͩ̇ͨ̋ͣ̌̔ͨ́ͪ̔̾̄ͤ̅͑̚ͅA̞̜̺̣͓̼̭̭͈̳̞͚̭̭͕̺͉̜̗̼̣̩̪͂ͯ̈́̍̍͛ͮ̂ͯ̽̎ͬͯ͆̋͌̍͐̌͗ͤ̒ͤ͊̐̈́ͧ̓̇ͬͦ̾ͭ̐̆̚ͅͅͅL̪͉̬̦̝̠̲͖̘̮̙̳͓͇͇̪̱͉̱͓̺͙͓̲̇́̍̽̇̎͊̍̐ͩ̔̋́ͬ̍ͮͫͮ͗̍͋ͭͯ̑̉̈́̄̾̂̀͆̅͑̽̃̚G̣̺̼͔̺̖̣̥̝̰͙̖͖̮̻̩͓̞͈̜̗̤̺̥̻̞͇̩͕̲̙̝̲̤̤̜̐͗͐ͦ̉͐͗ͩ̿ͩ̑ͫ̍͛̄ͦ̔̚O͇͎̬̰̦̜̻͔͇̖͇̞̪͉͉͔͕̥͇̬̮̰̠̟̤̰̹͖̗̺̙͍ͮͨ̿ͪͯ̈́ͫ̔̽̃̀ ̺͕̠̰̝͎̰̟̠̲̗͈̬̥͈͎̺̮̗͍̺͚̟̠̙̠̜̘̹͉̖̤͉̫̰̱̭̠̲̲̗͒ͥͯ̎͐ͨ̓̓ͮ͒ͧ̒̾́̍̍ͦͥ̈́͒͊̃̓̈̈́̀ͮ̂ͪ̓̄̏ͫ̄̓̓̿̓̔̋̎ͧͪͩͪ͋ͫt̘̥̳̺̳̟̯̜̱̯̬̣̣͔̬̟͈͖̗̹͉̫̯́̋͒͂̈́̎͐̇́ͫ̒͛ͥͦ̐̿͂͒͗̃ͮ͒ͪ̌͆̏ͯ̏ͯ̊ͣ̾̃͋ͩ̃̿͐e̹̠̻̟̪̪͎̭̭͎͎̮̹̬̮̪̓̑ͨ̐͐̈́̓ͤͦ͂̿̅͋ͭ̑̓ͬ͐͐ͤ͐ͪ̒ͥ̀̈́ͪ̇̆ͤ̏̏̄̾̌͒ͬ̊ͬ͛̄̄̌̍͋ͥͅͅx̪͇̞̫̰̠͓̣̻̯̞̭̙̝̣͉̱̘̤͇̦̘̙̥͚̫̩̲̘̻͈͉̱͙͇͙ͫ̐̌͛̓͛ͨ͒̂t̩̖̮̙̻ͬ͗͛̍̅̌ͧ͒ͫ̓ͮ̈͒̾ͮͣͮͨͪ͆ͥ̐̍ͮ̽̅̈́̿ͫ͐̍̉ͦͮ͆͗̔̎̿̇ͧ̋ͨͮ̐̓͑̽̑ͤ̊̚̚ͅ ̝͔̺̩͔͈̰͈̣̫̤͉͚͇̟̹̘͔͇̥̘̘̝͛͛̒ͭͣͮͥͦ̿̏ͥͦ̀͂̾͆ͯͧͮͤ͌̌́͗ͨ̎̒ͬ̈́ͧ̊ͨ̓͂̾̉͐ͦ̃̃̚ͅẖ̰̠̮͓̣̯̭̥̹̜̟͍͍͇̀ͧ̽͑̄͊̋̐͋ͨ̔ͭͬ́̀̐͌͗ͥ̓̇͗̂̊ͅe͇͙͕̺̖̰̟̠̩̘̪̳̻̳͉͔̺̳̲̦̘̞̬̬̝͓̬̣̟͕̘͓̬̍͗̋ͮ͑ͣ͗̓̓̎̈̃̾̊̃ͧ̊ͪ̃̀͋̋̄͑̈́̂́͒̔̎̎ͥ͛͌̃͒̈́ͤ͛ͬͫͪ̚r͉̮̼̙̩͖͍̗̣̘͚̭̩͙͙̻͓̦̱̣͉̮̲͇̥͉͚̲͕͖̩̦̫̪̬͔̟͔̦̻̼̼̫̫̯̣̮͈̺͓͖̬̂̾͛̉̆̍ͥ̈́̓̆ͫ͑̄̔̅̈̏̅̓ͨ͐̊ͮ̋̈́ͣͮ̋̓̾ͤ͊ͬ̀̑ͣ͊̇͌ͯ̚ͅḙ̲͍͙͕̯̘͓͔͔͈̹͈̗͎͕̬̖̟̖͚̳͎̖ͩ͊̃ͫ̔̓͒͗ͩ͋̂ͩͩͧ̍͛̿͒ͩͅ.̯̗͗̑̍̑͗ͫͦͦͪͪͧ́̾̓̌̉͑̊̌̿̓ͫ̆̑̽̽ͪͦͨ͌ͦͨ̓
    </section>
    <section class="userinput">
        Some another real content here.
    </section>
</body>