Angular 2、DomSanitizer、绕过SecurityTrustHtml、SVG
Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
我一直在 html 字符串中使用带有 SVG 的 DomSanitizer。
在 Angular 的当前版本之前,这个工作得很好:
this.domSanitizer.bypassSecurityTrustHtml(content);
现在我正在取回一个名为
的对象
SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity
现在有访问 DomSanitizer 输出的新方法吗?我应该以 SafeHTML 类型或其他类型接收它吗?如果它仍然过滤 html,那么绕过 SecurityTrustHtml 有什么意义?
明信片上有答案吗?请...
使用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
演示: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>";
}
}
这也可以通过对象括号表示法来完成:
let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);
console.log(safeHtml["changingThisBreaksApplicationSecurity");
不得不这样做,因为 safeHtml.changingThisBreaksApplicationSecurity
对我不起作用。
对于该问题,您可以访问 here
我们可以添加自定义净化管道并在全球范围内使用。如果您的 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>`;
}
}
已消毒-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);
}
}
输出:
我一直在 html 字符串中使用带有 SVG 的 DomSanitizer。
在 Angular 的当前版本之前,这个工作得很好:
this.domSanitizer.bypassSecurityTrustHtml(content);
现在我正在取回一个名为
的对象SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity
现在有访问 DomSanitizer 输出的新方法吗?我应该以 SafeHTML 类型或其他类型接收它吗?如果它仍然过滤 html,那么绕过 SecurityTrustHtml 有什么意义?
明信片上有答案吗?请...
使用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
演示: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>";
}
}
这也可以通过对象括号表示法来完成:
let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);
console.log(safeHtml["changingThisBreaksApplicationSecurity");
不得不这样做,因为 safeHtml.changingThisBreaksApplicationSecurity
对我不起作用。
对于该问题,您可以访问 here
我们可以添加自定义净化管道并在全球范围内使用。如果您的 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>`;
}
}
已消毒-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);
}
}
输出: