Angular 5 DomSanitizer mit Hyperlinks

Question

Ich bin mit einem WYSIWYG-Editor (CKEditor) und versuchen, den Inhalt mit kantigem 5.

zu machen Was ich versuche, ist der richtige Weg, um herauszufinden, DomSanitizer in Angular 5. verwenden Problem, mit dem ich konfrontiert bin, ist, dass Hyperlinks nicht funktionieren (sind nicht "anklickbar") in der resultierenden hygienisierten HTML.

ich folgenden Typoskript Code bin mit einem Safehtml Inhalt zurück:

public getSafeContent(): SafeHtml { 
    return this.sanitizer.bypassSecurityTrustHtml(this.page.content); 
} 

und es in meiner Vorlage auf diese Weise mit:

<div [innerHTML]="getSafeContent()"></div> 

Dies wird die HTML mit alle Inline-Styles macht intakt , aber Hyperlinks funktionieren nicht.

Ich habe versucht, diese stattdessen tun:

public getSafeContent(): SafeHtml { 
    return this.sanitizer.sanitize(SecurityContext.HTML, this.page.content); 
} 

, die in dieser Hyperlinks führt tatsächlich funktioniert, aber inlines Stile sind nicht.

Gibt es eine Möglichkeit, beide Stile und Hyperlinks für die Verwendung von gesäuberten Inhalten zu verwenden?

aktualisiert

Dies ist, was die Seite wie in Chrome Entwickler-Tool aussieht:

<div _ngcontent-c22="" class="row"> 
    <div _ngcontent-c22="" class="col-lg-12"> 

     <div _ngcontent-c22=""> 
      <p><a href="http://www.google.com">google</a></p> 
     </div> 
    </div> 
</div> 

und die Google-Verbindung ist nicht anklickbar.

Answer 1

bypassSecurityTrustHtml ermöglicht <script> Tags im Inhalt. Für URLs benötigen Sie bypassSecurityTrustUrl. Siehe hier: https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl.

Ich habe nie versucht, die bypassXXX Methoden stapelt, so dass ich weiß nicht, ob Sie so etwas wie diese bypassSecurityTrustUrl(bypassSecurityTrustHtml(myContent)) tun können, aber ich würde vermuten, wahrscheinlich nicht, da jede Methode einen String, sondern gibt ein Objekt (vom Typ SafeHtml/SafeUrl), Daher kann es nicht als Eingabe für den Stapelfunktionsaufruf verwendet werden, der eine Zeichenfolge erwartet.

Also, Sie müssen möglicherweise den Inhalt analysieren, übergeben Sie jede URL in die bypassSecurityTrustUrl und dann alles wieder zusammen zu kombinieren.

aktualisieren

ich am sanitize Methode nur an. Ich habe nicht versucht, aber so etwas wie dies funktionieren könnte:

this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustUrl(myContent)); 

seit sanitize ein SafeValue als eine Eingabe erfolgen kann. Der innere bypassSecurityTrustUrl bereinigt die URLs und gibt eine SafeUrl zurück, die von der äußeren Bereinigung ausgepackt und als Eingabe verwendet wird, um HTML-sicher zu machen. Wie ich schon sagte, ich habe es nicht versucht, aber es sieht in der Theorie gut aus ...

Answer 2

Dies funktioniert für mich:

Komponente:

content = '<b>Hello World</b><p style=\'font-size:14pt\'> 
<a href=\'http://www.google.com\'>Go to Google</a></p>Test123'; 

public getSafeContent(): SafeHtml { 
    return this.sanitizer.bypassSecurityTrustHtml(this.content); 
} 

HTML:

<div [innerHTML]="getSafeContent()"></div> 

Link funktioniert und Inline-Styles sind intakt