This question already has answers here:
Adding script tags in Angular component template
(5个答案)
2年前关闭。
我试图在角度组件DOM中注入HTML模板。这些HTML模板包含
template.html
当我在
test-comp.component.ts
组件HTML如下所示:
test-comp.component.html
这将在DOM中正确注入模板,但是
如果我使用jQuery将相同的模板注入到相同的组件中,则将实现
test-comp.component.ts
对于这种现象有什么解释吗?我有兴趣知道区别!以及为什么jQuery可以工作?
注意:我的问题没有用这个question重复,因为有人问它,因为我在问:为什么它用
(5个答案)
2年前关闭。
我试图在角度组件DOM中注入HTML模板。这些HTML模板包含
<div>
-标签和<script>
-标签。template.html
<div>Some Text</div>
<script>(function() { alert("I am here!"); })()</script>
当我在
TestComponent
中使用纯角度进行此操作时。test-comp.component.ts
@Component({
selector: "[test-comp]",
templateUrl: "./test-comp.component.html",
styleUrls: ["./test-comp.component.css"]
})
export class TestComponent implements OnInit {
private _snippet: SafeHtml;
get snippet(): SafeHtml { return this._snippet; }
constructor(
private domSanitizer: DomSanitizer
) {}
ngOnInit() {
const template: string = require("module/dist/template.html");
this._snippet = this.domSanitizer.bypassSecurityTrustHtml(template);
}
}
组件HTML如下所示:
test-comp.component.html
<div id="some_id" [innerHTML]="snippets"></div>
这将在DOM中正确注入模板,但是
<script>
标签将不会实现,也不会发出任何警报。如果我使用jQuery将相同的模板注入到相同的组件中,则将实现
<script>
-tag并将警告文本。test-comp.component.ts
@Component({
selector: "[test-comp]",
templateUrl: "./test-comp.component.html",
styleUrls: ["./test-comp.component.css"]
})
export class TestComponent implements OnInit {
constructor(
) {}
ngOnInit() {
const template: string = require("module/dist/template.html");
$("#some_id").after(template);
}
}
对于这种现象有什么解释吗?我有兴趣知道区别!以及为什么jQuery可以工作?
注意:我的问题没有用这个question重复,因为有人问它,因为我在问:为什么它用
jQuery
渲染而不用domSanitizer
渲染。我不是在问:该怎么做? 最佳答案
Angular.io-HTML是Angular模板的语言。几乎所有HTML语法都是有效的模板语法。该元素是一个明显的例外。禁止这样做,消除了脚本注入攻击的风险。实际上,它会被忽略,并且浏览器控制台中会出现警告。有关详细信息,请参见Security页。
但是,您可以使用以下命令绕过安全性:DomSanitizer