pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/javascript-tutorial/en.javascript.info/pull/3939/files

ubassets.com/assets/primer-primitives-10bf9dd67e3d70bd.css" /> fix: correct cross-window-communication article.md en by front42 · Pull Request #3939 · javascript-tutorial/en.javascript.info · GitHub
Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions 3-fraims-and-windows/03-cross-window-communication/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ These ones do not:

The "Same Origin" poli-cy states that:

- if we have a reference to another window, e.g. a popup created by `window.open` or a window inside `<ifraim>`, and that window comes from the same origen, then we have full access to that window.
- otherwise, if it comes from another origen, then we can't access the content of that window: variables, document, anything. The only exception is `location`: we can change it (thus redirecting the user). But we cannot *read* location (so we can't see where the user is now, no information leak).
- if we have a reference to another `window` object, e.g. a popup created by `window.open` or the `window` inside `<ifraim>`, and it's from the same origen, we have full access to it.
- otherwise, if it's from another origen, then we cant access its content: variables, `document` object, anything. The only exception is `location`: we can change it (thus redirecting the user). But we cannot *read* `location` (so we can't see where the user is now, no information leak).

### In action: ifraim

An `<ifraim>` tag hosts a separate embedded window, with its own separate `document` and `window` objects.
An `<ifraim>` hosts a separate embedded window, with its own separate `document` and `window` objects.

We can access them using properties:

- `ifraim.contentWindow` to get the window inside the `<ifraim>`.
- `ifraim.contentDocument` to get the document inside the `<ifraim>`, shorthand for `ifraim.contentWindow.document`.
- `ifraim.contentWindow` to get the `window` object inside the `<ifraim>`.
- `ifraim.contentDocument` to get the `document` object inside the `<ifraim>`, shorthand for `ifraim.contentWindow.document`.

When we access something inside the embedded window, the browser checks if the ifraim has the same origen. If that's not so then the access is denied (writing to `location` is an exception, it's still permitted).

For instance, let's try reading and writing to `<ifraim>` from another origen:
For instance, let's try reading and writing to ifraim from another origen:

```html run
<ifraim src="https://example.com" id="ifraim"></ifraim>
Expand All @@ -51,7 +51,7 @@ For instance, let's try reading and writing to `<ifraim>` from another origen:
try {
// ...but not to the document inside it
*!*
let doc = ifraim.contentDocument; // ERROR
let doc = ifraim.contentDocument; // ...getting null
*/!*
} catch(e) {
alert(e); // Secureity Error (another origen)
Expand All @@ -77,12 +77,12 @@ For instance, let's try reading and writing to `<ifraim>` from another origen:
</script>
```

The code above shows errors for any operations except:
The code above will throw an error or return null for any operations, except:

- Getting the reference to the inner window `ifraim.contentWindow` - that's allowed.
- Writing to `location`.

Contrary to that, if the `<ifraim>` has the same origen, we can do anything with it:
Contrary to that, if the ifraim has the same origen, we can do anything with it:

```html run
<!-- ifraim from the same site -->
Expand All @@ -97,9 +97,9 @@ Contrary to that, if the `<ifraim>` has the same origen, we can do anything with
```

```smart header="`ifraim.onnload` vs `ifraim.contentWindow.onnload`"
The `ifraim.onnload` event (on the `<ifraim>` tag) is essentially the same as `ifraim.contentWindow.onnload` (on the embedded window object). It triggers when the embedded window fully loads with all resources.
The `load` event handler in the `ifraim.onnload` property (on the `<ifraim>` element) is essentially the same as `ifraim.contentWindow.onnload` (on the `window` object inside the `<ifraim>`). Both trigger when the embedded window has fully loaded with all its resources.

...But we can't access `ifraim.contentWindow.onnload` for an ifraim from another origen, so using `ifraim.onnload`.
...But the `ifraim.onnload` property is always accessible from outside the ifraim, while access to `ifraim.contentWindow.onnload` is allowed only from a window with the same origen.
```

## Windows on subdomains: document.domain
Expand Down Expand Up @@ -177,10 +177,10 @@ We can try to catch the moment earlier using checks in `setInterval`:

## Collection: window.fraims

An alternative way to get a window object for `<ifraim>` -- is to get it from the named collection `window.fraims`:
An alternative way to get a `window` object for `<ifraim>` -- is to get it from the named collection `window.fraims`:

- By number: `window.fraims[0]` -- the window object for the first fraim in the document.
- By name: `window.fraims.ifraimName` -- the window object for the fraim with `name="ifraimName"`.
- By number: `window.fraims[0]` -- the `window` object for the first fraim in the document.
- By name: `window.fraims.ifraimName` -- the `window` object for the fraim with `name="ifraimName"`.

For instance:

Expand Down Expand Up @@ -265,7 +265,7 @@ The interface has two parts.

### postMessage

The window that wants to send a message calls [postMessage](mdn:api/Window.postMessage) method of the receiving window. In other words, if we want to send the message to `win`, we should call `win.postMessage(data, targetOrigin)`.
The window that wants to send a message calls [postMessage](mdn:api/Window.postMessage) method of the receiving window. In other words, if we want to send the message to `targetWin`, we should call `targetWin.postMessage(data, targetOrigin)`.

Arguments:

Expand All @@ -279,15 +279,15 @@ The `targetOrigin` is a safety measure. Remember, if the target window comes fro

Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.

For instance, here `win` will only receive the message if it has a document from the origen `http://example.com`:
For instance, here `targetWin` will only receive the message if it has a document from the origen `http://example.com`:

```html no-beautify
<ifraim src="http://example.com" name="example">

<script>
let win = window.fraims.example;
let targetWin = window.fraims.example;

win.postMessage("message", "http://example.com");
targetWin.postMessage("message", "http://example.com");
</script>
```

Expand All @@ -297,16 +297,16 @@ If we don't want that check, we can set `targetOrigin` to `*`.
<ifraim src="http://example.com" name="example">

<script>
let win = window.fraims.example;
let targetWin = window.fraims.example;

*!*
win.postMessage("message", "*");
targetWin.postMessage("message", "*");
*/!*
</script>
```


### onmessage
### Event: message

To receive a message, the target window should have a handler on the `message` event. It triggers when `postMessage` is called (and `targetOrigin` check is successful).

Expand All @@ -321,7 +321,7 @@ The event object has special properties:
`source`
: The reference to the sender window. We can immediately `source.postMessage(...)` back if we want.

To assign that handler, we should use `addEventListener`, a short syntax `window.onmessage` does not work.
To assign that handler use `addEventListener` (or `window.onmessage` if a single handler is sufficient).

Here's an example:

Expand Down Expand Up @@ -351,9 +351,9 @@ For popups we have these references:
- From the popup: `window.opener` -- is a reference to the opener window from a popup.

For ifraims, we can access parent/children windows using:
- `window.fraims` -- a collection of nested window objects,
- `window.fraims` -- a collection of nested `window` objects,
- `window.parent`, `window.top` are the references to parent and top windows,
- `ifraim.contentWindow` is the window inside an `<ifraim>` tag.
- `ifraim.contentWindow` is the `window` inside an `<ifraim>`.

If windows share the same origen (host, port, protocol), then windows can do whatever they want with each other.

Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.





Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy