fix(youtube-player): use safevalues (#30773)

Author: andrewseguin

.aspect/rules/external_repository_action_cache/npm_translate_lock_MzA5NzUwNzMx

@@ -3,8 +3,8 @@
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=-1406867100
 integration/package.json=-620011313
-package.json=-2075832703
-pnpm-lock.yaml=-986459546
+package.json=1797122117
+pnpm-lock.yaml=1639985799
 pnpm-workspace.yaml=334858811
 src/cdk-experimental/package.json=237487315
 src/cdk/package.json=-908433069
@@ -18,5 +18,5 @@ src/material-luxon-adapter/package.json=-199007660
 src/material-moment-adapter/package.json=-1407689629
 src/material/package.json=-1237533685
 src/universal-app/package.json=346715231
-src/youtube-player/package.json=68300461
-yarn.lock=-710001387
+src/youtube-player/package.json=1069986537
+yarn.lock=1826047937

package.json

@@ -68,7 +68,8 @@
     "rxjs": "^6.6.7",
     "rxjs-tslint-rules": "^4.34.8",
     "tslib": "^2.3.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.15.0",
+    "safevalues": "^1.2.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^20.0.0-next.4",

pkg-externals.bzl

@@ -49,6 +49,8 @@ PKG_EXTERNALS = [
     "rxjs",
     "rxjs/operators",
     "selenium-webdriver",
+    "safevalues",
+    "safevalues/dom",
 ]
 
 # Creates externals for a given package and its entry-points.

pnpm-lock.yaml

@@ -38,6 +38,7 @@ ng_project(
         "//:node_modules/@angular/core",
         "//:node_modules/@types/youtube",
         "//:node_modules/rxjs",
+        "//:node_modules/safevalues",
         "//src:dev_mode_types",
     ],
 )

src/youtube-player/BUILD.bazel

@@ -18,7 +18,8 @@
   "homepage": "https://github.com/angular/components/tree/main/src/youtube-player#readme",
   "dependencies": {
     "@types/youtube": "^0.1.0",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "safevalues": "^1.2.0"
   },
   "peerDependencies": {
     "@angular/core": "0.0.0-NG",

src/youtube-player/package.json

@@ -32,6 +32,8 @@ import {
   EventEmitter,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
+import {trustedResourceUrl} from 'safevalues';
+import {setScriptSrc} from 'safevalues/dom';
 import {Observable, of as observableOf, Subject, BehaviorSubject, fromEventPattern} from 'rxjs';
 import {takeUntil, switchMap} from 'rxjs/operators';
 import {PlaceholderImageQuality, YouTubePlayerPlaceholder} from './youtube-player-placeholder';
@@ -743,7 +745,7 @@ function loadApi(nonce: string | null): void {
   }
 
   // We can use `document` directly here, because this logic doesn't run outside the browser.
-  const url = 'https://www.youtube.com/iframe_api';
+  const url = trustedResourceUrl`https://www.youtube.com/iframe_api`;
   const script = document.createElement('script');
   const callback = (event: Event) => {
     script.removeEventListener('load', callback);
@@ -759,7 +761,7 @@ function loadApi(nonce: string | null): void {
   };
   script.addEventListener('load', callback);
   script.addEventListener('error', callback);
-  (script as any).src = url;
+  setScriptSrc(script, url);
   script.async = true;
 
   if (nonce) {

src/youtube-player/youtube-player.ts

@@ -12152,6 +12152,11 @@ safe-stable-stringify@^2.3.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+safevalues@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/safevalues/-/safevalues-1.2.0.tgz#f9e646d6ebf31788004ef192d2a7d646c9896bb2"
+  integrity sha512-zIsuhjYvJCjfsfjoim2ab6gLKFYAnTiDSJGh0cC3T44L/4kNLL90hBG2BzrXPrHA3f8Ms8FSJ1mljKH5dVR1cw==
+
 sass-loader@16.0.5:
   version "16.0.5"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-16.0.5.tgz#257bc90119ade066851cafe7f2c3f3504c7cda98"