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

Add support for Trusted Types CSP #697

Open
LuizGustavoMagalhaes opened this issue Dec 10, 2024 · 1 comment
Open

Add support for Trusted Types CSP #697

LuizGustavoMagalhaes opened this issue Dec 10, 2024 · 1 comment

Comments

@LuizGustavoMagalhaes
Copy link

Is your feature request related to a problem? Please describe.
We're trying to implement Trusted types CSP in our Web Application (which uses OverlayScrollbars) and we're hitting an issue due to the unsafe assignment on


You can find more details here:
https://web.dev/articles/trusted-types

Describe the solution you'd like
For fixing it, you can create a custom policy that only allows that values that are set within the library. Something like

let overlayScrollbarsTrustedTypesPolicy: Pick<TrustedTypePolicy, 'createHTML'> | undefined;
if (window.trustedTypes) {
    overlayScrollbarsTrustedTypesPolicy= window.trustedTypes.createPolicy(
        'overlayScrollbarsTrustedTypesPolicy',
        {
            createHTML: (url: string) => {
                if (
                    url === '<div class=\"os-environment\"><div></div></div>'
                ) {
                    return url;
                }
                // The URL is not allowed, return an empty string
                return '';
            },
        }
    );
}
export { iFrameDocumentTrustedTypesPolicy };

And then apply the policy in the location we're getting the issue

export const createDOM = (html: string): ReadonlyArray<Node> => {
    const createdDiv = createDiv();
    createdDiv.innerHTML =
        (overlayScrollbarsTrustedTypesPolicy?.createHTML(html.trim()) as unknown as string) ?? html.trim();

    return each(contents(createdDiv), elm => removeElements(elm));
};
@KingSora
Copy link
Owner

KingSora commented Dec 13, 2024

@LuizGustavoMagalhaes Good day :)

Thanks for the suggestion! I'll definitely add something like this, probably the design will look something like the current OverlayScrollbars.nonce api. With the naming of OverlayScrollbars.trustedTypesPolicy(newTurstedTypePolicy)

I'll look into the trusted types api first though as I'm not very familiar with it yet and TypeScript doesn't offer any types.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants