Jak ręcznie odkażać w angular2

Question

Mam textarea, gdzie użytkownik będzie wpisać tekst. Tekstem nie może być JavaScript, HTML itp. Chcę ręcznie zdezynfekować dane i zapisać je w łańcuchu.

Nie mogę wymyślić, jak użyć DomSanitizationService do "ręcznego" oczyszczenia moich danych.

Jeśli wykonam {{textare_text}} na stronie, dane zostaną poprawnie odkażone.

Jak zrobić to ręcznie na napis, który mam?

Answer 1

można zdezynfekować HTML następująco:

import { Component, SecurityContext } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [innerHTML]="_htmlProperty"></div> 
    ` 
}) 
export class AppComponent { 

    _htmlProperty: string = 'AAA<input type="text" name="name">BBB'; 

    constructor(private _sanitizer: DomSanitizer){ } 

    public get htmlProperty() : SafeHtml { 
    return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty); 
    } 

} 

Demo plunker here.

---

Z Twoich komentarzach, rzeczywiście chcesz ucieczce nie odkażenie.

W tym celu: check this plunker, where we have both escaping and sanitization.

import { Component, SecurityContext } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    template: `Original, using interpolation (double curly braces):<b> 
     <div>{{ _originalHtmlProperty }}</div> 
    </b><hr>Sanitized, used as innerHTML:<b> 
     <div [innerHTML]="sanitizedHtmlProperty"></div> 
    </b><hr>Escaped, used as innerHTML:<b> 
     <div [innerHTML]="escapedHtmlProperty"></div> 
    </b><hr>Escaped AND sanitized used as innerHTML:<b> 
     <div [innerHTML]="escapedAndSanitizedHtmlProperty"></div> 
    </b>` 
}) 
export class AppComponent { 
    _originalHtmlProperty: string = 'AAA<input type="text" name="name">BBB'; 
    constructor(private _sanitizer: DomSanitizer){ } 

    public get sanitizedHtmlProperty() : SafeHtml { 
    return this._sanitizer.sanitize(SecurityContext.HTML, this._originalHtmlProperty); 
    } 

    public get escapedHtmlProperty() : string { 
    return this.escapeHtml(this._originalHtmlProperty); 
    } 

    public get escapedAndSanitizedHtmlProperty() : string { 
    return this._sanitizer.sanitize(SecurityContext.HTML, this.escapeHtml(this._originalHtmlProperty)); 
    } 

    escapeHtml(unsafe) { 
    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") 
       .replace(/"/g, "&quot;").replace(/'/g, "&#039;"); 
    } 
} 

HTML escaping function użyte powyżej ucieka te same znaki jak angular code does (niestety, ich funkcja ucieczki nie jest publiczna, więc nie można go używać).

Answer 2

kątowej finału można używać tak:

1. najpierw zaimportować "DomSanitizer" z kątową platformy-browser:

   import { DomSanitizer } from '@angular/platform-browser'; 
   import { SecurityContext } from '@angular/core'; 
   

2. Następnie w konstruktorze:

   constructor(private _sanitizer: DomSanitizer){} 
   

3. Następnie użyj w swojej klasie, jak:

   var title = "<script> alert('Hello')</script>" 
   title = this._sanitizer.sanitize(SecurityContext.HTML, title); 
   

Answer 3

W kątowa^2.3.1

mając widok z użyciem progressbar bootstrap4. Zobacz, że w tym przykładzie potrzebujemy wartości dla stylu.width.

<!-- View HTML--> 
<div class="progress"> 
    <div class="progress-bar" role="progressbar" [style.width]="getProgress('style')" aria-valuenow="getProgress()" aria-valuemin="0" aria-valuemax="100"></div> 
</div> 

Musimy zdezynfekować ten style.width wartość. Aby określić kontekst, należy użyć wartości DomSanitizer do odkażania wartości i wartości SecurityContext. W tym przykładzie kontekst to styl.