Behavioral limitations and avoidance methods for browser homology strategies __javascript review of the road

This article is referred to from the Nanyi Teacher's article link in this http://www.ruanyifeng.com/blog/2016/04/cors.html

First, the simple introduction of homologous strategy, that is, three of the same:

	Same protocol, same domain name, same port. Two, the homologous strategy mainly brings three aspect behavior limit: 1, cookie,localstorage and Indexdb cannot read 2, the DOM cannot obtain 3, the AJAX request cannot send three, avoids the method 1, the cookie reads: If two page's first level domain name, Level two domain name is different. At this point can be set Document.domain to share cookies, to give a chestnut: a Web domain name: https:\\a.example.com B page Name: Https:\\b.example.com at this time a, B page JS script set do at the same time
	    Cument.domain = "example.com";
	    Now a page set Cookie:docuemnt.cookie = "Title=hello";
	At this point, the B page can be read through the Document.cookie to the a page set of cookies. You can also specify the domain name of the cookie as a domain name when the server sets the cookie, so that you can read this cookie in the two-level and three-level domain without making any settings: 1, this method applies only to the same level of domain name 2, only for cookies and if
	Rame,localstorage and Indexdb cannot be used. 2, Localstorage and Indexdb read the localstorage of other windows through the postmessage of the H5. For example parent window https://a.com child window https://b.com parent window
           Send Message to child window: var win = document.getElementsByTagName (' iframe ') [0].contentwindow;
           var obj = {name: ' Jack '};
           Win.postmessage (Json.stringify ({key: ' Storage ', data:obj}), ' http://bbb.com '); Localstorage window.onmessage = function (e) {if (E.orgin!== ht) written to the parent window by a child windowTps://b.com ") {return;
	   var data = Json.parse (E.data);
	  Localstorage.setitem (Data.key,json.stringify (data.data)); 3, Dom get three kinds of circumvent methods: 1, fragment identifier, 2, window.name;3, Window.postmessage 1, fragment identifier fragment identifier value is the part of the URL of the #, this part of the change will not cause the page to refresh, but This change can be heard by Window.onhaschange. So the parent window can

Writes the information to the fragment identifier of the child window. such as:
	    the parent window to send information
               var src = orginurl + "#" + data;       

		document.getElementById ("Myiframe"). src = src;

            child window accepts information
	       Window.onhaschange = function () {
		   var message = Window.location.hash;
	       }
	    Similarly, the child window can also change the parent window fragment identifier
	    2, Window.name
    		window.name: Regardless of homology, as long as in the same window, the previous page is set up, the latter page can be read to the
		parent window first open a child window, Loads an Window.name Web page that writes information to the property.
		    window.name = data;
	        Next, the child window jumps back to a URL with the same domain as the main window.
		   location = ' http://parent.url.com/xxx.html ';
		The main window can then read the window.name of the child window.
		   var data = document.getElementById (' MyFrame '). Contentwindow.name;
	    The advantage of this method is that the window.name capacity is very large, can place very long string, the disadvantage is to listen to the child window Window.name property changes, affecting the performance of the Web page.
	    3, PostMessage
		This method can refer to Localstorag.
	4, Ajax
	   1, Jsop
		Basic idea is that the Web page by adding a <script> elements, to the server request JSON data, this practice is not subject to the same-origin policy restrictions; After the server receives the request, The data is returned in a callback function that specifies a name.

	    Client code:

	<script>

    	Mycall (data) {
        	console. log (data);
    	}
   	  Addscripttag (src) {
        	document. createelement ("script");
        	Script.setattribute ("type""Text/javascript");
       		Script.  = src;
        	document. body. appendchild (script);
    	Addscripttag (' Http://127.0.0.1:3000/?callback=mycall ');
	</Script>

	Server side is Node.js code:

	app. Get ('/',function(req,res) {
   		callback = req.query . Callback;
   	 	 data = one;
   	 	Res.send (callback+ "("+data+")");
   	 	Res.end ();
	});

2, WebSocket

		WebSocket is a communication protocol that uses ws://(unencrypted) and wss://(encryption) as the protocol prefix. This protocol does not implement homology policy and can be used for cross source communication as long as the server supports it. The
following is an example of a browser-issued header message for a websocket request.
		get/chat http/1.1
		Host:server.example.com
		upgrade:websocket
		connection:upgrade
		sec-websocket-key: x3jjhmbdl1ezlkh9gbhxdw==
		sec-websocket-protocol:chat, superchat
		sec-websocket-version:13
		Origin: http://example.com the
above code, one of the fields is origin, which indicates the request source (origin) of the request, which domain name is originating from.
it is precisely because of the origin this field, so websocket did not implement homologous policy. Because the server can determine whether to license this communication according to this field. If the domain name is in the whitelist, the server responds as follows.


		http/1.1 Switching Protocols
		Upgrade:websocket
		connection:upgrade
		sec-websocket-accept:hsmrc0smlyukagmm5oppg2hagwk=
		Sec-websocket-protocol:chat

	3, CORS

	Is the fundamental way to solve the Ajax Cross-domain, please refer to the Nanyi teacher's http://www.ruanyifeng.com/blog/2016/04/cors.html