How to visualize tag breaks with Aurelia

Question

I am extracting some text data using JSON, this data includes text formatted with strings. I would really like these lines to be passed to the user.

Question: What is the “correct” / “recommended” approach to achieve this?

Parameters I tried:

• Usually binding: <p>${myText}</p> : does not display line breaks
• Using <pre> : <p><pre>${myText}></pre></p> : rendering lines, but there are all the known and favorite problems with long text <pre> , for example, horizontal scrolling in some browsers and suboptimal violation of the word.
• Binding is usually done using valueConverter, which replaces line breaks with <br> tags: <p>${myText | textFormat}</p> <p>${myText | textFormat}</p>

 export class TextFormatValueConverter { toView(value) { return value.replace(new RegExp('\r?\n','g'), '<br>'); } } 

This makes the tags <br> , but the Aurelia middleware escapes the tags and displays them as literal text to the user. * Linking using the above converter and innerHTML: <p innerHTML.bind="myText | textFormat"></p> : the rendering is fine, but I'm worried that it might be vulnerable to exploits because the texts come from a legacy system, which makes no input sanitazion regarding use for the web.

Answer 1

What you do is right. Sometimes binding to innerHTML is required. The aurelia.io documents contain instructions for using the sanitation converter and a note on using a more complete implementation using sanitize-html .

However, you can create a really lightweight custom attribute that does just what you need:

http://plnkr.co/edit/qykvo9PKAD0TawTlQ5sp?p=preview

save-breaks.js

 import {inject} from 'aurelia-framework'; function htmlEncode(html) { return document.createElement('a').appendChild( document.createTextNode(html)).parentNode.innerHTML; } @inject(Element) export class PreserveBreaksCustomAttribute { constructor(element) { this.element = element; } valueChanged() { let html = htmlEncode(this.value); html = html.replace(/\r/g, '').replace(/\n/g, '<br/>'); this.element.innerHTML = html; } } 

app.js

 export class App { message = `this is my text it has some line breaks and some <script>evil javascript</script> the line breaks were replaced with <br/> tags`; } 

app.html

 <template> <require from="./preserve-breaks"></require> <div preserve-breaks.bind="message"></div> </template> 

Answer 2

The problem is that Aurelia displays your converted HTML as a hidden tag. To get around this, simply use the RegExp function to convert to <br> , then use the innerHTML binding as follows:

 <p innerHTML.bind="htmlText">${myText}</p> 

This will stop Aurelia from exiting HTML. I see that you are worried about using this approach, since you are afraid that there might be bad HTML somewhere, but there is no other way around this, since you cannot tell Aurelia to show only certain tags.

If you are concerned about the possibility of bad HTML, why don't you write some custom JS to cancel all tags <br> after the page loads? (Ugly, damn it, but I see no other way.)