happy-dom 14.12.3 → 15.1.0

package/src/nodes/html-hyperlink-element/HTMLHyperlinkElementUtility.ts

@@ -0,0 +1,329 @@
+import HTMLElement from '../html-element/HTMLElement.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
+
+/**
+ * HTML Hyperlink utility for HTMLAnchorElement and HTMLAreaElement.
+ *
+ * @see https://html.spec.whatwg.org/multipage/links.html#hyperlink
+ */
+export default class HTMLHyperlinkElementUtility {
+	private element: HTMLElement;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param element Element.
+	 */
+	constructor(element: HTMLElement) {
+		this.element = element;
+	}
+
+	/**
+	 * Returns the hyperlink's URL's origin.
+	 *
+	 * @returns Origin.
+	 */
+	public getOrigin(): string {
+		try {
+			return new URL(this.getHref()).origin;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Returns href.
+	 *
+	 * @returns Href.
+	 */
+	public getHref(): string {
+		if (!this.element.hasAttribute('href')) {
+			return '';
+		}
+
+		try {
+			return new URL(
+				this.element.getAttribute('href'),
+				this.element[PropertySymbol.ownerDocument].location.href
+			).href;
+		} catch (e) {
+			return this.element.getAttribute('href');
+		}
+	}
+
+	/**
+	 * Sets href.
+	 *
+	 * @param href Href.
+	 */
+	public setHref(href: string): void {
+		this.element.setAttribute('href', href);
+	}
+
+	/**
+	 * Returns protocol.
+	 *
+	 * @returns Protocol.
+	 */
+	public getProtocol(): string {
+		try {
+			return new URL(this.getHref()).protocol;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets protocol.
+	 *
+	 * @param protocol Protocol.
+	 */
+	public setProtocol(protocol: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.protocol = protocol;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns username.
+	 *
+	 * @returns Username.
+	 */
+	public getUsername(): string {
+		try {
+			return new URL(this.getHref()).username;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets username.
+	 *
+	 * @param username Username.
+	 */
+	public setUsername(username: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.username = username;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns password.
+	 *
+	 * @returns Password.
+	 */
+	public getPassword(): string {
+		try {
+			return new URL(this.getHref()).password;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets password.
+	 *
+	 * @param password Password.
+	 */
+	public setPassword(password: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.password = password;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns host.
+	 *
+	 * @returns Host.
+	 */
+	public getHost(): string {
+		try {
+			return new URL(this.getHref()).host;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets host.
+	 *
+	 * @param host Host.
+	 */
+	public setHost(host: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.host = host;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns hostname.
+	 *
+	 * @returns Hostname.
+	 */
+	public getHostname(): string {
+		try {
+			return new URL(this.getHref()).hostname;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets hostname.
+	 *
+	 * @param hostname Hostname.
+	 */
+	public setHostname(hostname: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.hostname = hostname;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns port.
+	 *
+	 * @returns Port.
+	 */
+	public getPort(): string {
+		try {
+			return new URL(this.getHref()).port;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets port.
+	 *
+	 * @param port Port.
+	 */
+	public setPort(port: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.port = port;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns pathname.
+	 *
+	 * @returns Pathname.
+	 */
+	public getPathname(): string {
+		try {
+			return new URL(this.getHref()).pathname;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets pathname.
+	 *
+	 * @param pathname Pathname.
+	 */
+	public setPathname(pathname: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.pathname = pathname;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns search.
+	 *
+	 * @returns Search.
+	 */
+	public getSearch(): string {
+		try {
+			return new URL(this.getHref()).search;
+		} catch (e) {
+			return '';
+		}
+	}
+
+	/**
+	 * Sets search.
+	 *
+	 * @param search Search.
+	 */
+	public setSearch(search: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.search = search;
+		this.element.setAttribute('href', url.href);
+	}
+
+	/**
+	 * Returns hash.
+	 *
+	 * @returns Hash.
+	 */
+	public getHash(): string {
+		const href = this.element.getAttribute('href');
+		if (href.startsWith('#')) {
+			return href;
+		}
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return '';
+		}
+		return url.hash;
+	}
+
+	/**
+	 * Sets hash.
+	 *
+	 * @param hash Hash.
+	 */
+	public setHash(hash: string): void {
+		let url: URL;
+		try {
+			url = new URL(this.getHref());
+		} catch (e) {
+			return;
+		}
+		url.hash = hash;
+		this.element.setAttribute('href', url.href);
+	}
+}

package/src/nodes/html-hyperlink-element/IHTMLHyperlinkElement.ts

@@ -0,0 +1,19 @@
+/**
+ * HTMLHyperlinkElementUtils.
+ *
+ * Reference:
+ * https://html.spec.whatwg.org/multipage/links.html#htmlhyperlinkelementutils.
+ */
+export default interface IHTMLHyperlinkElement {
+	readonly origin: string;
+	href: string;
+	protocol: string;
+	username: string;
+	password: string;
+	host: string;
+	hostname: string;
+	port: string;
+	pathname: string;
+	search: string;
+	hash: string;
+}

package/src/nodes/html-iframe-element/HTMLIFrameElement.ts

@@ -3,13 +3,32 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 import BrowserWindow from '../../window/BrowserWindow.js';
 import Document from '../document/Document.js';
 import HTMLElement from '../html-element/HTMLElement.js';
-import Node from '../node/Node.js';
-import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
-import HTMLIFrameElementNamedNodeMap from './HTMLIFrameElementNamedNodeMap.js';
 import CrossOriginBrowserWindow from '../../window/CrossOriginBrowserWindow.js';
 import IBrowserFrame from '../../browser/types/IBrowserFrame.js';
-import HTMLIFrameElementPageLoader from './HTMLIFrameElementPageLoader.js';
-import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
+import DOMTokenList from '../element/DOMTokenList.js';
+import Attr from '../attr/Attr.js';
+import BrowserFrameFactory from '../../browser/utilities/BrowserFrameFactory.js';
+import BrowserFrameURL from '../../browser/utilities/BrowserFrameURL.js';
+import WindowErrorUtility from '../../window/WindowErrorUtility.js';
+import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
+import IRequestReferrerPolicy from '../../fetch/types/IRequestReferrerPolicy.js';
+import WindowBrowserContext from '../../window/WindowBrowserContext.js';
+
+const SANDBOX_FLAGS = [
+	'allow-downloads',
+	'allow-forms',
+	'allow-modals',
+	'allow-orientation-lock',
+	'allow-pointer-lock',
+	'allow-popups',
+	'allow-popups-to-escape-sandbox',
+	'allow-presentation',
+	'allow-same-origin',
+	'allow-scripts',
+	'allow-top-navigation',
+	'allow-top-navigation-by-user-activation',
+	'allow-top-navigation-to-custom-protocols'
+];
 
 /**
  * HTML Iframe Element.
@@ -19,36 +38,21 @@ import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
  */
 export default class HTMLIFrameElement extends HTMLElement {
 	// Public properties
-	public cloneNode: (deep?: boolean) => HTMLIFrameElement;
+	public declare cloneNode: (deep?: boolean) => HTMLIFrameElement;
 
 	// Events
 	public onload: (event: Event) => void | null = null;
 	public onerror: (event: Event) => void | null = null;
 
 	// Internal properties
-	public override [PropertySymbol.attributes]: NamedNodeMap;
-	public [PropertySymbol.sandbox]: DOMTokenList = null;
+	public [PropertySymbol.sandbox]: DOMTokenList | null = null;
 
 	// Private properties
 	#contentWindowContainer: { window: BrowserWindow | CrossOriginBrowserWindow | null } = {
 		window: null
 	};
-	#pageLoader: HTMLIFrameElementPageLoader;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param browserFrame Browser frame.
-	 */
-	constructor(browserFrame: IBrowserFrame) {
-		super();
-		this.#pageLoader = new HTMLIFrameElementPageLoader({
-			element: this,
-			contentWindowContainer: this.#contentWindowContainer,
-			browserParentFrame: browserFrame
-		});
-		this[PropertySymbol.attributes] = new HTMLIFrameElementNamedNodeMap(this, this.#pageLoader);
-	}
+	#iframe: IBrowserFrame;
+	#loadedSrcdoc: string | null = null;
 
 	/**
 	 * Returns source.
@@ -56,7 +60,16 @@ export default class HTMLIFrameElement extends HTMLElement {
 	 * @returns Source.
 	 */
 	public get src(): string {
-		return this.getAttribute('src') || '';
+		if (!this.hasAttribute('src')) {
+			return '';
+		}
+
+		try {
+			return new URL(this.getAttribute('src'), this[PropertySymbol.ownerDocument].location.href)
+				.href;
+		} catch (e) {
+			return this.getAttribute('src');
+		}
 	}
 
 	/**
@@ -214,19 +227,18 @@ export default class HTMLIFrameElement extends HTMLElement {
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.connectToNode](parentNode: Node = null): void {
-		const isConnected = this[PropertySymbol.isConnected];
-		const isParentConnected = parentNode ? parentNode[PropertySymbol.isConnected] : false;
-
-		super[PropertySymbol.connectToNode](parentNode);
+	public override [PropertySymbol.connectedToDocument](): void {
+		super[PropertySymbol.connectedToDocument]();
+		this.#loadPage();
+	}
 
-		if (isConnected !== isParentConnected) {
-			if (isParentConnected) {
-				this.#pageLoader.loadPage();
-			} else {
-				this.#pageLoader.unloadPage();
-			}
-		}
+	/**
+	 * Called when disconnected from document.
+	 * @param e
+	 */
+	public [PropertySymbol.disconnectedFromDocument](): void {
+		super[PropertySymbol.disconnectedFromDocument]();
+		this.#unloadPage();
 	}
 
 	/**
@@ -235,4 +247,171 @@ export default class HTMLIFrameElement extends HTMLElement {
 	public override [PropertySymbol.cloneNode](deep = false): HTMLIFrameElement {
 		return <HTMLIFrameElement>super[PropertySymbol.cloneNode](deep);
 	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onSetAttribute](
+		attribute: Attr,
+		replacedAttribute: Attr | null
+	): void {
+		super[PropertySymbol.onSetAttribute](attribute, replacedAttribute);
+		if (attribute[PropertySymbol.name] === 'srcdoc') {
+			this.#loadPage();
+		}
+
+		if (
+			attribute[PropertySymbol.name] === 'src' &&
+			attribute[PropertySymbol.value] &&
+			!this[PropertySymbol.attributes][PropertySymbol.namedItems].has('srcdoc') &&
+			attribute[PropertySymbol.value] !== replacedAttribute?.[PropertySymbol.value]
+		) {
+			this.#loadPage();
+		}
+
+		if (attribute[PropertySymbol.name] === 'sandbox') {
+			this.#validateSandboxFlags();
+		}
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.onRemoveAttribute](removedAttribute: Attr): void {
+		super[PropertySymbol.onRemoveAttribute](removedAttribute);
+
+		if (
+			removedAttribute[PropertySymbol.name] === 'srcdoc' ||
+			removedAttribute[PropertySymbol.name] === 'src'
+		) {
+			this.#loadPage();
+		}
+	}
+
+	/**
+	 *
+	 * @param tokens
+	 * @param vconsole
+	 */
+	#validateSandboxFlags(): void {
+		const window = this[PropertySymbol.window];
+		const invalidFlags: string[] = [];
+
+		for (const token of this.sandbox) {
+			if (!SANDBOX_FLAGS.includes(token)) {
+				invalidFlags.push(token);
+			}
+		}
+
+		if (invalidFlags.length === 1) {
+			window.console.error(
+				`Error while parsing the 'sandbox' attribute: '${invalidFlags[0]}' is an invalid sandbox flag.`
+			);
+		} else if (invalidFlags.length > 1) {
+			window.console.error(
+				`Error while parsing the 'sandbox' attribute: '${invalidFlags.join(
+					`', '`
+				)}' are invalid sandbox flags.`
+			);
+		}
+	}
+
+	/**
+	 * Loads an iframe page.
+	 */
+	#loadPage(): void {
+		if (!this[PropertySymbol.isConnected]) {
+			this.#unloadPage();
+			return;
+		}
+
+		const srcdoc = this.getAttribute('srcdoc');
+		const window = this[PropertySymbol.window];
+		const browserFrame = new WindowBrowserContext(window).getBrowserFrame();
+
+		if (!browserFrame) {
+			return;
+		}
+
+		if (srcdoc !== null) {
+			if (this.#loadedSrcdoc === srcdoc) {
+				return;
+			}
+
+			this.#unloadPage();
+
+			this.#iframe = BrowserFrameFactory.createChildFrame(browserFrame);
+			this.#iframe.url = 'about:srcdoc';
+
+			this.#contentWindowContainer.window = this.#iframe.window;
+
+			this.#iframe.window[PropertySymbol.top] = browserFrame.window.top;
+			this.#iframe.window[PropertySymbol.parent] = browserFrame.window;
+
+			this.#iframe.window.document.open();
+			this.#iframe.window.document.write(srcdoc);
+
+			this.#loadedSrcdoc = srcdoc;
+
+			this[PropertySymbol.window].requestAnimationFrame(() =>
+				this.dispatchEvent(new Event('load'))
+			);
+			return;
+		}
+
+		if (this.#loadedSrcdoc !== null) {
+			this.#unloadPage();
+		}
+
+		const originURL = browserFrame.window.location;
+		const targetURL = BrowserFrameURL.getRelativeURL(browserFrame, this.src);
+
+		if (this.#iframe && this.#iframe.window.location.href === targetURL.href) {
+			return;
+		}
+
+		if (browserFrame.page.context.browser.settings.disableIframePageLoading) {
+			WindowErrorUtility.dispatchError(
+				this,
+				new window.DOMException(
+					`Failed to load iframe page "${targetURL.href}". Iframe page loading is disabled.`,
+					DOMExceptionNameEnum.notSupportedError
+				)
+			);
+			return;
+		}
+
+		// Iframes has a special rule for CORS and doesn't allow access between frames when the origin is different.
+		const isSameOrigin = originURL.origin === targetURL.origin || targetURL.origin === 'null';
+		const parentWindow = isSameOrigin ? window : new CrossOriginBrowserWindow(window);
+
+		this.#iframe = this.#iframe ?? BrowserFrameFactory.createChildFrame(browserFrame);
+
+		this.#iframe.window[PropertySymbol.top] = <BrowserWindow>parentWindow;
+		this.#iframe.window[PropertySymbol.parent] = <BrowserWindow>parentWindow;
+
+		this.#iframe
+			.goto(targetURL.href, {
+				referrer: originURL.origin,
+				referrerPolicy: <IRequestReferrerPolicy>this.referrerPolicy
+			})
+			.then(() => this.dispatchEvent(new Event('load')))
+			.catch((error) => WindowErrorUtility.dispatchError(this, error));
+
+		this.#contentWindowContainer.window = isSameOrigin
+			? this.#iframe.window
+			: new CrossOriginBrowserWindow(this.#iframe.window, window);
+	}
+
+	/**
+	 * Unloads an iframe page.
+	 */
+	#unloadPage(): void {
+		if (this.#iframe) {
+			BrowserFrameFactory.destroyFrame(this.#iframe);
+			this.#iframe = null;
+		}
+		this.#contentWindowContainer.window = null;
+		this.#loadedSrcdoc = null;
+	}
 }

package/src/nodes/html-image-element/HTMLImageElement.ts

@@ -15,7 +15,7 @@ export default class HTMLImageElement extends HTMLElement {
 	public [PropertySymbol.loading] = 'auto';
 	public [PropertySymbol.x] = 0;
 	public [PropertySymbol.y] = 0;
-	public cloneNode: (deep?: boolean) => HTMLImageElement;
+	public declare cloneNode: (deep?: boolean) => HTMLImageElement;
 
 	/**
 	 * Returns complete.

package/src/nodes/html-image-element/Image.ts

@@ -1,4 +1,6 @@
 import HTMLImageElement from './HTMLImageElement.js';
+import * as PropertySymbol from '../../PropertySymbol.js';
+import NamespaceURI from '../../config/NamespaceURI.js';
 
 /**
  * Image as constructor.
@@ -7,6 +9,10 @@ import HTMLImageElement from './HTMLImageElement.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image.
  */
 export default class Image extends HTMLImageElement {
+	public [PropertySymbol.tagName] = 'IMG';
+	public [PropertySymbol.localName] = 'img';
+	public [PropertySymbol.namespaceURI] = NamespaceURI.html;
+
 	/**
 	 * Constructor.
 	 *