CODEWITHSUNDEEP
angulartypescriptangular-dom-sanitizer
JustinZ
JustinZ

Reputation: 41

Different output from DomSanitizer bypassSecurityTrustHtml on null value angular 12

I've just updated an application I'm working on from angular 11 to 12. (also updated typscript from 4.0.5 to 4.3.5). We noticed a difference in the application, when before I had an empty value I now get the text "null" in my application.

enter image description here

I've narrowed down where the problem occurs and it boils down to this: (I've hardcoded the null value for demo purpose)

<div>
  <span [innerHTML]="null | sanitizeHtml"></span>
</div>

The pipe code:

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

So the safeHtml object returned by the bypassSecurityTrustHtml seems to have changed, or the method has changed in dealing with a null value. Can anyone explain this behavior?

EDIT

A stackblitz for reproducing the issue: https://stackblitz.com/edit/angular-v12-ejwhmd?file=package.json

EDIT 2

Created a bug for angular https://github.com/angular/angular/issues/43794

Upvotes: 0

Views: 2508

Answers (1)

JustinZ
JustinZ

Reputation: 41

This question is answered in my bug issue (https://github.com/angular/angular/issues/43794).

Summary: most likely due to typesafety improvements null is no longer excpected in the method signature of the bypassSecurityTrustHtml. Therefore null is treated a bit different then before. It will now render like a text instead of actual null.

Workaround would be to address possible null values yourself before passing it to the bypassSecurityTrustHtml. https://stackblitz.com/edit/angular-v12-zn77kb?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

Related Questions