Different output from DomSanitizer bypassSecurityTrustHtml on null value angular 12

Question

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.

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

not reproducible with information given (stackblitz.com/edit/…). dom sanitizer handles null as it always did. something else in your code is converting it to a string before it reaches the pipe. — bryan60
– bryan60, Commented Oct 7, 2021 at 15:05
@bryan60 Well... as said, the problem showed after updating angular from 11 to 12. In your stackblitz you are using angular 10, so no then problem won't show. I will update the question with a stackblitz for reproducing. — JustinZ
– JustinZ, Commented Oct 8, 2021 at 7:05

JustinZ · Accepted Answer · 2021-10-11 09:58:25Z

1

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

answered Oct 11, 2021 at 9:58

JustinZ

411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Different output from DomSanitizer bypassSecurityTrustHtml on null value angular 12

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related