Can not change page when embed into iframe with sandbox attribute

[borovinskiy]

Demo: https://demo.elibsystem.ru/node/38675/webfs/index.html

Application try change hash of location, that not allowed for iframe. Browser throws error and page not changing.

Reproduce:

1. open https://demo.elibsystem.ru/node/38675/webfs/index.html;
2. press "read";
3. go to next page in sidebar.

Problem code example:

<iframe src="https://demo.elibsystem.ru/h5p/embed/38674" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" allowfullscreen style="width: 100vw; height: 100vh; border: 0px;"></iframe>

Workaround: sandbox="allow-top-navigation"

[dylanmccall]

I can reproduce that issue as well. It looks like this commit attempted to solve the problem:

06eb6ff

However, it looks like there's a mistake here:

h5p-interactive-book/src/scripts/app.js

Lines 801 to 819 in 786c11c

	this.addHashListener = (hashWindow) => {
	hashWindow.addEventListener('hashchange', (event) => {
	H5P.trigger(this, 'respondChangeHash', event);
	});
	this.hashWindow = hashWindow;
	};
	try {
	this.addHashListener(top);
	}
	catch (e) {
	if (e instanceof DOMException) {
	// Use iframe window to store book location hash
	this.addHashListener(window);
	}
	else {
	throw e;
	}
	}

It looks like it's assuming that hashWindow.addEventListener() will throw a DOMException if hashWindow is window.top. If the code in the iframe is from a different origin, that is the case. Otherwise, the code in the sandbox is perfectly allowed to add an event listener: it just isn't allowed to change the location.

The obvious fix would be to do whatever the changeHash function is doing inside that addHashListener function, as a way to test that the location is writable (and reset it to a default state). Unfortunately, it looks like setting the hash to its current value is a no-op and won't throw an exception, which is very awkward :/

Uh, is there an established reason why we want to modify window.top's location here? I see this is where that got added, but I don't really follow the rationale: 21e4076.

[borovinskiy]

In Drupal H5P embed in iframe for JS/CSS isolation from CMS site.
Rewrite location on CMS is allow set current position of interactive book in browser url for simple open on URL

Example:
https://h5p.org/content-types/interactive-book#h5pbookid=441940&section=top&chapter=h5p-interactive-book-chapter-1773c319-4030-41bd-be88-4bb96580781a