How to handle contenteditable input with emojis safely?

Hi guys!

On my website (laravel + vue), the user can place texts and comments and even insert emojis (I use emojione: https://github.com/emojione/emojione ).

My problem is sanitizing the text and rendering it correctly . User enters some html and emojis, I sanitize everything, store the raw text with the emojis' utf-code in MySQL. And then, when displaying, I fetch the text, convert the text with its utf-emojis to text with html-img-tags for the emojis and render it vue's v-html="..." attribute.

Somehow, I don't trust sanitization completely. I still get cases here and there, where not all tags are removed completely. And rendering the text via v-html in vue seems bogus to me...However, displaying as text only does not allow for emoji-images.

And as much as I search, I don't find best practices online on how to handle this use case!? Can you guys please help me?

RoboRobok

7 years ago

Level 7

I hate it when people remove tags that came from the input. People speak human language, your website uses HTML behind the scenes and consumer doesn't and shouldn't care. Your job is to safely display whatever has been typed by the user. If someone wants to type <b>, let him type it and display it just as it was typed, which goes: opening less-than sign, lowercase letter B, greater-than sign.

Trimming HTML from typed input is like censoring words in completely irrelevant language. Maybe "love" means shit in some African language? You never know.

mvoit

7 years ago

Level 2

@ROBOROBOK - I see your point and share it, but how do I do that with Vue? As far as I know, I have two options:

use v-html="text" to render the text. Advantage: emojis are rendered as images. Disadvantage: if user inputs tags, they are rendered as HTML and not as plain text.
use {{ text }}. Advantage: Safe display of user's input. Disadvantage: emojis are not rendered any more.

Is there an option (3) I don't know about?

RoboRobok

7 years ago

Level 7

I'm not an expert of Vue.js, but doesn't it just output emoji correctly? Maybe it has something to do with the way you store them? Laravel handles emoji like magic when they are stored in utf8mb4 SQL charset.

Please or to participate in this conversation.