Lesson 0008 · ~8 minutes

Design review

One skill: given a product need, name the tool and who can talk. Use the rules sheet.

Lesson 7 Glossary Rules sheet Words Mission
Win for this lesson

You can say this in a review: “Is there another WindowProxy? Who must hear? What do I check? When do I close?”

1. Four questions

  1. Is there another WindowProxy? If no, call a function.
  2. Who must hear? One widget, private: a MessagePort. Many same-origin tabs: BroadcastChannel. A few messages to one window: window postMessage.
  3. What do you check? Window: targetOrigin now, event.origin then, then the shape of event.data. Port: you hold the port. event.origin is empty.
  4. When do you close? When you are done with the pair. Transfer already moved port2.

Wait for ready before you send.

2. Practice

Answer as you would in a review.

Question A

A filter control is a React component in this page. Same window. You need to set the query.

Question B

Checkout is one iframe. Ads is another. Only checkout may see the cart.

Question C

You send a session token to a popup with targetOrigin "*". The popup goes to evil.example.

Question D

You set iframe.src and send init in the same tick.

Question E

A widget sends { paid: true }. event.origin is the widget origin you expect.

3. Remember

Ask your teacher If a scenario is not your product, ask. Bring a real review question. That is the next drill.

Primary source (read next)

The rules sheet, then HTML §9.3.2.1.