Builder io Editor error

Technical Questions
, , ,
1

Hello,

Recently on my dev environment, where localhost is, i started getting this error. So any ideas why that is and how to fix it ?

Dependencies:

  "@builder.io/dev-tools": "^1.1.24",
    "@builder.io/react": "^5.0.7",
    "@builder.io/sdk": "3.0.4",
    "next": "15.0.1",
    "react": "18.3.1",
    "react-dom":

Error:

Uncaught SecurityError: Failed to read a named property 'dispatchEvent' from 'Window': Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Screenshot:

Screenshot 2024-10-25 141401
Screenshot 2024-10-25 1414011125×828 32.7 KB

2

Hello @Mehan,

Could you please provide your integration code for the builder? We believe the issue may be related to the integration code or any custom components being used.

3

Please do check your messages. Thanks !

4

Hello @Mehan,

The error you’re encountering, Uncaught SecurityError: Failed to read a named property 'dispatchEvent' from 'Window', indicates that your application is trying to access a cross-origin frame, which is blocked by the browser due to security restrictions.

Ensure Content-Security-Policy headers for builder.io and localhost:3000 are added to the header configuration in your application and application allows loading your app in the builder iFrame.

For the next JS, here is an example of next.config.js:

  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              'frame-ancestors https://*.builder.io https://builder.io http://localhost:1234',
          },
        ],
      },
    ]
  },

Screenshot 2024-10-29 at 6.12.00 PM
Screenshot 2024-10-29 at 6.12.00 PM2864×1396 408 KB

If you’re trying to access the window object in a way that may involve cross-origin behavior, ensure it’s done safely within a useEffect:

useEffect(() => {
  if (typeof window !== "undefined") {
    // Your logic here
  }
}, []);

Please give it a try and let us know how that works for you!

Best regards,

5

Nope, unfortunately the suggested did not help. I set the header for Content-Security-Policy in the next config along with other headers like:

   {
        // source: '/:path*',
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              'frame-ancestors https://*.builder.io https://builder.io http://localhost:3000',
          },
          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
          { key: 'Cross-Origin-Resource-Policy', value: 'same-origin' },
          { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
        ],
      },

tried setting these directly in the meta tags:

    <meta name="Cross-Origin-Opener-Policy" content="same-origin"></meta>
      <meta
        name="Content-Security-Policy"
        content="frame-ancestors https://*.builder.io https://builder.io http://localhost:3000;"
      ></meta>
      <meta name="Cross-Origin-Opener-Policy" content="same-origin"></meta>
      <meta name="Cross-Origin-Resource-Policy" content="same-origin"></meta>
      <meta name="X-Frame-Options" content="SAMEORIGIN"></meta>
      <meta
        name="Cross-Origin-Window-Policy"
        content="Allow-PostMessage"
      ></meta>

Still nothing, then i added this conditional check everywhere the window has been used including in the partytown load function:

if (typeof window !== 'undefined') {
      ...
}

did not help either.

so as a solution (last resort), as the error only appears on localhost i had to disable the nextScriptWorker in the development environment like this.

  experimental: {
    /**
     * Disable nextScriptWorkers on dev to avoid the following error:
     * SecurityError: Permission denied to access property "dispatchEvent" on cross-origin object
     */
    ...(isDev ? { nextScriptWorkers: false } : { nextScriptWorkers: true }),
  },

So if you have any other suggestion i would be glad to test them out as well.

Thanks for the support,

Best regards

6

Hi @Mehan,

Are you using Next.js Turbopack? If not, could you share a minimal reproduction repository?