This question already has answers here:
Adding script tags in Angular component template
                                
                                    (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

07-24 09:47
查看更多