Escape unsafe characters instead of removing them

[FlawTECH]

Background & Context

Hi. I have a Vue app with a template in which I want to inject some user-provided string. The twist is that I want to inject some tags at a specific offset in this text. The texts can contain some markup (eg <b>, <p>, etc.) which I want to render as-is (so, user will see the raw markup without html rendering).

Bug

Not really a bug, maybe a misunderstanding of the inner works of this library.

Input

DOMPurify.sanitize('This <b>is</b> a ') + '<mark>test</mark>'
DOMPurify.sanitize('This <b>is</b> a ' , { ALLOWED_TAGS: [] }) + '<mark>test</mark>'

Given output

This <b>is</b> a <mark>test</mark>
This is a <mark>test</mark>

Expected output

This &lt;b&gt;is&lt;/b&gt; a <mark>test</mark>

The < and > escape characters would then be rendered as < and > when viewing the text.

Is something like this possible ?

[cure53]

Sadly, this is nothing we can provide as core feature, but I think you can easily create a hook to do exactly that.

Then again, this is encoding and we do sanitize :) Different game with different goals. But should be doable via hook.

[FlawTECH]

Thank you for your reply. I want to have a sure way to handle every possible html entity (not just tags), so also ampersands, hyphens and stuff like that.

Of course I understand this is very possible using hooks but just in fear of forgetting something, I want to use an already available solution which is well established such as this one.

In the end, and for anyone looking for a similar solution, I used he. It hasn't been updated in a while but I guess if it's not broken, don't fix it. HTML entities have been around for a while now and it's not like the last one came out yesterday.

[cure53]

Cool, thanks :) I think he is indeed the right path!