Html5postMessage implement cross-origin message transfer _ html5 tutorial tips-

This article mainly introduces information about cross-origin Message Transfer Using Html5postMessage. For more information, see 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, script, ,,And other tags can be loaded to cross-origin resources, not limited by the same-origin policy, but the resources loaded through src, the browser limits the javascript permission, cannot perform a variety of read/write. Therefore, even if the request is sent, the sensitive data is returned and cannot be obtained. </P> <strong> 2. Cross-Domain Implementation of postMessage </strong> </p> <p> Syntax: <strong> window. postMessage (msg, targetOrigin) </strong> </p> <p> window: indicates the target window, which may be a window. the member of the frames attribute or by window. window created by the open Method </p> <p> message: the message to be sent. This parameter can be any basic type or reproducible object of JavaScript, however, not all browsers do this. Some browsers can only process string parameters, so we need to use JSON when passing parameters. the stringify () method serializes object parameters. Referencing json2.js in earlier versions of IE can achieve similar results </p> <p> targetOrigin: & ldquo; Target Domain & ldquo;, including: protocol, host name, and port number. If it is set to & rdquo; * & ldquo;, it indicates that it can be passed to any window. If it is set to & rdquo;/& ldquo;, it indicates the same-source window as the current window. </P> <p> get the message sent from postMessage: add an onmessage event to the page </p> <p class = "codeText"> <p class = "codeHead"> copy content from XML/HTML Code to the clipboard </p> <p id = "code_7589"> <ol class = "dp-xml"> <li class = "alt"> window. addEventListener ('message', function (e) {</li> <li class = "alt" >}</li> </ol> </p> <p> the onmessage event accepts a parameter e, it is an event object. </P> <p> several important attributes of e: </p> <p> 1. data: msg passed by postMessage </p> <p> 2. Message sending window object </p> <p> 3. origin: source of the message sending window (Protocol + host + port number) </p> <p> to write a simple demo: </p> <strong> http://source.com/source.html </Strong> used to send data: </p> <p class = "codeText"> <p class = "codeHead"> copy content from XML/HTML Code to the clipboard </p> <p id = "code_6254"> <ol class = "dp-xml"> <li class = "alt"> <iframe id = "iframe" src =" http://target.com/target.html ">

Send

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

2. Target.html. The following are the received messages:

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