node.js - Angular从dom中的api调用执行html类型响应？

Question

我有一个返回 html 类型响应的节点 api(localhost:5000/)。

当我在浏览器中运行 localhost:5000/ 时，它会从我的 api 返回的响应中执行脚本。下面是我的 app.js 文件。

const http = require("http");
const server = http.createServer((req, res) => {
  const { headers, url, method } = req;
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Content-Type", "text/html");
  res.end(`<script>alert('test');</script>`);
});
const PORT = 5000;
server.listen(PORT, () => console.log(`Server running on ${PORT}`));

我想通过 angular 实现同样的事情。我将调用这个 api，我希望我的响应中的脚本被执行。我如何告诉 Angular 我的脚本是安全的并且可以信任？已尝试使用 innerhtml 但不起作用。

 <div class="adv" [innerHtml]="htmlToAdd"></div>

标签： node.jsangularsanitizationangular-dom-sanitizer

Answer 1

Angular 实现了很好的层来充当 antixss，因此，它没有处理从后端检索到的包含脚本的内容，因为这个脚本可能包含恶意代码，这被认为是一个很大的安全风险，因为 xss 被认为是 OWASP 前 10 名多年，如果您的应用程序进行渗透测试将根本无法通过，因为 xss 在 OWASP 中具有高风险。

但如果你想继续，你可以喜欢这个

import { Component, Inject, OnInit, SecurityContext } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(private http: HttpClient, private sanitizer: DomSanitizer, @Inject(DOCUMENT) private document: any) {
    this.getScriptFromBackend()
      .subscribe(data => {
        document.getElementById("myScriptLoader").innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml(data.html));

      });

  }

  getScriptFromBackend(): Observable<any> {
    return this.http.get('http://localhost:3000/test').pipe()

  }
  ngOnInit() {

  }

}

并在 first.component.html 添加以下行

<div  id="myScriptLoader"></div>

这在服务器端也需要很少的解决方法来通过 SVG onload 事件返回脚本，如下所示

  var result={'html':'<svg onload=\"alert(123)\">  </svg>'};
  res.send(result)