navikt / navno-cms-archive

MIT License
0 stars 0 forks source link

Laste javascript for XP-frontend i html-visning #44

Open bdahle opened 1 month ago

bdahle commented 1 week ago

Det ser ut som js-eksevering stopper pga "replaceState" i next feiler:

Image

bdahle commented 1 week ago

Liten oppsummering fra ChatGPT: 🤖

"The reason replaceState (or pushState) doesn’t work with srcdoc is due to browser security policies and the unique nature of about:srcdoc as a URL.

  1. srcdoc creates an about:srcdoc URL

    • When you use srcdoc to define the contents of an iframe, the browser generates an internal about:srcdoc URL for that iframe’s content. • The about:srcdoc origin is treated as unique and opaque, meaning it doesn’t share an origin with the parent page (localhost:3000, for example) or any other page.

  2. History API (e.g., replaceState) requires a valid origin

    • The replaceState function in the History API allows a page to modify the browser’s URL or history stack. However, this only works: • When the page’s origin matches the new state’s origin. • When the origin is not opaque or restricted. • In the case of srcdoc, the iframe’s URL is about:srcdoc, which is considered an opaque origin (it has no actual hostname or protocol to match against). This makes replaceState invalid and triggers a SecurityError.

  3. Cross-Origin Restrictions

Even though the parent page (localhost:3000) loaded the iframe, the iframe’s content (about:srcdoc) is treated as having a different origin due to its opaque nature. The browser applies the same-origin policy to prevent scripts in the iframe from manipulating the browser’s history.

  1. When It Works

replaceState works fine when the iframe has: • A src with a valid URL (e.g., http://localhost:3000/some-page). • An origin that matches the content being loaded.

This is why using src instead of srcdoc doesn’t trigger this issue — the iframe has a well-defined URL (like http://localhost:3000) with a proper origin.

Workaround Options

If you need to use srcdoc, consider:

  1. Avoid Using the History API in the Iframe’s Scripts If you can, prevent the scripts inside the iframe from calling replaceState or pushState.
  2. Host the HTML Instead Serve the HTML from a URL and use the src attribute instead of srcdoc.
  3. Rewrite the Scripts in srcdoc HTML If you can preprocess the HTML, you might be able to remove or rewrite the calls to replaceState in the iframe content before loading it into srcdoc."