Sanitizing HTML in Aurelia

I am developing a javascript application using Aurelia. I had some trouble binding an HTML containing property to a div. The original code looks like:

    <div class="terms">
        ${object.htmlProperty}
    </div>

Because the documentation for Aurelia is still developing, so I wasn’t able to find a reference item for this. I ended up piecing together the things I needed to know.

This StackOverflow question indicated that you need to use innerHTML.bind:

    <div class="terms" innerHTML.bind="object.htmlProperty"></div>

It looked like everything was dandy just doing that – I even injected <script>alert('some alert stuff');</script> into object.htmlProperty, and got no alerting. But the script tags were making it into the content unobstructed, so it looks like Chrome was keeping things safe, rather than Aurelia.

I had noticed issue 7 and pull request 19 from the aurelia repos, but was having a hard time figuring out what exactly they were saying with that.

Eventually, I found this commit from the pull request which added a sanitizeHTML value converter to the repo. This was noted in the 0.10.0 release notes:

Binding to innerHTML and innerText is now supported. You can use the new sanitizeHtml value converter along with this.

Once I got that detail I was able to get my html property bound and sanitized simply by doing:

    <div class="terms" innerHTML.bind="object.htmlProperty | sanitizeHTML"></div>

From the pull requests there is also a way to specify a custom sanitizer, which, according to PR19, looks something like this:

    <div innerHTML="value.bind: some.prop; sanitizer.call: mySanitizationFunction”

I have not tried this, but something like that should work.