Trusted Types support

[Siegrift]

Feature Proposal

Hello,

I propose adding Trusted Types support which are already supported by Webpack 5. From my research, the only place that would need to be changed is showing the error overlay. The HTML markup of the error is added to the DOM via innerHTML which causes a Trusted Types violation. For applications with Trusted Types enforcement enabled this causes a browser error and the markup is not added to the DOM (so the error is not shown to the user).

The solution is to pass the value assigned to the innerHTML through a Trusted Types policy. This could be done in backwards compatible way by checking if Trusted Types are available in a current browser. This could work roughly like this:

1. Check if Trusted Types API is available in the current browser.
2. If not, assign the value through innerHTML property same as of now.
3. If yes, get (or create) a Trusted Types policy - We want to create a policy one once, because when applications enforce Trusted Types via CSP, creating a policy with same name throws an error unless the 'allow-duplicates' is enabled. This policy would only allow createHTML operation.
4. Pass the value to createHTML function of the policy and assign the return value (TrustedHTML) to the innerHTML.

There are no observable changes for applications which do not enforce Trusted Types via a CSP header because in that case the Trusted Types is "API only" and any policy can be created. Applications which enforce Trusted Types and restrict which policies can be created need to explicitly allow this policy in the CSP header. The name of the policy could be configurable by creating a new property in the overlay configuration options.

Feature Use Case

The purpose of this feature is to enable development of applications which use Webpack and webpack-dev-server, for example applications created by create-react-app and many others.

Please paste the results of npx webpack-cli info here, and mention other relevant information

I have already experimented with this change and created a fixed name policy called webpack-dev-server#overlay. I've then created a simple React application via CRA which use this as a dependency. See:

• webpack-dev-server changes = Siegrift@045d02a
• example CRA application changes = Siegrift/tt-cra-app@6cd7681

I'm happy to implement these changes upstream. Please, let me know if there is any more context or information you want me to provide :).

[alexander-akait]

Yes, sounds good PR welcome, looks like it is not hard

[alexander-akait]

Implemented