Angular 5对含HTML与JS的WebAPI JSON响应进行安全清理的问题

我来给你理顺这个问题的解决方案，毕竟从AngularJS转到Angular5，安全机制的变化确实容易踩坑。你现在遇到的核心问题是Angular默认会自动清理HTML中的危险内容（比如onclick这类事件属性），导致API返回的带JS函数的锚点标签无法正常工作，下面分两种场景给你解决思路：

场景1：无法修改现有WebAPI返回格式 #

如果因为历史原因没法改API的返回结构，只能直接处理返回的HTML字符串，那可以用Angular的DomSanitizer来标记这段HTML为安全内容，具体步骤如下：

1. 在组件中导入依赖 #

首先在你的菜单组件里导入DomSanitizer和SafeHtml类型：

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

2. 注入DomSanitizer并处理HTML #

在组件的构造函数中注入DomSanitizer，然后把API返回的HTML字符串转换成Angular认可的安全HTML：

@Component({
  selector: 'app-dynamic-menu',
  templateUrl: './dynamic-menu.component.html',
  styleUrls: ['./dynamic-menu.component.css']
})
export class DynamicMenuComponent implements OnInit {
  safeMenuHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // 模拟从WebAPI获取的响应内容
    const apiResponseHtml = '<a href="#" title="Recommend to" onclick="&quot;fnShowMyRecommendedUsers(\'http://localhost:4200/MyReCommendedUsersParams/true/Contentid/34cac8bf-01a8-49d3-9251-a39eb94e2563/userid/1\')&quot;">Recommend to</a>';
    
    // 标记HTML为安全，绕过默认的sanitize机制
    this.safeMenuHtml = this.sanitizer.bypassSecurityTrustHtml(apiResponseHtml);
  }

  // 别忘了定义API返回的JS函数（要全局可访问或者在组件中声明后挂到window上）
  ngAfterViewInit(): void {
    // 把组件内的函数挂载到window，让HTML中的onclick能调用到
    (window as any).fnShowMyRecommendedUsers = (url: string) => {
      // 这里实现你的业务逻辑，比如跳转到对应路由或者处理参数
      console.log('跳转URL:', url);
      // 示例：用Angular Router跳转
      // this.router.navigateByUrl(url);
    };
  }
}

3. 在模板中绑定安全HTML #

在组件的模板文件里，用[innerHTML]来绑定处理后的安全HTML：

<div [innerHTML]="safeMenuHtml"></div>

⚠️ 注意：这种方法要确保WebAPI返回的HTML是完全可信的，否则可能引入XSS攻击风险。如果API内容不可控，建议用下面的场景2方案。

场景2：可以调整WebAPI返回格式（推荐） #

这是更符合Angular最佳实践的方案——把API返回的内容改成结构化数据，而不是直接返回HTML字符串，这样完全不需要处理安全清理问题。

1. 让API返回结构化JSON #

比如让WebAPI返回这样的菜单数据：

{
  "menuItems": [
    {
      "text": "Recommend to",
      "title": "Recommend to",
      "clickParams": {
        "targetUrl": "http://localhost:4200/MyReCommendedUsersParams/true/Contentid/34cac8bf-01a8-49d3-9251-a39eb94e2563/userid/1"
      }
    }
  ]
}

2. 在Angular组件中动态生成菜单 #

在组件里接收结构化数据，然后用Angular的模板语法动态渲染菜单，并绑定组件内的事件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

interface MenuItem {
  text: string;
  title: string;
  clickParams: { targetUrl: string };
}

@Component({
  selector: 'app-dynamic-menu',
  templateUrl: './dynamic-menu.component.html',
  styleUrls: ['./dynamic-menu.component.css']
})
export class DynamicMenuComponent implements OnInit {
  menuItems: MenuItem[] = [];

  constructor(private router: Router) { }

  ngOnInit(): void {
    // 模拟从WebAPI获取结构化菜单数据
    this.menuItems = [
      {
        text: "Recommend to",
        title: "Recommend to",
        clickParams: {
          targetUrl: "http://localhost:4200/MyReCommendedUsersParams/true/Contentid/34cac8bf-01a8-49d3-9251-a39eb94e2563/userid/1"
        }
      }
    ];
  }

  // 组件内的点击事件处理函数
  fnShowMyRecommendedUsers(targetUrl: string): void {
    // 这里实现你的业务逻辑，比如用Angular Router跳转
    console.log('处理推荐用户逻辑，目标URL:', targetUrl);
    this.router.navigateByUrl(targetUrl);
  }
}

3. 模板中渲染菜单 #

用*ngFor遍历菜单数据，绑定点击事件：

<div *ngFor="let item of menuItems">
  <a href="#" [title]="item.title" (click)="fnShowMyRecommendedUsers(item.clickParams.targetUrl); $event.preventDefault()">
    {{item.text}}
  </a>
</div>

这种方案既安全（完全避免了HTML注入风险），又符合Angular的组件化和数据驱动思想，后期维护也更方便。

内容的提问来源于stack exchange，提问作者Surya Kumar