aurelia: properly sanitizing innerHTML-bound data

Question

I am perfectly aware that I can sanitize innerHTML-bound data using:

<div innerhtml.bind="someData | sanitizeHTML"></div>

However, based on my observations, this sanitization only removes <script> tags. It doesn't protect the user from event-driven content such as:

"Hi! I am some HTML-formatted data from the server! <button onclick="getRekt();">Click me for butterflies!</button>"

Is there a better way to prevent ANY type of javascript or event callbacks from being rendered on the element?

score 4 · Accepted Answer · answered Oct 10 '17 at 07:51

4

The sanatizeHTML value converter is a very simple sanitizer, and only remove the scripts tags. See the code here.

You can create your own value converter with a more complex santizer. Check this answer for more details about how to sanitize html in a browser.

But don't forget to never trust the browser, if you can it's better to sanitize the html in the server side before to send it to the browser to display it.

answered Oct 10 '17 at 07:51

Valentin B.

255
2
8

Thanks for pointing me in the right direction! The server actually does sanitization, I just wanted a client-side sanitizer for a more fool-proof security. – Jerome Indefenzo Oct 11 '17 at 08:06
Wow, that sanitizer is more dangerous than nothing at all. – Slappywag Oct 18 '18 at 08:45

aurelia: properly sanitizing innerHTML-bound data

1 Answers1