Add support for Content-Security-Policy

.github/workflows/e2e-testing.yml

@@ -51,7 +51,7 @@ jobs:
       # Alternative: create and commit an empty cypress/screenshots folder
       # to always have something to upload
       - name: Upload Cypress artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots

packages/react-use-intercom/.changeset/config.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
+    "changelog": "@changesets/cli/changelog",
+    "commit": false,
+    "ignore": [
+        "playground",
+        "gatsby-example",
+        "nextjs-example"
+    ],
+    "access": "public",
+    "updateInternalDependencies": "patch",
+    "baseBranch": "main",
+    "bumpVersionsWithWorkspaceProtocolOnly": true
+}

packages/react-use-intercom/.changeset/happy-squids-crash.md

@@ -0,0 +1,5 @@
+---
+'react-use-intercom': patch
+---
+
+Add support for Content-Security-Policy nonce

packages/react-use-intercom/package.json

@@ -87,4 +87,4 @@
     "tsup": "^6.6.3",
     "typescript": "^4.9.4"
   }
-}
+}

packages/react-use-intercom/src/initialize.ts

@@ -4,10 +4,11 @@
  *
  * @param appId - Intercom app id
  * @param [timeout=0] - Amount of milliseconds that the initialization should be delayed, defaults to 0
+ * @param [cspNonce=undefined] - Content-Security-Policy nonce to use for the Intercom <script> tag during initializing
  *
  * @see {@link https://developers.intercom.com/installing-intercom/docs/basic-javascript}
  */
-const initialize = (appId: string, timeout = 0) => {
+const initialize = (appId: string, timeout: number = 0, cspNonce?: string) => {
   var w = window;
   var ic = w.Intercom;
   if (typeof ic === 'function') {
@@ -28,6 +29,7 @@ const initialize = (appId: string, timeout = 0) => {
         var s = d.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
+        if (cspNonce) s.nonce = cspNonce;
         s.src = 'https://widget.intercom.io/widget/' + appId;
         var x = d.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);

packages/react-use-intercom/src/provider.tsx

@@ -28,6 +28,7 @@ export const IntercomProvider: React.FC<
   shouldInitialize = !isSSR,
   apiBase,
   initializeDelay,
+  cspNonce,
   ...rest
 }) => {
   const isBooted = React.useRef(false);
@@ -102,15 +103,23 @@ export const IntercomProvider: React.FC<
 
   React.useEffect(() => {
     if (!isSSR && shouldInitialize && !isInitialized.current) {
-      initialize(appId, initializeDelay);
+      initialize(appId, initializeDelay, cspNonce);
 
       if (autoBoot) {
         boot(autoBootProps);
       }
 
       isInitialized.current = true;
     }
-  }, [appId, autoBoot, autoBootProps, boot, initializeDelay, shouldInitialize]);
+  }, [
+    appId,
+    autoBoot,
+    autoBootProps,
+    boot,
+    initializeDelay,
+    shouldInitialize,
+    cspNonce,
+  ]);
 
   const ensureIntercom = React.useCallback(
     (functionName: string, callback: (() => void) | (() => string)) => {

packages/react-use-intercom/src/types.ts

@@ -515,4 +515,8 @@ export type IntercomProviderProps = {
    * Pass properties to `boot` method when `autoBoot` is `true`
    */
   autoBootProps?: IntercomProps;
+  /**
+   * Content-Security-Policy nonce to use for the Intercom <script> tag during initializing
+   */
+  cspNonce?: string;
 };