crisp-im / crisp-sdk-web

:package: Include the Crisp chat widget from using frameworks such as React, VueJS, Angular...
https://www.npmjs.com/package/crisp-sdk-web
MIT License
39 stars 13 forks source link

Ability to add a nonce to the script tag #31

Open sneko opened 6 months ago

sneko commented 6 months ago

Hi @valeriansaliou ,

Due to third-party tools usage I have to set a nonce to my server page to load their script and bypass using CORP/COEP headers since I cannot customize them on those tools responses.

Would you consider adding the ability to customize the script attributes you create with load()?

https://github.com/crisp-im/crisp-sdk-web/blob/cc3c7fb2a861fd224604a99e2477f185500318f6/src/index.ts#L192-L197

Thank you,

sneko commented 6 months ago

@valeriansaliou any example of a Crisp client succeeding in configuring Content Security Policy (CSP)?

I tried to modify locally your library to accept a nonce, but the client.js script downloaded from the one having the nonce is trying to deal with inline style which triggers the CSP.

Any response would be appreciated, thank you,

valeriansaliou commented 6 months ago

Hello @sneko, this is unfortunately not yet supported in the Crisp chatbox itself, since, as far as I understand how nonces work, we'd need to pass the nonce to all created inline elements (scripts and styles) from the chatbox loader. Given how we currently load our chatbox resources, this will require direct work on the global chatbox loader code, in addition to this SDK library.

I'm keeping this open so that we can add this to our roadmap.

setvik commented 4 months ago

Alternatively, is it possible to remove the need for inline styles, i.e. so that we don't need to put "unsafe-inline" in the "style-src" CSP directive?

valeriansaliou commented 4 months ago

Inline styles are needed for the chatbox per-website themes to work correctly, there’s no way we can do it otherwise unfortunately.