运行 如何在 Angular 中使用 DomSanitzer bypassSecurityTrustScript() 将脚本作为字符串
How run script as string using DomSanitzer bypassSecurityTrustScript() in Angular
我有一个字符串格式的受信任 Javascript/Angular 脚本,我想在 angular 组件中执行它。我明白这就是 Domsanitizer bypassSecurityTrustScript() 所做的。 Angular Domsanitizer
然而,当尝试在我的组件中 运行 时,没有任何反应。我如何使用它来 运行 来自字符串的 js 代码?这是我到目前为止所做的,在下面和 stackblitz Custom Script StackBlitz 提前致谢。
mycomponent.ts
constructor(private domSanitizer: DomSanitizer)
test(){
let code: string = "console.log('Hello World')";
this.domSanitzer.bypassSecurityTrustScript(code);
}
bypassSecurityTrustScript
不应该 运行 任何东西。它所做的唯一一件事就是将提供的值包装到 SafeScript 中,以便在模板绑定中使用它时绕过清理。
它不对值执行任何转换。
Official documentation 展示了如何使用样式、URL 和 HTML 的相似值。这就是事情变得有点奇怪的地方。
似乎可以像这样在模板中使用 SafeScript 值:
<script [innerHtml]="safeScript"></script>
但实际上它不起作用,因为 Angular wipes out 来自模板的所有 <script>
标签。
请记住,运行从字符串中获取 JS 存在安全风险,因此在执行此操作之前应三思。
如果没有其他方法可以执行此操作,则可以使用更“传统”的 JS 方法来执行此操作,包括 eval
and Function constructor.
也可以将 <script>
直接添加到 DOM(通过使用全局 document
对象或 Rendered)
import { Component, Renderer2, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
//...
export class ButtonOverviewExample {
constructor(
private renderer: Renderer2,
@Inject(DOCUMENT) private document: HTMLDocument
) {}
test() {
const script = this.renderer.createElement("script");
this.renderer.setProperty(
script,
"text",
"console.log('Hello World')"
);
// It will add a new `<script>` on each call
this.renderer.appendChild(this.document.body, script);
}
}
我有一个字符串格式的受信任 Javascript/Angular 脚本,我想在 angular 组件中执行它。我明白这就是 Domsanitizer bypassSecurityTrustScript() 所做的。 Angular Domsanitizer
然而,当尝试在我的组件中 运行 时,没有任何反应。我如何使用它来 运行 来自字符串的 js 代码?这是我到目前为止所做的,在下面和 stackblitz Custom Script StackBlitz 提前致谢。
mycomponent.ts
constructor(private domSanitizer: DomSanitizer)
test(){
let code: string = "console.log('Hello World')";
this.domSanitzer.bypassSecurityTrustScript(code);
}
bypassSecurityTrustScript
不应该 运行 任何东西。它所做的唯一一件事就是将提供的值包装到 SafeScript 中,以便在模板绑定中使用它时绕过清理。
它不对值执行任何转换。
Official documentation 展示了如何使用样式、URL 和 HTML 的相似值。这就是事情变得有点奇怪的地方。
似乎可以像这样在模板中使用 SafeScript 值:
<script [innerHtml]="safeScript"></script>
但实际上它不起作用,因为 Angular wipes out 来自模板的所有 <script>
标签。
请记住,运行从字符串中获取 JS 存在安全风险,因此在执行此操作之前应三思。
如果没有其他方法可以执行此操作,则可以使用更“传统”的 JS 方法来执行此操作,包括 eval
and Function constructor.
也可以将 <script>
直接添加到 DOM(通过使用全局 document
对象或 Rendered)
import { Component, Renderer2, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
//...
export class ButtonOverviewExample {
constructor(
private renderer: Renderer2,
@Inject(DOCUMENT) private document: HTMLDocument
) {}
test() {
const script = this.renderer.createElement("script");
this.renderer.setProperty(
script,
"text",
"console.log('Hello World')"
);
// It will add a new `<script>` on each call
this.renderer.appendChild(this.document.body, script);
}
}