Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
Я использую DomSanitizer с SVG в строке html.
До текущей версии Angular это работало просто отлично:
this.domSanitizer.bypassSecurityTrustHtml(content);
Теперь я возвращаю объект обратно
SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity
Есть ли новый способ доступа к выходному файлу DomSanitizer? Должен ли я получать его как типа SafeHTML или что-то еще? Какой смысл иметь bypassSecurityTrustHtml, если он по-прежнему фильтрует html?
Любые ответы на открытку? Пожалуйста,...
Ответы
Ответ 1
DEMO: https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
console.log(this.sanitized.bypassSecurityTrustHtml(value))
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
@Component({
selector: 'my-app',
template: `
<div [innerHtml]="html | safeHtml">
</div>
`,
})
export class App {
name:string;
html: safeHtml;
constructor() {
this.name = 'Angular2'
this.html = "<svg> blah </svg>";
}
}
Ответ 2
Используйте DomSanitizer.bypassSecurityTrustHtml
:
constructor(private sanitizer: DomSanitizer) {
}
let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");
Дополнительная информация: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis