How to sanitize html in angular for avoiding XSS vulnerabilities-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>