Angular execute html type response from api call in dom?

Question

i have a node api(localhost:5000/ ) which returns html type response.

when i run localhost:5000/ in browser it execute the scripts from returned response from my api.below is my app.js file.

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}`));

The same thing i want to achieve via angular . i will call this api and i want the script from my response to get executed. how can i tell angular that my script is safe and can be trusted ? Have tried with innerhtml but doesnt work.

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

Answer 1

angular implement good layer to act like antixss, for this reason, it didn't process the content retrieved from the backend which contains script because maybe this script contains malicious code and this is considered a big security risk since xss is considered OWASP top 10 for many years and if your application goes for penetration test will not pass at all because xss is high rated risk in OWASP.

but if you want to proceed you can like this

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() {

  }

}

and in first.component.html add the below line

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

this need also little workaround in server-side to return script over SVG onload event like below

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