Just Blog: Cross-domain communication problems

Tuesday, February 19, 2013

Cross-domain communication problems

Cross-domain communication 


პრობლემა რიმლისათვისაც ბევრი framework არის დაწერილი, როგორებიცაა მგალითად easyxdm, YUI. მაგრამ საქმე გაცილებით გამარტივდა როდესაც HTML 5 თან გვაქვს უკვე საქმე. 


მაგალითად ავიღოთ 2 დომეინი A.net და B.net. გვინდა მათ შორის გვქონდეს კომუნიკაცია.

XmlHttpRequest ობიექტს ადევს   security  ბრაუზერებისაგან, რომელიც კრძალავს  მიწვდეს მონაცემებს სხვა სერვერზე. ეს კი  Ajax developer ებისთვის სერიოზული ლიმიტია.

წარმოვიდგინოთ გვინდა ასეთი სტრუქტორა. ჩვენ ფეიჯ  A.net ზე გვაქვს iframe რომელშიც არის B.net ის გვერდი. ახლა კი გვინდა კომუნიკაციები მათ შორის. მაგალითად , უმარტივესი, თუ დავაკლიკეთ iframe–ს შიგნით რაიმე ღილაკს, გვინდა A.net ის ფეიჯზე დაფიქსირდეეს და მათ შორის Request -Response კომუნიკაციები გავმართოთ.

ასეთი სტრუქტურები მრავლად არის პრაქტიკაში. მაგალითად Chrome Extension–ს რომ ვწერდი Gmail–ისთვის, მეილის გვერდზე როდესაც ვაწვებოდი Signe Document კნოპკას,  უნდა გამოსულიყო Iframe ჩემი სერვერის. აქ უნდა მქონოდა Listener ები გვერდებზე და Request-responze კომუნიკაციები ჩემ სერვლეტსა და extension -ს შორის.

HTML5-ს შემოთავაზებული გზა ასეთია , ვიძახებთ window.postMessage()-ს რომელსა ორი პარამეტრი გადაეცემა. 1 სტრუქტურა რაც გვინდა გადავცეთ და 2–ე არის მიმღები (ან * ყველასთვის);



stuct=new Object();
stuct.owner="admin";
stuct.status="cancell";
parent.postMessage(struct, "https://mail.google.com"



და მიმღები უსმენს მას:



window.addEventListener("message", function( event ) {
if ( event.data.status === "cancell" ) {
console.log(event.origin)
}
}, false );



მაგალითად iframe ში რაღაცას რო დავაწვები, სერვერზე რო წამოვიდეს პასუხი:

 <!DOCTYPE HTML>
<html>
<head>
<script>
var send= function(){  
   // Post message
   // from Iframe Page to domain A
    parent.postMessage("FROM IFRAME ","http://a.net");
}
</script>
</head>
<body>
INSODE
 <button onclick="send()">Inside The iframe</button>
 
 <script>
  // Listen from Domain A
  window.addEventListener('message', function(event) {
   console.log(event.data+' : '+event.origin) ;
   }, false);
 
</script>
</body>
</html>
 
 
<!DOCTYPE HTML>
    <html>
    <head>	
    <script>
    function sendCommand() {
	//  post massage to domain B
	var  receiver = 
         document.getElementById('frameId').contentWindow;
	receiver.postMessage("MSG", 'http://b.net');
    } 
 
  function load (){ 
	// Leasten messages from Domain B
	window.addEventListener('message', function(event) {
	console.log(event.data+' : '+event.origin) ;					
	return;
	}, false);
   } 
	</script>
  </head>
  <body onload="load()">
  <iframe id="frameId" src="http://b.net/2.html"  onload="sendCommand();">  No Frame!</iframe> 
  <button onclick="sendCommand()">OutSide The Frame</button>
  </body>
</html>

რაც შეეხება Request-Response–ბს. ჰედერში მოგიწევთ Access-Control-Allow-Origin ის ჩამატება.

მაგალითად სერვლეტებში


protected void doPost(HttpServletRequest request, HttpServletResponse response) {
     response.addHeader("Access-Control-Allow-Origin","UR");
...
}

 Ajax–ში თუ გვინდა ჰედერში ასე ჩავამატებთ.

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.setRequestHeader('Access-Control-Allow-Origin', 'URL');

XDomainRequest object  არის, რომელიც IE სთვის. CORS–ს გვთავაზობს Firefox. რომელიც ყველა ბრაუზერში კარგადაა.


function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}



თორემ გამოვარდება ბრაუზერისგან შეცდომა:
XMLHttpRequest cannot load http://b.net/.../. Origin https://a.net is not allowed by Access-Control-Allow-Origin.

Just Blog

Tuesday, February 19, 2013

Cross-domain communication problems

No comments:

Post a Comment