Come rendere i linebreak come tag <br> con Aurelia

Question

Sto recuperando alcuni dati testuali utilizzando JSON, questi dati includono testo formattato con interruzioni di riga. Mi piacerebbe molto rendere questi linebreak all'utente.

Domanda: Qual è il "corretto"/"consigliato" approccio per raggiungere questo obiettivo?

opzioni che ho provato:

• Rilegatura normalmente: <p>${myText}</p>: non svolge linebreaks
• Utilizzando <pre>: <p><pre>${myText}></pre></p>: Renders linebreaks, ma hanno tutti i problemi noti e amati con lunghi <pre> testo, come orizzontale scorrendo alcuni browser e rompendo in modo subottimale.
• Binding normalmente utilizzando un ValueConverter che sostituisce linebreaks con <br> tags: <p>${myText | textFormat}</p>

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

Ciò rende <br> tag, ma il legante Aurelia sfugge i tag e mostra loro testo letterale all'utente. * Binding utilizzando il convertitore sopra e innerHTML: <p innerHTML.bind="myText | textFormat"></p>: Rende bene, ma sono preoccupato che potrebbe essere vulnerabile agli exploit, in quanto i testi provengono da un sistema legacy che non esegue alcun sanitation di input per quanto riguarda l'utilizzo per il web.

Answer 1

Quello che stai facendo è corretto. Il collegamento a innerHTML è talvolta necessario. I documenti su aurelia.io includono istruzioni per l'uso di un convertitore di disinfezione e una nota sull'utilizzo di un'implementazione più completa utilizzando il progetto sanitize-html.

Detto questo, è possibile creare un attributo molto leggero personalizzato che fa solo quello che ti serve:

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

preserve-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

Il problema è che Aurelia esegue il rendering del codice HTML convertito come tag di escape. Per ovviare a questo basta usare la funzione RegExp per convertire in <br>, quindi utilizzare innerHTML vincolante in questo modo:

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

Questo fermerà Aurelia da sfuggire al HTML. Vedo che sei preoccupato dell'utilizzo di questo approccio, poiché temo che possa esserci un codice HTML errato da qualche parte, ma non c'è altro modo per aggirare questo problema perché non puoi dire ad Aurelia di visualizzare solo tag specifici.

Se sei che preoccupato per il potenziale per il cattivo HTML, perché non si scrive un pezzo di costume JS per unescape tutte le <br> tag dopo caricamento della pagina? (Brutto da morire, ma non riesco a vedere un altro modo.)