Support Web-Workers when enforcing Trusted Types in @angular/build:application builder

[Khyalis]

Command

build

Description

It is possible to create a web worker using the new Worker(new URL('<workerfile>', import.meta.url)) syntax, and in the build output, the url will be replaced, so the worker script can be downloaded.

However, when additionally enforcing Trusted Types, at runtime an error can occur: "TypeError: Failed to construct 'Worker': This document requires 'TrustedScriptURL' assignment.", as the emitted script code would attempt to instantiate the Worker using an URL instance rather than a TrustedScriptUrl.

While working around the TypeError e.g. by employing the Angular DomSanitizer like this: new Worker(this.#sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.#sanitizer.bypassSecurityTrustResourceUrl(new URL('<workerfile>', import.meta.url).toString()))), might prevent the TypeError, it would also break the replacement of the worker url.

It might be helpful, if there were a way of being able to use both the build-time replacement of the worker url and TrustedScriptUrl.

Describe the solution you'd like

No response

Describe alternatives you've considered

I have considered trying if switching to a builder different from @angular/build:application might provide better support for the use case.
I have considered disabling the enforcement of Trusted Types.
I have considered moving the worker script to a static url that can be used without replacement at build type.

[alan-agius4]

Note: TrustedScriptUrl is not supported by all the browsers.

See: https://developer.mozilla.org/en-US/docs/Web/API/TrustedScriptURL

[Khyalis]

I think, on browsers without support, Trusted Types might be silently ignored.

And I may have misinterpreted the statments on https://angular.dev/best-practices/security#direct-use-of-the-dom-apis-and-explicit-sanitization-calls regarding using DomSanitizer.sanitize() to call DOM APIs. It is only refering to the case of Trusted Types being not enforced.

Anyway, I think I may have found a (rather crude) work-around that might solve my use-case:

      const createWorker: WorkerConstructor = function (scriptURL: string | URL, options?: WorkerOptions) {
        const trustedUrl = ensurePolicy()?.createScriptURL(scriptURL.toString()) ?? scriptURL;
        const worker = new Worker(trustedUrl as string | URL, options)
        return worker;
      } as any;

      if (typeof Worker !== 'undefined') {
        const Worker = createWorker;

        const worker = new Worker(new URL('./authentication.worker', import.meta.url));
        ...
      } else {
        // Web workers are not supported in this environment.
        // You should add a fallback so that your program still executes correctly.
      }

This appears to apply the replacement during build (const worker = new Worker2(new URL("worker-NG5UFCQG.js", import.meta.url), { type: "module" });), while also creating a TrustedScriptUrl, if the TrustedTypePolicy feature is supported.

Should I withdraw the suggestion?

In that case, sorry for wasting your time.