add ability for embedders to specify urls that should open in a popup with opener (#136383)

This commit is contained in:
Tyler James Leonhardt
2021-11-04 10:16:27 -07:00
committed by GitHub
parent 1c0f29d4a9
commit 68957a66bb
3 changed files with 59 additions and 10 deletions

View File

@@ -1182,7 +1182,7 @@ export function computeScreenAwareSize(cssPx: number): number {
/**
* Open safely a new window. This is the best way to do so, but you cannot tell
* if the window was opened or if it was blocked by the browser's popup blocker.
* If you want to tell if the browser blocked the new window, use `windowOpenNoOpenerWithSuccess`.
* If you want to tell if the browser blocked the new window, use {@link windowOpenWithSuccess}.
*
* See https://github.com/microsoft/monaco-editor/issues/601
* To protect against malicious code in the linked site, particularly phishing attempts,
@@ -1201,19 +1201,49 @@ export function windowOpenNoOpener(url: string): void {
}
/**
* Open safely a new window. This technique is not appropriate in certain contexts,
* like for example when the JS context is executing inside a sandboxed iframe.
* If it is not necessary to know if the browser blocked the new window, use
* `windowOpenNoOpener`.
* Open a new window in a popup. This is the best way to do so, but you cannot tell
* if the window was opened or if it was blocked by the browser's popup blocker.
* If you want to tell if the browser blocked the new window, use {@link windowOpenWithSuccess}.
*
* Note: this does not set {@link window.opener} to null. This is to allow the opened popup to
* be able to use {@link window.close} to close itself. Because of this, you should only use
* this function on urls that you trust.
*
* In otherwords, you should almost always use {@link windowOpenNoOpener} instead of this function.
*/
const popupWidth = 780, popupHeight = 640;
export function windowOpenPopup(url: string): void {
const left = Math.floor(window.screenLeft + window.innerWidth / 2 - popupWidth / 2);
const top = Math.floor(window.screenTop + window.innerHeight / 2 - popupHeight / 2);
window.open(
url,
'_blank',
`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`
);
}
/**
* Attempts to open a window and returns whether it succeeded. This technique is
* not appropriate in certain contexts, like for example when the JS context is
* executing inside a sandboxed iframe. If it is not necessary to know if the
* browser blocked the new window, use {@link windowOpenNoOpener}.
*
* See https://github.com/microsoft/monaco-editor/issues/601
* See https://github.com/microsoft/monaco-editor/issues/2474
* See https://mathiasbynens.github.io/rel-noopener/
*
* @param url the url to open
* @param noOpener whether or not to set the {@link window.opener} to null. You should leave the default
* (true) unless you trust the url that is being opened.
* @returns boolean indicating if the {@link window.open} call succeeded
*/
export function windowOpenNoOpenerWithSuccess(url: string): boolean {
export function windowOpenWithSuccess(url: string, noOpener = true): boolean {
const newTab = window.open();
if (newTab) {
(newTab as any).opener = null;
if (noOpener) {
// see `windowOpenNoOpener` for details on why this is important
(newTab as any).opener = null;
}
newTab.location.href = url;
return true;
}