0

我有一个返回 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>
4

1 回答 1

2

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)

在此处输入图像描述

于 2021-07-10T09:09:34.763 回答