I am trying to use a nonce to avoid allowing unsafe-inline/unsafe-eval in my CSP for my site where I am using the new (messenger) version of the Zendesk chat widget.
I followed the steps here -> https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/csp/#cnc_machining_service and added a nonce to my script tags. The nonce seems to be coming through correctly, but I still get console errors saying that inline style cannot be applied.
Here's how I have the script tags used in my .cshtml file:
<!-- Start of Zendesk Widget script -->
<script nonce="@ViewBag.nonce" id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[mykey]"></script>
<!-- End of Zendesk Widget script -->
<script type="text/javascript" nonce="@ViewBag.nonce">
function initZendeskWidget() {
if (typeof zE !== 'undefined') {
zE('messenger', 'hide'); // Hide everything on load
$('#chat-link').on('click', () => showZendeskChatWidget()); // Attach click handler
} else {
setTimeout(initZendeskWidget, 500); // Retry until widget loads
}
}
function showZendeskChatWidget() {
zE('messenger', 'show');
setTimeout(openChat,500);
}
function openChat() {
let chatLauncherButton = document.getElementById("launcher").contentWindow.document.querySelector('[data-testid="launcher"]');
chatLauncherButton.click();
}
initZendeskWidget();
</script>
The nonce is correct and matches that of the CSP policy for style sre-elem. But I get this error in my console:
web-widget-main-0063182.js:2 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' 'nonce-wwO5dbb2vZ2pH79ycW+qdA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.
As you can see in the error message, the nonce is a part of my CSP directive for style-src-elem, and it's the same nonce in the html in the Sources tab:
<!-- Start of crowdtech Zendesk Widget script -->
<script nonce="wwO5dbb2vZ2pH79ycW+qdA==" id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[mykey]"></script>
<!-- End of crowdtech Zendesk Widget script -->
<script type="text/javascript" nonce="wwO5dbb2vZ2pH79ycW+qdA==">
What am I missing here? Trying to harden my CSP policy so I don't want to include unsafe-inline if at all possible. The help article included above implies that this should be possible.
(snippet key replaced with [mykey] for privacy)

