Search code examples
aureliasanitizationaurelia-templating

aurelia: properly sanitizing innerHTML-bound data

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?

Solution

  • 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.