Avoid having to use "unsafe-inline" settings for CSS (style directive)

[DevSecBoi]

To accommodate Content Security Policy CSP we have used "strict-dynamic" to avoid having to use "unsafe-inline" settings and prevent XSS as part of the script directive but there is no corresponding/similar parameter for CSS (style directive)?

[mliao95]

I do not believe this issue is relevant for this ChatJS repository. If this is referencing our OOTB widget, we have a workaround here:

We provide a workaround using nonce. if you are able to add amazon_connect(‘nonce’, “custom-nonce-string”), we will populate our scripts/CSS tags with nonce=“custom-nonce-string”. From there, you can update your CSP to allow your custom nonce value.

e.g.

<script type="text/javascript">
    (function(w, d, x, id){
      s=d.createElement('script');
      s.src='https://d38ij7tdo5kvz7.cloudfront.net/amazon-connect-chat-interface-client.js';
      s.async=1;
      s.id=id;
      d.getElementsByTagName('head')[0].appendChild(s);
      w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', '....');
    amazon_connect('styles', {iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456'}, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', '....');
    amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
    amazon_connect('nonce', 'custom-nonce-string');
  </script>-