Breaking the " same origin security policy" with CORS. An example with @GenomeBrowser / DAS.

Jerven Bolleman recently taught me about the CORS/Cross-origin resource sharing:

@yokofakun we support the CORS header. I have not looked at what jsonp needs will investigate

— Jerven Bolleman (@jervenbolleman) May 20, 2014

"Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside of the domain the resource originated from. In particular, JavaScript's AJAX calls can use the XMLHttpRequest mechanism. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy."

I've created a page testing if some bioinformatics web-service support CORS. This page is available at : http://lindenb.github.io/pages/cors/index.html

Interestingly NCBI, Uniprot and UCSC support CORS. As an example, the following <form> fetches a DNA sequence using the DAS server of the UCSC and display it:

Position

The script:

	var UcscCORS={
	createXMLHttpRequest:function(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;
	},
	removeAllChildren:function(root)
	{
	while(root.firstChild) root.removeChild(root.firstChild);
	return root;
	},
	getElementByName:function(root,name)
	{
	if(root==null) return null;
	for(var n=root.firstChild;n!=null;n=n.nextSibling)
	{
	if(n.nodeType!=1) continue;
	if(n.nodeName!=name) continue;
	return n;
	}
	return null;
	},
	fetchUCSC:function()
	{
	var _this=this;
	var ucsc_position=document.getElementById("ucsc_position");
	this.removeAllChildren(ucsc_position);
	var xhr=this.createXMLHttpRequest("GET",
	"http://genome.ucsc.edu/cgi-bin/das/hg19/dna?segment="+
	encodeURIComponent(ucsc_position.value.trim())
	);
	xhr.onload=function()
	{
	var xmlDoc = xhr.responseXML;
	var E= _this.getElementByName(xmlDoc.documentElement,"SEQUENCE");
	E= _this.getElementByName(E,"DNA");
	var sequence=E.textContent.replace(/[ \t\n\r]/g,"");
	var pre=document.getElementById("dna876271863");
	_this.removeAllChildren(pre);
	for(var i=0;i < sequence.length;++i)
	{
	var base=sequence.substring(i,i+1);
	if(i>0 && i%75==0) pre.appendChild(document.createElement("br"));
	var span=document.createElement("span");
	var css="gray";
	switch(base.toUpperCase())
	{
	case "A": css="red";break;
	case "T": css="green";break;
	case "G": css="yellow";break;
	case "C": css="blue";break;
	}
	span.setAttribute("style","color:"+css);
	span.appendChild(document.createTextNode(base));
	pre.appendChild(span);
	}
	};
	xhr.onerror = function()
	{
	var pre=document.getElementById("dna876271863");
	_this.removeAllChildren(pre);
	pre.appendChild(document.createTextNode("ERROR"));
	};
	xhr.send();
	}
	};

view raw ucsc_cors.js hosted with ❤ by GitHub

That's it
Pierre