我一直在 html 字符串中使用 DomSanitizer 和 SVG。
在当前版本的 Angular 之前,这工作得很好:
this.domSanitizer.bypassSecurityTrustHtml(content);
现在我正在取回一个名为
的对象SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity
现在有新的方法来访问 DomSanitizer 的输出吗?我应该以 SafeHTML 类型或其他类型接收它吗?如果bypassSecurityTrustHtml仍然过滤html,那还有什么意义呢?
明信片上有答案吗?请...
演示: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>";
}
}
对于这个问题,您可以访问这里
我们可以添加自定义的消毒管道并在全球范围内使用。如果你的 HTML 没有正确清理,那么内部 html 会忽略 svg、第三方 url 等,所以我们可以像下面这样修复它:
hero.component.html:
<div [innerHTML]="htmlString | sanitizedHtml"></div>
hero.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
htmlString: any;
constructor() { }
ngOnInit(): void {
this.htmlString = `
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
</div>`;
}
}
sanitized-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value: any): any {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
使用
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
这也可以通过对象括号表示法来完成:
let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);
console.log(safeHtml["changingThisBreaksApplicationSecurity");
必须这样做,因为
safeHtml.changingThisBreaksApplicationSecurity
对我不起作用。
constructor(private fb: FormBuilder, private cdRef: ChangeDetectorRef, public router: Router, private sanitizer: DomSanitizer) {
this.signInFields = signInFields.map(link => ({
...link,
icon: link.icon ? this.sanitizer.bypassSecurityTrustHtml(link.icon) : undefined
}));
}
它对我有用。