Cannot bind undefined to safe resource URL property

[fuzzykiller]

Bug Report

Affected Package

The issue is eventually caused by this code:

angular/packages/core/src/sanitization/sanitization.ts

Lines 111 to 121 in 3de774e

	export function ɵɵsanitizeResourceUrl(unsafeResourceUrl: any): TrustedScriptURL|string {
	const sanitizer = getSanitizer();
	if (sanitizer) {
	return trustedScriptURLFromStringBypass(
	sanitizer.sanitize(SecurityContext.RESOURCE_URL, unsafeResourceUrl) || '');
	}
	if (allowSanitizationBypassAndThrow(unsafeResourceUrl, BypassType.ResourceUrl)) {
	return trustedScriptURLFromStringBypass(unwrapSafeValue(unsafeResourceUrl));
	}
	throw new Error('unsafe value used in a resource URL context (see https://g.co/ng/security#xss)');
	}

Is this a regression?

Probably not. However, Angular 11 compiled to ES5 (old-style config for legacy browsers, without differential loading) behaves differently.

Description

This template HTML compiles on strict mode:

<iframe [src]="undefined"></iframe>

It will, however, throw an exception at runtime or in tests at fixture.detectChanges();.

I believe undefined is not an unsafe value. However, it probably should not be tested with the sanitizer in the first place.

Minimal Reproduction

https://github.com/fuzzykiller/ng-sanitizer-problem

Run npm i and ng test to see error.

Exception or Error

Error: unsafe value used in a resource URL context (see https://g.co/ng/security#xss)
    at ɵɵsanitizeResourceUrl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5984:1)
    at elementPropertyInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10000:1)
    at ɵɵproperty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:14760:1)
    at AppComponent_Template (ng:///AppComponent.js:6:21)
    at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9575:1)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9441:1)
    at refreshComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10612:1)
    at refreshChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9238:1)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9491:1)
    at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9555:1)

Your Environment

Angular Version:

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 6.14.8
OS: win32 x64

Angular: 12.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

Not that I can think of.

[joeskeen]

I don't love this, but I'm using this as a workaround. Instead of setting the variable to undefined, I set it to this.domSanitizer.bypassSecurityTrustResourceUrl('about:blank') when the URL is supposed to be undefined.