Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trusted Types closure to replace fallback policy #462

Open
lukewarlow opened this issue Feb 29, 2024 · 6 comments
Open

Trusted Types closure to replace fallback policy #462

lukewarlow opened this issue Feb 29, 2024 · 6 comments
Labels
enhancement future In consideration for the future releases of the API
Milestone

Comments

@lukewarlow
Copy link
Member

Currently trusted types requires you to update each individual call site for specific policy usage OR you get one universal default policy.

This is, I suspect, in many cases not going to be suitable.

An idea would be to introduce some sort of closure to policies that lets you replace the fallback policy context inside of them.

const jqueryPolicy = trustedTypes.createPolicy('jquery', {...});

jqueryPolicy.run(() => {
    // Any code in here will use the jqueryPolicy instead of the default as a fallback.
    $("#example").html("Hello World");
});

This allows you to be as granular as you'd like given the restriction that don't have access to the callsite itself.

@lukewarlow lukewarlow added enhancement future In consideration for the future releases of the API labels Feb 29, 2024
@lukewarlow lukewarlow added this to the v2 milestone Feb 29, 2024
@koto
Copy link
Member

koto commented Feb 29, 2024

We tried that approach with libraries on top of TT, but it just doesn't work, as one would have to wrap all the sinks. From what I remember the issue was that JS proxies don't mix well with the DOM element objects, and the approach was fruitless.

@lukewarlow
Copy link
Member Author

Would the mechanism being internal fix those issues though? I'm not quite sure how proxies come into the picture?

@koto
Copy link
Member

koto commented Feb 29, 2024

const delayedWriteToSink = (el) => setTimeout(() => el.innerHTML = 'bar');

policy.run(() => {
  delayedWriteToSink(el);
})

Elements inside the .run would have to be different than regular elements. The way to do it resembles what proxies were supposed to achieve.

@lukewarlow
Copy link
Member Author

Wouldn't it be setting a context object and using that instead of default policy in the fallback method, rather than messing with elements directly?

@Sora2455
Copy link

It's worth noting that jQuery specifically is updating itself to accept TrustedTypes as parameters to methods like .html(), so the example given might not be the best.

@lukewarlow
Copy link
Member Author

Okay I can change it the concept is the same though code where the call site is inaccessible. Could be registering a custom element that does Dom manipulation as an example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement future In consideration for the future releases of the API
Projects
None yet
Development

No branches or pull requests

3 participants