javascript - 使用 JavaScript 在 Angular2 中绕过 SecurityTrustHtml 和绕过 SecurityTrustScript

Question

我正在尝试通过组件在我的 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，但没有成功。如果有人对此有解决方案，我将不胜感激。

谢谢!

Answer 1

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

它将执行您的脚本标签。

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

即使它有效，我还是遇到了这个问题 SafeValue must use [property]=binding: (see http://g.co/ng/security#xss ) being appended to my page 所以我正在努力解决这个问题。