Html5 postMessage implements cross-origin message transmission, html5postmessage

Html5 postMessage implements cross-origin message transmission, html5postmessage

I. same-origin policy

To understand cross-origin, we must first know what the same-origin policy is. In this way, Baidu encyclopedia defines the Same origin policy: the Same origin policy (Same origin policy) is a convention. It is the core and basic security function of the browser. If the Same origin policy is missing, the normal functions of the browser may be affected. It can be said that the Web is built on the basis of the same-origin policy, and the browser is only an implementation of the same-origin policy.

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

The same-source policy of the browser restricts "document" or scripts from different sources, and reads or sets certain attributes for the current "document. (White Hats talk about web security [1]). According to this policy, JavaScript under the.com domain name cannot perform cross-origin operations on 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 page content under the google.com domain name.

JavaScript must strictly follow the same source policy of the browser, 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. After using the same-origin policy, you can ensure that the page you are viewing actually comes from the browsing domain.

Same-source policy is very important in practical applications. Assume that the attacker uses Iframe to embed the real logon page of the bank into his page. When the user logs on with the real user name and password, this page can read the content in the user form through JavaScript, so that the user name and password information will be leaked.

In the browser, tags such as <script>, <link>, , and <iframe> can all load cross-origin resources. Resources loaded through src are not subject to same-origin policy restrictions, the browser limits the javascript permission and cannot perform various read/write operations. Therefore, even if the request is sent, the sensitive data is returned and cannot be obtained.

Ii. implement cross-origin in postMessage

Syntax:Window. postMessage (msg, targetOrigin)

Window: refers to the target window, which may be a member of the window. frames attribute or a window created by the window. open method.

Message: the message to be sent. This parameter can be any basic type or replicated object of JavaScript, but not all browsers have done this, some browsers can only process string parameters, so we need to use JSON when passing parameters. the stringify () method serializes object parameters. Similar effects can be achieved by referencing json2.js in earlier versions of IE.

TargetOrigin: "target domain", including: Protocol, host name, and port number. If it is specified as "*", it indicates that it can be passed to any window. If it is specified as "/", it indicates the same-source window as the current window.

Get a message from postMessage: add an onmessage event to the page

Copy XML/HTML Code to clipboard

1. Window. addEventListener ('message', function (e ){
3. }

The onmessage event accepts the e parameter, which is an event object.

Several important attributes of e:

1. data: msg passed by postMessage

2. Window object for sending messages

3. origin: Source of the message sending window (Protocol + host + port number)

To write a simple demo:

Http://source.com/source.htmlUsed to send data:

Copy XML/HTML Code to clipboard

1. <Iframe id = "iframe" src = "http://target.com/target.html"> </iframe>
2. <Input id = "msg" type = "text" placeholder = "Enter the message to be sent">
3. <Button id = "send"> send </button>

Copy the content to the clipboard using JavaScript Code

1. Window. onload = function (){
2. Document. getElementById ('send'). onclick = function (){
3. Var msg = document. getElementById ('msg '). value;
4. Var iframeWindow = document. getElementById ('iframe'). contentWindow;
5. IframeWindow. postMessage (msg, "http://target.com/target.html ");
6. }
7. }

Http://target.com/target.htmlUsed to receive data:

Copy XML/HTML Code to clipboard

1. <Div>
2. <H2> target.html. The following are the received messages:
3. <Section id = "msg">
5. </Section>
6. </Div>

Copy the content to the clipboard using JavaScript Code

1. Window. onload = function (){
3. If (window. addEventListener ){
4. Window. addEventListener ("message", handleMessage, false );
5. }
6. Else {
7. Window. attachEvent ("onmessage", handleMessage );
8. }
10. Function handleMessage (event ){
11. Event = event | window. event;
13. If (event. origin = 'HTTP: // source.com '){
14. Document. getElementById ('msg '). innerHTML = event. data;
15. }
16. }
17. }

The running result is as follows:

 

When you click send button, target.html will be sent.

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/MarcoHan/p/5245519.html