🐛 Bug: Blocked script execution

[armfuldev]

Bug Report Checklist

• [x] I have tried restarting my IDE and the issue persists.
• [x] I have pulled the latest main branch of the repository.
• [x] I have searched for related issues and found none that matched my issue.

Expected

being able to load the client and retrieve a token that i can use for requests.

Actual

Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

Package Version

1.3.1

Browsers

Chrome, Other, Firefox

Additional Info

i've tried setting CSP in my next.config.ts, which doesn't resolve the issue.

// ...

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-inline' ${
    isDev ? "'unsafe-eval'" : ''
  } https://challenges.cloudflare.com https://*.cloudflare.com;
  frame-src 'self' https://challenges.cloudflare.com https://*.cloudflare.com;
  connect-src 'self' https://api.eu.amplitude.com https://*.cloudflare.com;
  img-src 'self' data: blob: https://*.cloudflare.com;
  style-src 'self' 'unsafe-inline';
  font-src 'self';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'self';
  upgrade-insecure-requests;
`

// ...

const nextConfig: NextConfig = {
  // ...

  async headers() {
    return [
      {
        source: '/auth/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },

  // ...
}

// ...

it happens across browsers, regardless of extensions.

i have this simple use-turnstile hook:

'use client'

import { Turnstile } from '@marsidev/react-turnstile'
import { useState } from 'react'

export function useTurnstile() {
  const [token, setToken] = useState<string>()

  function TurnstileClient() {
    return (
      <Turnstile
        className="h-16"
        siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
        onSuccess={setToken}
      />
    )
  }

  return { token, TurnstileClient }
}

i'm using this in my next app alongside better-auth, using their captcha plugin.

i saw #104, didn't solve my issue.

[marsidev]

Hello, can you please provide a reproduction link (e.g codesandbox)?

[armfuldev]

Hello, can you please provide a reproduction link (e.g codesandbox)?

sure, but i believe the root issue is the fact "allow-scripts" isn't set by Cloudflare's iframe. potentially just a next.js issue.

would it be possible to extend the sandbox so that we can set "allow-scripts" there?