使用 JavaScript 在 Angular2 中绕过SecurityTrustHtml 和 bypassSecurityTrustScript答案

【问题标题】：bypassSecurityTrustHtml and bypassSecurityTrustScript in Angular2 with JavaScript使用 JavaScript 在 Angular2 中绕过SecurityTrustHtml 和 bypassSecurityTrustScript
【发布时间】：2017-08-07 06:05:38
【问题描述】：

我正在尝试通过组件在我的 Angular2 文件中执行 javascript 函数。但我无法让它工作。

这就是我的 ts 文件的样子。

import { Component, OnInit, Input } from '@angular/core';
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

import { JavaScriptService } from './javascript.service';

@Component({
  selector: 'app-javascript',
  template: `
     <div [innerHtml]="html"></div>
  `
})
export class JavaScriptService{

  html: any;

  constructor(private sanitizer: DomSanitizer) {

  this.html = sanitizer.bypassSecurityTrustHtml(`<div><script type="text/javascript"> alert('h');</script></div>`);

  }

}

这是 Angular 在浏览器中呈现页面时 html 的外观（我检查了元素）

<div ng-reflect-inner-h-t-m-l="<div><script type=&quot;text/javascript&quot;> alert('h');</script></div>">
<div><script type="text/javascript"> alert('h');</script></div>
</div>

我不明白为什么在页面加载后没有执行警报。

我已经尝试过 bypassSecurityTrustHtml 和 bypassSecurityTrustScript 但没有运气。如果有人对此有解决方案，我将不胜感激。

谢谢！

【问题讨论】：

AFAIK 脚本标签无法使用innerHTML 添加。添加脚本标签的方法见stackoverflow.com/questions/38088996/…。
我也需要这方面的帮助。
解决了吗？

标签： javascript angular

【解决方案1】：

我以前在您的 .ts 文件中看到过这样做。

它会执行你的脚本标签。

const fragment = document.createRange().createContextualFragment(yourHtmlString); document.body.appendChild(fragment);

即使它有效，但我得到这个问题 SafeValue must use [property]=binding: (see http://g.co/ng/security#xss) 被附加到我的页面，所以我正在努力解决这个问题。

【讨论】：