Add TrustedHTML (from @types/trusted-types) to dangerouslySetInnerHTML

[azekeprofit]

If you use DomPurify with TrustedTypes, setting dangerouslySetInnerHTML requires faking the type:

<div dangerouslySetInnerHTML={{
   __html: parsed as unknown as string // hacking the type since Preact innerHTML doesn't list TrustedHTML as possible type
}} />

[rschristian]

Packages listed in devDependencies won't be available at runtime, and we won't be adding deps for the sake of types. Can you vendor this type by chance?

Edit: Does this just define a .toString() that gets called? I might prefer users calling that manually & passing the result in rather than the TrustedHTML object as it'll simplify the types situation.

[azekeprofit]

Trusted Types are browser DOM API so they will be available at runtime, and one of the few ways they will get it is something like DOMPurify which also uses same @types/trusted-types (which is planned to be integrated into Typescript's lib.dom.ts anyway).

Calling .toString() manually won't work because we need object to be Trusted Type at runtime on sites that are marked as Content-Security-Policy: trusted-types

[azekeprofit]

I can fake TrustedHTML like React does here, but i don't know where would that go in Preact

[rschristian]

Trusted Types are available at runtime, the TrustedHTML type, which you used above, will not be. That'll be a type error for every single consumer that doesn't happen to have @types/trusted-types installed at the moment, which I imagine is most.

which is planned to be integrated into Typescript's lib.dom.ts anyway

Our TS support is locked at v5.1 for the upcoming Preact 11 release line so we can't rely on this eventually making its way into lib.dom.ts. This will have to be vendored.

Calling .toString() manually won't work because we need object to be Trusted Type at runtime on sites that are marked as Content-Security-Policy: trusted-types

Gotcha, didn't realize that. Thanks!

[rschristian]

I can fake TrustedHTML like React does here, but i don't know where would that go in Preact

We have some vendored implementations here:

preact/src/dom.d.ts

Line 5 in f23272c

// Implementations of some DOM events that are not available in TS 5.1

Before or after, either works.

[azekeprofit]

I added empty TrustedHTML interface, will this work?

[rschristian]

An empty interface that isn't imported, so I doubt it? Is the result of DOMPurify assignable to that? It seems like it wouldn't be.

[azekeprofit]

I was looking into ways to make it work, but this has gone way beyond my Typescript skills.

The simpler/lazier solution would be to simply wait until it gets merged into lib.dom.ts and Preact adopts that version.

[rschristian]

No worries, and thanks for trying! I'll take a look when I can, maybe I can come up with a hack.

wait until it gets merged into lib.dom.ts and Preact adopts that version.

Unfortunately the minimum supported TS version should only change in a major version, and we've spent almost 6 years on v10... whilst I can't say I know what the future holds, we probably want to find a solution besides telling users to wait for v12 as that might be years away.

[rschristian]

Looked into this further tonight & unfortunately you're going to need to cast or patch Preact's types, we can't accommodate this.

We can't vendor the type, as it's a class so they'll never align, and you apparently can't override existing interface properties with module augmentation, so even users can't override it nicely. I don't think there's any other options available.

Going to close this on out, but if you do find a solution, we'd love to have it.

[lukewarlow]

__html: Parameters<DOMParser['parseFromString']>[0] - it's not pretty but this will at least future proof Preact types, once dom types update you'll get string | TrustedHTML on newer TS.

Provided Parameters exists far enough back in TS this should work?

[rschristian]

Parameters is within our support range, yes. Back to TS 3.1 if their docs are correct

[lukewarlow]

This has been partially addressed by #4930 fwiw. Once TS updates (which it should do soon given this is shipped in 2 browsers now) it will take TrustedHTML when you use new TS versions.