Вопрос:

Санировать ввод в Angular2

angular typescript sanitize

26648 просмотра

1 ответ

6096 Репутация автора

На этот вопрос уже есть ответ здесь:

Я пытаюсь получить стороннее (потенциально небезопасное) содержимое HTML из моей базы данных и вставить его в мой документ HTML.

Как мне безопасно это сделать (Защита от XSS)?

В Angular1.x раньше была санитария$sce ввода, как мне это сделать в Angular2 ? Насколько я понимаю, Angular2 автоматически очищает его по умолчанию, это правильно?

Как то так не получится

<div class="foo">
    {{someBoundValueWithSafeHTML}} // I want HTML from db here
</div>
Автор: the_critic Источник Размещён: 25.12.2015 10:34

Ответы (1)


38 плюса

33521 Репутация автора

Решение

Чтобы вставить обычный HTML в ваше приложение angular2, вы можете использовать [innerHtml]директиву.

<div [innerHtml]="htmlProperty"></div>

Это не сработает с HTML, который имеет свои собственные компоненты и директивы, по крайней мере, не так, как вы ожидаете.

Однако, если вы получаете небезопасное html-предупреждение, вы должны доверять HTMLпервому, прежде чем вводить его. Вы должны использовать DomSanitizerдля такой вещи. Например, <h3>элемент считается безопасным. <input>Элемент не является.

export class AppComponent  {

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

    public get htmlProperty() : SafeHtml {
       return this.sr.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private sr: DomSanitizer){}
}

И пусть ваш шаблон останется таким же:

<div [innerHtml]="htmlProperty"></div>

Немного хедз-ап, хотя:

ВНИМАНИЕ: вызов этого метода с ненадежными пользовательскими данными подвергает ваше приложение угрозам безопасности XSS!

Если вы планируете использовать эту технику больше, вы можете попытаться написать @Pipeдля выполнения этой задачи.

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

@Pipe({
    name: 'trustHtml'
})
export class TrustHtmlPipe implements PipeTransform  {    
   constructor(readonly sr: DomSanitizer){}  

   transform(html: string) : SafeHtml {
      return this.sr.bypassSecurityTrustHtml(html); 
   } 
} 

Если у вас есть такая труба, вы AppComponentизмените ее на эту. Не забудьте добавить канал в ваш массив объявлений вашего NgModule:

@Component({
   selector: 'app',
   template: `<div [innerHtml]="htmlProperty | trustHtml"></div>`
})
export class AppComponent{

    public htmlProperty: string = '<input type="text" name="name">';

} 

Или вы можете написать, @Directiveчтобы сделать то же самое:

@Directive({
   selector: '[trustHtml]'
})
export class SanitizeHtmlDirective {

    @Input()
    public set trustHtml(trustHtml: string) {
      if (this._trustHtml !== trustHtml) {
        this._trustHtml = trustHtml;
        this.innerHtml = this.sr.bypassSecurityTrustHtml(this.trustHtml);
      }
    }

    @HostBinding('innerHtml')
    innerHtml?: SafeHtml;

    private _trustHtml: string;

    constructor(readonlysr: DomSanitizer){}
}

Если у вас есть такая директива, вы AppComponentизмените ее. Не забудьте добавить директиву в ваш массив объявлений вашего NgModule:

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

    public htmlProperty: string = '<input type="text" name="name">';

} 
Автор: PierreDuc Размещён: 26.12.2015 01:03
Вопросы из категории :
32x32