Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to achieve front-end cross-domain and monitoring effect in html5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve front-end cross-domain and monitoring effect in html5" article.

The first step is to set up services with two different ports.

Here we use koa2 to build two services to different ports to simulate the cross-domain situation that needs to occur in real work.

It is very simple and mainly uses koa-static as a middleware.

It is also very easy to build, so there will be no more nonsense here, and there will be detailed construction steps in the code video.

/ / localhost:4000const Koa = require ('koa'); const path = require (' path') const static = require ('koa-static') const app = new Koa (); / / set the path to the static resource const staticPath ='. / static'app.use (static (path.join (_ _ dirname, staticPath)) console.log ("Service starts on port 4000") app.listen (4000); / / localhost:3000const Koa = require ('koa') Const path = require ('path') const static = require (' koa-static') const app = new Koa (); / / set the path to the static resource const staticPath ='. / static'app.use (static (path.join (_ _ dirname, staticPath)) console.log ("Service starts on port 4000") app.listen (4000)

The second step, cross-domain communication postMessage

Let's first take a look at postMessage's API.

OtherWindow.postMessage (message, targetOrigin, [transfer])

OtherWindow

A reference to another window, such as the contentWindow property of iframe, the window object returned by the execution window.open, or a named or numerically indexed window.frames.

Message

The data to be sent to another window. It will be serialized by the structured cloning algorithm. This means that you can safely transfer the data object to the target window without having to serialize it yourself. [1]

TargetOrigin

Specify which windows can receive message events through the window's origin property, which can be a string "" (for unlimited) or a URI. When sending a message, if any of the protocol, host address, or port of the destination window does not match the value provided by targetOrigin, the message will not be sent; only if the three match exactly will the message be sent. This mechanism is used to control which windows messages can be sent to; for example, when sending a password using postMessage, this parameter is particularly important to ensure that its value is exactly the same as the origin property of the intended recipient of the message containing the password to prevent the password from being intercepted by a malicious third party. If you know exactly which window the message should be sent to, always provide a targetOrigin with the exact value instead of. Failure to provide an exact target will result in data disclosure to any malicious site that is interested in the data.

Transfer optional

Is a string of Transferable objects passed at the same time as message. Ownership of these objects will be transferred to the recipient of the message, while the sender will no longer retain ownership.

How is it easy to understand? here's a little bit about Chinese culture.

The (parent) child window to be transferred. PostMessage (the content of the transfer, to which address, [whether permissions are transferred (generally not)])

To mention in advance, in order to transfer across domains, it must be a parent-child page, that is, a page through js Open, or a page nested in ifream.

All right, let's start writing the code.

Document, I am the content of Port 3000 website.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.