Can I use this package with CSP header style-src other than unsafe-inline?

[lorena-caia]

Hi,
I'm trying to use the 'add-to-calendar-button-react' package but unfortunately, it doesn't seem to work with the CSP header for style-src 'self'.
Is there any possibility to use it without style-src 'unsafe-inline'?

[jekuer]

Yes, there is.

You could use the option to load an external CSS file (https://add-to-calendar-button.com/advanced-use#case-1). This way, you circumvent the inline style. However, has some performance issues.

An alternative is the cspnonce option, where you can specify a nonce that you use in your CSP settings (introduced with the very latest release).
If none of this works, unfortunately, you would need to enable unsafe-inline - which imho is usually ok for css.

[lorena-caia]

Thank you for the reply Jekuer!
I've tried the cspnonce option but I've encountered 2 issues with it.

1. The "cspnonce" property does not exist on AddToCalendarButtonProps, Instead, the "nonce" property was added. From what I see in the component code, the expected attribute name is "cspnonce".
2. By overwriting the AddToCalendarButtonProps to include the "cspnonce" property in the definition, I managed to get rid of 2 out of 3 CSP errors. The remaining error is still in regards to inline style but this one I believe refers to the style attributes that are added on the HTML elements (which is not fixed by the nonce option).

[jekuer]

After some investigation, we need to postpone the solution.
Reason: CSP nonce does not support style information inside HTML tags like <div>. So, we need to move all style attributes into a <style>-tag logic instead. Since this has a lot of potential implications, it is considered highly complex.
Put it on the roadmap, but for now, unfortunately, you need to set "unsafe-inline" for style-src.

[lorena-caia]

I understand.
For other people that will read this discussion, you can set the CSP style-src-attr directive to unsafe-inline and style-src-elem directive to nonce. But the style-src-attr and style-src-elem are not fully supported by older browsers and not supported at all on Safari, so, you will still need to add the style-src directive with unsafe-inline value. You can check more details here

[anderskiaer]

I'm hit by the same limitation (developing in a context enforcing strict CSP settings with a requirement to not use unsafe-inline).

After some investigation, we need to postpone the solution. Reason: CSP nonce does not support style information inside HTML tags like <div>. So, we need to move all style attributes into a <style>-tag logic instead. Since this has a lot of potential implications, it is considered highly complex. Put it on the roadmap, but for now, unfortunately, you need to set "unsafe-inline" for style-src.

If I understand the quoted sentences above, it states that e.g.

add-to-calendar-button/src/atcb-generate.js

Lines 695 to 698 in fc5f1dd

	const btnDescription = document.createElement('div');
	btnDescription.classList.add('atcb-date-btn-content');
	btnDescription.textContent = data.dates[`${subEvent}`].descriptionHtmlFree;
	btnDescription.style.cssText = 'overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;';

would need to move all the style logic into a <style>-tag to be CSP compliant. This is actually not the case - there is (to my surprise) an almost identical solution which is CSP compliant:

Not-CSP compliant variants:

someElement.setAttribute("style", "color: blue");
someElement.style.cssText = "color: blue";

CSP compliant alternative:

someElement.style.color = "blue";

If this is new information, would it make it simpler for add-to-calendar-button to support CSP without unsafe-inline?

---

References:
https://stackoverflow.com/questions/36870421/why-can-i-set-styles-in-js-without-violating-content-security-policys-style-src
https://stackoverflow.com/questions/44608927/how-to-let-script-to-use-setattribute-style-without-breaking-csp

[jekuer]

Thank you, @anderskiaer !
Check out the latest version 2.8.3 - it should fix the issue.