fix(common): Allow safeUrl for ngSrc in NgOptimizedImage (#51351)

atcastle · AndrewKushnir · commit a43c0772ea74 · 2023-08-17T10:20:36.000-07:00
Allow safeUrl and add transformer to immediately convert ngSrc to string PR Close #51351
diff --git a/goldens/public-api/common/index.md b/goldens/public-api/common/index.md
@@ -617,6 +617,8 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_height: unknown;
     // (undocumented)
+    static ngAcceptInputType_ngSrc: string | i1_2.SafeValue;
+    // (undocumented)
     static ngAcceptInputType_priority: unknown;
     // (undocumented)
     static ngAcceptInputType_width: unknown;
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {booleanAttribute, Directive, ElementRef, inject, InjectionToken, Injector, Input, NgZone, numberAttribute, OnChanges, OnDestroy, OnInit, PLATFORM_ID, Renderer2, SimpleChanges, ɵformatRuntimeError as formatRuntimeError, ɵRuntimeError as RuntimeError} from '@angular/core';
+import {booleanAttribute, Directive, ElementRef, inject, InjectionToken, Injector, Input, NgZone, numberAttribute, OnChanges, OnDestroy, OnInit, PLATFORM_ID, Renderer2, SimpleChanges, ɵformatRuntimeError as formatRuntimeError, ɵRuntimeError as RuntimeError, ɵSafeValue as SafeValue, ɵunwrapSafeValue as unwrapSafeValue} from '@angular/core';
 
 import {RuntimeErrorCode} from '../../errors';
 import {isPlatformServer} from '../../platform_id';
@@ -245,7 +245,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
    * Image name will be processed by the image loader and the final URL will be applied as the `src`
    * property of the image.
    */
-  @Input({required: true}) ngSrc!: string;
+  @Input({required: true, transform: unwrapSafeUrl}) ngSrc!: string;
 
   /**
    * A comma separated list of width or density descriptors.
@@ -993,3 +993,12 @@ function assertNoLoaderParamsWithoutLoader(dir: NgOptimizedImage, imageLoader: I
 function round(input: number): number|string {
   return Number.isInteger(input) ? input : input.toFixed(2);
 }
+
+// Transform function to handle SafeValue input for ngSrc. This doesn't do any sanitization,
+// as that is not needed for img.src and img.srcset. This transform is purely for compatibility.
+function unwrapSafeUrl(value: string|SafeValue): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  return unwrapSafeValue(value);
+}
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -11,6 +11,7 @@ import {RuntimeErrorCode} from '@angular/common/src/errors';
 import {PLATFORM_SERVER_ID} from '@angular/common/src/platform_id';
 import {Component, PLATFORM_ID, Provider, Type} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {withHead} from '@angular/private/testing';
 
@@ -720,6 +721,30 @@ describe('Image directive', () => {
         fixture.detectChanges();
       }).not.toThrowError(new RegExp('was updated after initialization'));
     });
+    it('should accept a safeUrl ngSrc value', () => {
+      @Component({
+        selector: 'test-cmp',
+        template: `<img
+              [ngSrc]="bypassImage"
+              width="400"
+              height="600"
+            >`
+      })
+      class TestComponent {
+        rawImage = `javascript:alert("Hi there")`;
+        bypassImage: SafeResourceUrl;
+        constructor(private sanitizer: DomSanitizer) {
+          this.bypassImage = sanitizer.bypassSecurityTrustResourceUrl(this.rawImage);
+        }
+      }
+      setupTestingModule({component: TestComponent});
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      let nativeElement = fixture.nativeElement as HTMLElement;
+      let img = nativeElement.querySelector('img')!;
+      expect(img.src).toContain(`${IMG_BASE_URL}/javascript:alert`);
+    });
   });
 
   describe('lazy loading', () => {
