Update CSP header for cloudflare turnstile

Author: paustint

apps/api/src/main.ts

@@ -130,8 +130,7 @@ if (ENV.NODE_ENV === 'production' && !ENV.CI && cluster.isPrimary) {
             '*.rollbar.com',
             'api.amplitude.com',
             'api.cloudinary.com',
-            'challenges.cloudflare.com',
-            'ip-api.com',
+            'https://challenges.cloudflare.com',
           ],
           baseUri: ["'self'"],
           blockAllMixedContent: [],
@@ -163,7 +162,7 @@ if (ENV.NODE_ENV === 'production' && !ENV.CI && cluster.isPrimary) {
             '*.gstatic.com',
             '*.google-analytics.com',
             '*.googletagmanager.com',
-            'challenges.cloudflare.com',
+            'https://challenges.cloudflare.com',
           ],
           scriptSrcAttr: ["'none'"],
           styleSrc: ["'self'", 'https:', "'unsafe-inline'"],

apps/landing/components/auth/Captcha.tsx

@@ -1,14 +1,15 @@
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useId } from 'react';
-import Turnstile from 'react-turnstile';
 import { ENVIRONMENT } from '../../utils/environment';
 
 interface CaptchaProps {
   action: string;
   formError?: string;
+  onLoad?: () => void;
   onChange: (token: string) => void;
 }
 
-export function Captcha({ action, formError, onChange }: CaptchaProps) {
+export function Captcha({ action, formError, onLoad, onChange }: CaptchaProps) {
   const id = useId();
 
   // Skip rendering the captcha if we're running in Playwright or if the key is not set
@@ -21,16 +22,16 @@ export function Captcha({ action, formError, onChange }: CaptchaProps) {
     <>
       <Turnstile
         id={id}
-        sitekey={ENVIRONMENT.CAPTCHA_KEY}
-        theme="light"
-        appearance="always"
-        size="flexible"
-        refreshExpired="auto"
-        fixedSize
-        action={action}
-        onVerify={(token) => onChange(token)}
-        // onError={}
-        onSuccess={(token, preClearanceObtained) => onChange(token)}
+        siteKey={ENVIRONMENT.CAPTCHA_KEY}
+        options={{
+          action,
+          theme: 'light',
+          appearance: 'always',
+          size: 'flexible',
+          refreshExpired: 'auto',
+        }}
+        onWidgetLoad={onLoad}
+        onSuccess={(token) => onChange(token)}
       />
       {formError && (
         <p id={`${id}-error`} role="alert" className="mt-2 text-sm text-red-600">

package.json

@@ -244,6 +244,7 @@
     "@heroicons/react": "^1.0.4",
     "@hookform/resolvers": "^3.9.0",
     "@jetstreamapp/soql-parser-js": "^6.1.0",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@mdx-js/react": "^1.6.21",
     "@monaco-editor/react": "^4.6.0",
     "@opentelemetry/api": "^1.8.0",
@@ -339,7 +340,6 @@
     "react-resize-detector": "^10.0.1",
     "react-router-dom": "6.11.2",
     "react-split": "^2.0.14",
-    "react-turnstile": "^1.1.4",
     "react-use-clipboard": "^1.0.9",
     "recoil": "^0.7.7",
     "regenerator-runtime": "0.13.7",

yarn.lock

@@ -5556,6 +5556,11 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@marsidev/react-turnstile@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@marsidev/react-turnstile/-/react-turnstile-1.0.2.tgz#d4ca03b6c31793bc73b3b99f5b991539a56f7f36"
+  integrity sha512-YkCtJVaCzZ1kcmhPsiFTmTXVughoNzEMRsNHcmTG0K5OdbCQfAG67Q6d5Ze+A72vrHbvVZkvcLgUbldeGcbRjQ==
+
 "@maxim_mazurok/gapi.client.discovery-v1@latest":
   version "0.1.20200806"
   resolved "https://registry.yarnpkg.com/@maxim_mazurok/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.1.20200806.tgz#1bdb82fadd659a159765178993dff6dbcb5968bc"
@@ -21729,11 +21734,6 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-turnstile@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/react-turnstile/-/react-turnstile-1.1.4.tgz#0c23b2f4b55f83b929407ae9bfbd211fbe5df362"
-  integrity sha512-oluyRWADdsufCt5eMqacW4gfw8/csr6Tk+fmuaMx0PWMKP1SX1iCviLvD2D5w92eAzIYDHi/krUWGHhlfzxTpQ==
-
 react-use-clipboard@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/react-use-clipboard/-/react-use-clipboard-1.0.9.tgz#d34d4d04500f77c606795d3756fc587ec93db8d2"