如何以角度清理 h​​tml 以避免 XSS 漏洞

Question

Getting XSS vulnerabilities while accessing API call and accessing in HTML page. Tried with DOM sanitizer with url and Sanitized html as well, still getting XSS Cross site scripting issues. Tried with below way. Please correct me if anything is wrong and suggest me the solution.

const dataUrl = this.domSanitizer.sanitize(
      SecurityContext.RESOURCE_URL,
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json'
      )
    );

html:

   <td [innerHTML]="person.id | sanitizeHtml"></td>
   <td [innerHTML]="person.firstName | sanitizeHtml"></td>
   <td [innerHTML]="person.lastName | sanitizeHtml"></td> 

Stackblitz

Answer 1

Are these HTML type string you are putting in here? if they are normal string that don't contain HTML content then you should use the normal syntax with curly braces.

<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td> 

Answer 2

You can use innerText instead of innerHTML to solve this issue :).

Your HTML will look like this:

   <td [innerText]="person.id"></td>
   <td [innerText]="person.firstName"></td>
   <td [innerText]="person.lastName"></td>