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
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 }
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.
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.
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.
