Rendern von Zeilenumbrüchen wie <br> Tags mit Aurelia

Question

Ich erhalte einige Textdaten mit JSON, diese Daten enthalten Text formatiert mit Zeilenumbrüchen. Ich möchte diese Zeilenumbrüche gerne dem Benutzer rendern.

Frage: Was ist der "richtig"/"empfehlenswert" Ansatz, um dies zu erreichen?

Optionen Ich habe versucht:

• Bindung normalerweise: <p>${myText}</p>: Renders keine Zeilenumbrüche
• <pre> Verwendung: <p><pre>${myText}></pre></p>: Renders Zeilenumbrüche, haben aber alle bekannt und beliebt Probleme mit langen <pre> Text, wie horizontalen Scrollen in einigen Browsern und suboptimales Word breaking.
• Bindung normalerweise einen Valueconverter verwenden, die Zeilenumbrüche mit <br> Tags ersetzt: <p>${myText | textFormat}</p>

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

Diese <br>-Tags nicht machen, aber die Aurelia Binder entweicht die Tags und zeigt sie als normaler Text an den Benutzer. * Bindung mit dem oben genannten Konverter und innerHTML: <p innerHTML.bind="myText | textFormat"></p>: Rendert ok, aber ich bin besorgt, dass es anfällig für Exploits sein könnte, da die Texte von einem Legacy-System kommt, die keine sanitazion Eingang in Bezug auf die Verwendung für das Web tut.

Answer 1

Was Sie tun, ist richtig. Manchmal ist eine Bindung an innerHTML erforderlich. Die Dokumentation unter aurelia.io enthält Anweisungen zur Verwendung eines Sanierungskonverters und einen Hinweis zur Verwendung einer vollständigeren Implementierung unter Verwendung des sanitize-html-Projekts.

Das heißt, können Sie eine wirklich leichte benutzerdefinierte Attribute erstellen, die nur das tut, was Sie brauchen:

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

Das Problem ist, dass Aurelia konvertiert HTML als Escape-Tags. Um dies zu umgehen verwenden Sie einfach Ihre RegExp Funktion <br> zu konvertieren, verwenden Sie dann innerHTML- wie so verbindlich:

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

Dies wird Aurelia-Station von der HTML entkommen. Ich sehe, dass Sie sich Sorgen machen, diesen Ansatz zu verwenden, da Sie befürchten, dass irgendwo schlechtes HTML sein könnte, aber es gibt keine andere Möglichkeit, dies zu umgehen, da Sie Aurelia nicht sagen können, dass nur bestimmte Tags gerendert werden.

Wenn Sie sind, die über das Potenzial für schlechte HTML betroffen sind, warum schreiben Sie nicht ein Stück von benutzerdefinierten JS zu unescape alle <br> Tags nach dem Laden der Seite? (Hässlich, aber ich kann keinen anderen Weg sehen.)