如何在Angular中使用DomSanitizer执行字符串脚本

你遇到的核心问题是：DomSanitizer.bypassSecurityTrustScript() 并不会自动执行脚本，它的作用仅仅是告诉Angular「这段脚本是安全的，可以在允许的上下文里使用」，而不是直接运行代码。下面给你两种可靠的实现方式：

方法一：手动执行脚本（适合简单场景） #

如果你的脚本是完全受信任的，可以通过eval或者Function构造器来执行。注意：只有当你100%确定脚本来源安全时才用这种方式，避免XSS风险。

修改你的组件代码如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private domSanitizer: DomSanitizer) {}

  test(){
    let code: string = "console.log('Hello World')";
    // 标记脚本为安全
    const safeScript: SafeScript = this.domSanitizer.bypassSecurityTrustScript(code);
    // 方式1：使用eval执行
    eval(safeScript.changingThisBreaksApplicationSecurity);
    // 方式2：使用Function构造器（相对更安全，避免污染全局作用域）
    new Function(safeScript.changingThisBreaksApplicationSecurity)();
  }
}

这里的changingThisBreaksApplicationSecurity是Angular为安全值对象提供的属性，用来获取原始的脚本内容，名字虽然夸张，但这是官方指定的获取方式。

方法二：动态创建Script元素（更可靠） #

很多浏览器不会执行通过innerHTML插入的<script>标签，所以更稳妥的方式是动态创建script元素并插入到DOM中：

test(){
  let code: string = "console.log('Hello World')";
  const safeScript: SafeScript = this.domSanitizer.bypassSecurityTrustScript(code);
  
  // 创建script元素
  const scriptEl = document.createElement('script');
  // 赋值安全脚本内容
  scriptEl.textContent = safeScript.changingThisBreaksApplicationSecurity;
  // 添加到body执行
  document.body.appendChild(scriptEl);
  // 执行完成后可以移除元素，避免重复执行
  document.body.removeChild(scriptEl);
}

关键注意事项 #

• bypassSecurityTrustScript的核心作用是绕过Angular的安全检查，让脚本可以被用于安全上下文，而不是执行脚本。执行必须手动触发。
• 永远不要执行不可信的脚本，这会带来严重的XSS安全风险。只有当脚本来源完全可控、可信时才使用这些方法。

内容的提问来源于stack exchange，提问作者Ka Tech