Uncaught SecurityError

2025/04/25 12:11 PM

Hello,

When i preview the page from page builder tab i am getting this error:

Above error appears only in page builder tab. If i open preview in new tab then i am not seeing this error.

Because of this error some of my css and js are applying correctly because it depends on that event listener.

So wanted to know if there is way of resolving that.


Environment

  • Xperience by Kentico version: [30.3.1]
  • .NET version: [8]
  • Execution environment: [SaaS|Private cloud (Azure/AWS/Virtual machine)]

Answers

2025/05/01 7:53 PM

because it depends on that event listener.

Without example code it's going to be nearly impossible to help you.

2025/05/13 5:18 PM

You're encountering a cross-origin iframe security error when previewing a page inside the Page Builder tab in Xperience by Kentico (XBK). This error is expected behavior due to browser security restrictions (Same-Origin Policy).


Why This Happens

When your live site runs on http://localhost:60651 and Kentico’s admin UI (Page Builder tab) runs on a different origin, the browser treats them as cross-origin. Iframes (used in the Page Builder tab preview) cannot access or modify properties of a page from a different origin for security reasons.

So this line fails:

window.addEventListener(...)

Because window in your script is trying to access the top-level page outside its origin.

Why It Works in "Open in New Tab"

When you open the preview in a new tab, it loads directly from the site’s origin, not inside an iframe — so no cross-origin restrictions apply.

Workaround / Resolution Suggestions

  1. Detect if Inside an Iframe
    Modify your JS to only attach window.addEventListener if it's not inside a cross-origin iframe:

    try { if (window.top === window) { // Same-origin or top-level window.addEventListener('yourEvent', yourHandler); } } catch (e) { console.warn("Cross-origin access blocked: ", e.message); // Optionally fallback or skip functionality }

  2. Move Critical JS Outside of Iframe Context
    If possible, avoid loading scripts in the iframe preview that depend on access to the parent frame. Stick to DOM manipulation within the iframe only.

  3. Use PostMessage for Communication
    If you must communicate between iframe and parent window, use the window.postMessage API, which is designed for cross-origin messaging.

  4. Enable Same-Origin Development (Optional)
    You could set up both Kentico admin and the live site under the same hostname and port during development (e.g., using a proxy or single IIS site) — but this is complex and usually not worth it just for iframe preview compatibility.

To answer this question, you have to login first.