Merge pull request #936 from weni-ai/fix/csp-unsafe-scripts-styles

[CFE-493] - Fix CSP unsafe scripts styles
weni-ai · Nov 28, 2024 · 243add0 · 243add0
2 parents 1f0bf31 + b05ef5a
commit 243add0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -2,41 +2,24 @@
 <html lang="en">
 
 <head>
-  <!-- Google Tag Manager -->
-  <script>(function (w, d, s, l, i) {
-      w[l] = w[l] || []; w[l].push({
-        'gtm.start':
-          new Date().getTime(), event: 'gtm.js'
-      }); var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-TL2549P');
-  </script>
-  <!-- End Google Tag Manager -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="/favicon.ico">
   <title>Weni</title>
-  <script src="https://js.stripe.com/v3"></script>
-  <script>
+  <script nonce="env">
     //CONFIGURATIONS_PLACEHOLDER
   </script>
 </head>
 
 <body>
-  <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TL2549P" height="0" width="0"
-      style="display:none;visibility:hidden"></iframe></noscript>
-  <!-- End Google Tag Manager (noscript) -->
   <noscript>
     <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
       continue.</strong>
   </noscript>
   <div id="app"></div>
   <!-- built files will be auto injected -->
-  <script type="module" src="/src/main.js"></script>
-
+  <script nonce="app" type="module" src="/src/main.js"></script>
 </body>
 
 </html>
diff --git a/src/utils/plugins/Hotjar.js b/src/utils/plugins/Hotjar.js
@@ -18,6 +18,7 @@ export default function (
     h._hjSettings = { hjid: Number(env('HOTJAR_ID')), hjsv: 6 };
     a = o.getElementsByTagName('head')[0];
     r = o.createElement('script');
+    r.setAttribute('nonce', 'hotjar');
     r.async = 1;
     r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
     a.appendChild(r);

diff --git a/src/utils/plugins/WebChat.js b/src/utils/plugins/WebChat.js
@@ -2,8 +2,12 @@ import { waitFor } from '../waitFor';
 import { transformIntoDraggableBubble } from '../transformIntoDraggableBubble';
 
 export default function (d = document, s = 'script') {
+  const nonce = 'wwc';
+
   let h = d.getElementsByTagName(s)[0],
     k = d.createElement(s);
+  k.setAttribute('nonce', nonce);
+
   k.onload = function () {
     let j = d.createElement('div');
     j.id = 'wwc';
@@ -57,6 +61,6 @@ export default function (d = document, s = 'script') {
   h.parentNode.insertBefore(k, h);
 
   waitFor(() => document.querySelector('button.push-launcher')).then((button) =>
-    transformIntoDraggableBubble(button, button.parentNode),
+    transformIntoDraggableBubble(button, button.parentNode, nonce),
   );
 }
diff --git a/src/utils/transformIntoDraggableBubble.js b/src/utils/transformIntoDraggableBubble.js
@@ -1,4 +1,4 @@
-export function transformIntoDraggableBubble(element, referenceElement) {
+export function transformIntoDraggableBubble(element, referenceElement, nonce) {
   const style = referenceElement.computedStyleMap?.();
 
   if (!style) return;
@@ -7,6 +7,7 @@ export function transformIntoDraggableBubble(element, referenceElement) {
   const { value: initialBottom } = style.get('bottom');
 
   const backdrop = document.createElement('section');
+  if (nonce) backdrop.setAttribute('nonce', nonce);
 
   backdrop.setAttribute(
     'style',