This proposal came out of discussions with the Web Payments WG at TPAC that also included input from members of the WebAuthn WG.
The explainer is at https://github.com/adrianhopebailie/modal-window/blob/master/explainer.md
Problem
There is a need to showing UI from another origin, in a top-level context, without a complete redirect and loss of user context. However the solution must avoid the various issues with pop-ups and click-jacking that have plagued the use of window.open() and <iframe> in the past.
Background
The Payment Handler specification proposes an API to render a URL inside a modal window in order to provide a mechanism for a Payment Handler to show UI.
Clever use of this API demonstrated the general usefulness of this feature for other use cases such as Single-Sign-On and Web Share.
Solution
The proposal is a new API that allows a website to request a modal pop-up window. Only a single modal can be open at a time and communication between the windows will be via PostMessage.
Opener Context (Window or Worker)
const modalWindow = await window.openModal(
'https://authorization-server.com/auth?response_type=code&scope=photos&state=1234zyx');
// modalWindow is an instance of Window (https://developer.mozilla.org/en-US/docs/Web/API/Window)
window.addEventListener('message', (e) => {
// Check origin
if ( e.origin === 'https://authorization-server.com' ) {
// Retrieve data sent in postMessage
const data = e.data;
// Send reply to source of message
e.source.postMessage('some reply', e.origin);
}
}, false);
modalWindow.postMessage('some message', 'https://authorization-server.com');
Modal Window Context
window.addEventListener('message', (e) => {
// Check parent origin is for a valid client
const client = getClientFromOrigin(e.origin)
if ( client ) {
// Retrieve data sent in postMessage
const data = e.data;
// Send reply to source of message
e.source.postMessage('some reply', e.origin);
}
}, false);
window.modalParent.postMessage('some message', '*');
