Html5 postMessage implements cross-domain messaging_html5 tutorial skills

1. Same-origin strategy

To understand cross-domain, we must first know what the same-origin policy is. Baidu Encyclopedia defines the same origin policy as follows: Same origin policy is a convention. It is the core and most basic security function of the browser. If the same origin policy is missing, the normal functions of the browser may be impaired. affected. It can be said that the Web is built on the basis of the same-origin policy, and the browser is just an implementation of the same-origin policy.

What is the same origin: If the domain name, protocol, and port of two URLs are the same, it means that they have the same origin.

The browser's same-origin policy restricts "documents" or scripts from different sources from reading or setting certain attributes on the current "document". (White hat talks about web security[1]). According to this policy, JavaScript under the a.com domain name cannot cross-domain operate objects under the b.com domain name. For example, the JavaScript code contained in the page under the baidu.com domain name cannot access the content of the page under the google.com domain name.

JavaScript must strictly follow the browser’s same-origin policy, including Ajax (in fact, Ajax is also composed of JavaScript). Ajax requests implemented through the XMLHttpRequest object cannot be submitted to different domains. For example, pages under abc.test.com cannot submit Ajax requests to def.test.com. By applying the same-origin policy, users can ensure that the page they are viewing actually comes from the domain they are browsing.

The same-origin strategy is very important in real-life applications. Assume that the attacker uses Iframe to embed the real bank login page on his page. When the user logs in with the real username and password, the page can read the contents of the user form through JavaScript, so that the username and password information It was leaked.

In the browser,