这是我的问题,我想在 HTML 模板中包含一个链接到外部网站的按钮。但是,当读取 HTML 时,谷歌浏览器会说:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
Angular 2 的 innerHTML 属性似乎不允许 2 个递归 HTML 绑定(bind)。
这是我的代码:
<ion-col width-80 innerHtml="{{ slide.content + '<p><button round full (click)=`'
+ slide.button.url +'`>'+slide.button.text+'</button>' }}"></ion-col>
(click)属性被删除,只有(slide.button.text)
显示为单个文本。
有什么解决办法吗?
slide
是这样的:
{
img: 'img/picture.png',
content: `sometext`,
button : {
url: `http://www.foo.com`,
text: `Site foo`
}
}
最佳答案
注意:我不知道 ion
的东西,所以将它更改为 HTML control
。将 button
更改为 a (link)
控件。
您可以使用 DomSanitizationService
,如下所示,
工作演示:http://plnkr.co/edit/y2BXvIO8egNxJPmM3j43?p=preview
//our root app component
import {Component, Pipe} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
<span [innerHTML]="myHTML"></span>
`,
})
export class AppComponent {
slide={
img: 'img/picture.png',
content: `sometext`,
button : {
url: `http://www.foo.com`,
text: `Site foo`
}
};
dangerousUrl='<p><a href='+`${this.slide.button.url}`+'>'+`${this.slide.button.text}`+'</a></p>';
constructor(sanitizer: DomSanitizationService) {
this.myHTML= sanitizer.bypassSecurityTrustHtml(this.dangerousUrl);
}
}
关于angular - 递归 Angular 2 HTML 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38853722/