Chapter 1: Frames and windows

1.1 Popups and window methods

window.open('https://javascript.info/')

The initial idea of popups to show another content without closing the main window.

Most browsers block popups if they are called outside of user-triggered event handlers like onclick.

If the popup is scheduled by a setTimeout on the onclick event, Chrome will allow and Firefox will block it.

window.open

The syntax to open a popup is: window.open(url, name, params)

url: An URL to load into the new window.
name: A name of the new window.
params
- Position: left, top, width, height
- Window: menubar, toolbar, location, status, resizable, scrollbars (yes/no)

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;
open('/', 'test', params);

The open call returns a reference to the new window.

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

It can only access the content of sites in the same origin. (portocol://domain:port)

window.opener is a reference to the original window.

To close a window: win.close().

Scrolling and resizing

win.moveBy(x,y) (relative)
win.moveTo(x,y) (absolute)
win.resizeBy(width,height) (relativ)
win.resizeTo(width,height) (absolute)

JavaScript has no way to minify or maximize a window.

Scrolling a window

win.scrollBy(x,y)
win.scrollTo(x,y)
elem.scrollIntoView(top = true) - Scroll the window to make elem show up at the top or at the bottom.

Focus/blur on a window

window.focus()
window.blur()

1.2 Cross-window communication

Same Origin

Two URLs are said to have the “same origin” if they have the same protocol, domain, and port.

If we have a reference to another window from the same origin, then we have full access to that window.

Actions that are always allowed:

Change the location of another window (write-only access).
Post a message to it.

iframe

iframe.contentWindow
iframe.contentDocument

Domain

The exception is that windows can be considered as coming from the same origin if they share the same second-level domain.

To make it work, each such window should run the code:

document.domain = 'site.com';

iframe: wrong document pitfall

Upon its creation an iframe immediately has a document, which is different from the one that loads into it. The right document is definitely at place when iframe.onload triggers.

Collection: window.frames

window.frames[0] – the window object for the first frame in the document.
window.frames.iframeName – the window object for the frame with name="iframeName".

window objects form a hierarchy:

window.frames
window.parent
window.top

window.frames[0].parent === window; // true

The “sandbox” iframe attribute

The sandbox attribute will let the iframe be treated as coming from another origin.

However, we can provide a list of restrictions that should be ignored, such as <iframe sandbox="allow-forms allow-popups">.

allow-same-origin
allow-top-navigation
allow-forms
allow-scripts
allow-popups

Cross-window messaging

The postMessage interface allows windows to talk to each other no matter which origin they are from.

postMessage

If we want to send the message to win, we should call win.postMessage(data, targetOrigin).

data: Any data strucutre (only strings in IE)
targetOrigin: Only a window from the given origin will get the message. (* to ignore the check)

onmessage

To receive a message, the target window should have a handler on the message event.

data
origin
source: The reference to the sender window.

Use addEventListener to set hte handler for this event.

1.3 The clickjacking attack

X-Frame-Options

The server-side header X-Frame-Options can permit or forbid displaying the page inside a frame.

DENY
SAMEORIGIN
ALLOW-FROM domain

Set-Cookie: authorization=secret; samesite

PreviousAdditional articles NextChapter 2: Binary data, files

Last updated 4 years ago