This article is mainly about the use of PostMessage. While there are a handful of PostMessage documents in search engines, mostly introducing apis, explaining how it can cross domains, etc., there is not much discussion about how it can be used in practice.

First, let’s outline how PostMessage works

PostMessage is a new cross-source communication API introduced in HTML5 that allows you to two-way communication between your home page and any Frame-class page or window-open page. Its general operation process is as follows:

In short, with PostMessage, you can communicate between two web pages across domains. A few things to note about its use:

  • First, the security of information transmission. In order to convey your information accurately, whether it is the main page or the sub-page, you should fill in origin instead of “*” when passing important information to avoid being intercepted.
  • Second, the iframe or window.open load event is not accurate. To avoid missed sending and missed receiving, you are advised to return the loading status on the communication page.

In addition, its compatibility is also very gratified, a piece of green oil, can rest assured bold use. (Data source:caniuse)

If you need to learn more about how to use the API, you can refer to the [detailed documentation], but I will not go into details

After understanding, start to enter the main topic

If only to solve ajax cross-domain, in fact, there are many solutions, such as CORS, JSONP and so on is enough. The value of PostMessage should be the ability to link two different web pages.

Without PostMessage, it’s not feasible to communicate directly with a site, and the browser’s security policies will limit everything you can do. In this case, the only thing you can communicate with is the server interface of that site, through cross-domain support. This method is very robust and has obvious disadvantages:

  • Need to communicate with the other server, cross-domain is required to support additional Settings, this needs to communicate with the other side negotiation.
  • If you need to extract a value from the other party’s web page, or notify the other party of an interaction change, there is no other way to do this except through Ajax polling and the server delivering the information on its own.

【A】 the main page, 【B】 the iframe or window.open page.

  • [A] requires the information obtained in [B] for adaptation, such as obtaining the width and height of web documents for adaptive pop-ups, etc.
  • When [B] the API of the server is not used externally, it does not provide cross-domain support, but [A] needs to use [B] API service support. In this case, [B] only A postMessage-based service is needed to support the operation from validation to invocation, and [A] no Ajax requests are needed in the process to get the corresponding results.
  • Page real-time callback. For example, let’s say you want to create a store, and when your order page goes to the payment step, you use window.open to open the payment platform page.

Normally, you need Ajax to poll the order status, or a pop-up like “Has the payment been completed?” To get the order status in Ajax when the user operates. With PostMessage, you can get real-time feedback from the payment platform, such as whether the user has completed/cancelled the order. When the user returns to your page, the feedback can be displayed.

The following uses the third party login SDK to expand the idea of explaining.

First of all, remember, we’re the ones providing the service. For CP and users, the API provided should be one-click operation mode, the more concise the better, such as initialization and other logic should be completed automatically on our side. In this context, it would be easiest to provide CP with a reference to sdk.js, which cp only needs to reference and call.

Then your SDK should:

  • Automatically completes initialization, such as instantiating the SDK, creating queue staging tasks, and listening for information
  • Silent iframe opens the communications support page to establish contact
  • Once in the runnable state, the backlog of tasks in the queue is automatically run
  • When the SDK request is triggered by the user action page, the request data format is detected and the request is made through PostMessage
  • Get information from the newsletter support page, automatically filter, categorize and execute

The support page for the newsletter is:

  • The first round of verification is performed when the load is opened
  • Upon receiving the authentication information, check whether it matches the whitelist
  • When additional requests are received, the whitelist determines whether or not to provide services. If yes, relevant requests are initiated again and results are obtained. Otherwise, the service is denied. In the end, whether it succeeds or fails, it responds with a PostMessage.

The operation logic flow chart is as follows:

From what has been discussed above, The PostMessage simple application gives you cross-domain support for messages between different pages; In advanced applications, it can set up a secure, real-time, bandwidth-free [service platform] between a server and a third party that works like a server back end. PostMessage is simple to use, but when used well, it can be a real dagger

This concludes the article, thank you for reading!