Skip to main content

I’m trying to use ‘strict-dynamic’ for my ‘script-src’ content security policy.

I have a nonce set up in my page where I include the Front chat widget script:

  <script nonce="random nonce here" type="text/javascript" src='https://chat-assets.frontapp.com/v1/chat.bundle.js'></script>

but it appears that that chat.bundle.js script dynamically loads app.bundle.js, which leads to a CSP violation in Chrome:

Refused to load the script 'https://chat-assets.frontapp.com/v1/app.bundle.js?v=840fb872' because it violates the following Content Security Policy directive: "script-src 'self' 'strict-dynamic' chat-assets.frontapp.com 'nonce-9a6157311c94f2a96914fe5ac561d6fc'". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Is there a way to use strict-dynamic with the Front chat widget?

Hi Smerel,

I think we have a gap in our chat SDK documentation.  You can pass a nonce as part of the 'init' request, and that will appear as an IFrame property:

Please find my demo here:

https://evans-front-sandbox.netlify.app/pages/chats/basic-chat-with-nonce/

thanks, that worked!

I’m seeing a similar issue, but related to inline style:

app.bundle.js?v=bc1eb7a6:2 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'strict-dynamic' 'self' https: blob: 'nonce-vxiCvWKL4wr70PuxUjLioA=='". Either the 'unsafe-inline' keyword, a hash ('...'), or a nonce ('nonce-...') is required to enable inline execution.

I’m passing the nonce in with the init options

<script
  nonce="<%= content_security_policy_nonce %>"
  src='https://chat-assets.frontapp.com/v1/chat.bundle.js'>
</script>
<script nonce="<%= content_security_policy_nonce %>">
  window.FrontChat('init',
    {
      chatId: '...',
      useDefaultLauncher: true,
      nonce: '<%= content_security_policy_nonce %>',
    });
</script>

and even verified in the page source that the iframe tag looks like the one above, with the nonce property correctly passed in.

 

I was wondering if you have any tips on how I could debug this, or what else I might be missing? Thank you.

I should add that I’m also seeing this error:
 

app.bundle.js?v=bc1eb7a6:2 Uncaught Error: An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#17 for more information.
    at Gc (app.bundle.js?v=bc1eb7a6:2:1196693)
    at app.bundle.js?v=bc1eb7a6:2:1199382
    at new e (app.bundle.js?v=bc1eb7a6:2:1199389)
    at app.bundle.js?v=bc1eb7a6:2:1201690
    at e.getTag (app.bundle.js?v=bc1eb7a6:2:1201710)
    at e.insertRules (app.bundle.js?v=bc1eb7a6:2:1202044)
    at e.generateAndInjectStyles (app.bundle.js?v=bc1eb7a6:2:1206625)
    at app.bundle.js?v=bc1eb7a6:2:1208673
    at app.bundle.js?v=bc1eb7a6:2:1208722
    at b (app.bundle.js?v=bc1eb7a6:2:1208869)

 

Hi David,
You may need to add `style-src: blob;` to your site CSP to allow that inline style to be used. 
See our Front Chat CSP docs for details - https://dev.frontapp.com/docs/content-security-policy 

From the link that second error message points to - it seems it’s reporting that it can’t read the stylesheet, so this seems likely to get resolved with your CSP fix. 

Hi Jason, thank you for the response. I do have blob enabled for the style-src, unfortunately that doesn’t solve it for me. The error indicates that the nonce should solve it, which I’ve passed into the init config, but it doesn’t look like that’s getting applied somewhere.

Hi David,

We have an engineer ticket in place to address this issue with the CSP `style-src` directive.  Currently, the way we load a shared bundle, fetch your custom styling and apply that at runtime means that you’ll need to use `unsafe-inline` with style-src.

My understanding after doing some research is that the modification of styles at runtime in this fashion necessitates the use of unsafe-inline, which defeats the use of nonce here.  Because of that limitation, our engineers need to take a closer look at our chat architecture and bundling in order to support your request.

If you would like to be notified when this update is made, please write in to support@front.com and reference this post.

Reply


Terms & ConditionsCookie settings