®
Solving Cross-Domain Issues When
Building Mashups
Speaker: Mehmet Akin (mehmeta@ie.ibm.com)

Agenda
● Introduction to Mashups
● Same Origin Policy
● Client-side cross-domain solutions
● Server-side cross-domain solutions
● Proprietary cross-domain solutions
● HTML 5 cross-document messaging
● W3C cross-origin resource sharing
● Other cross-domain specification proposals
● Cross-domain security best practices
© 2009 IBM Corporation

What is a Mashup ?
● Web application that integrates data/
components from different providers
● HousingMaps.com = Google Maps + craigslist
© 2009 IBM Corporation

Mashup Communication Types
● Retrieve data from one or more servers
● Communication with/between widgets/gadgets
from different providers
© 2009 IBM Corporation

Ajax Request Types
● XMLHttpRequest
● IFrame
© 2009 IBM Corporation

Same Origin Policy (SOP)
● Document loaded from one origin can not get/
set properties of document loaded from
another origin
● Same origin = same transfer protocol (http or
https) AND same host AND same port
© 2009 IBM Corporation

SOP Impact on XHR
© 2009 IBM Corporation

SOP Impact on IFrames
© 2009 IBM Corporation

SOP Violation
XHR IFrame
© 2009 IBM Corporation

SCRIPT Tag
● JavaScript can be loaded from ANY server
● SOP does not apply
● Can be created programmatically
<script src="http://otherserver.com/test.js"></script>
...
<script>
var myVar = "JavaScript rocks!";
//more JavaScript
</script>
© 2009 IBM Corporation

JSONP (JSON with Padding)
© 2009 IBM Corporation

JSONP Client
var myCallback = function(response) {
//clear timeout, remove script tag, handle response
}
var script = document.createElement("script");
script.src =
"http://otherapp.com/service?jsonp=myCallback";
document.body.appendChild(script);
var errorTimer = setTimeout(function() {
// handle error
}, 3000);
© 2009 IBM Corporation

JSONP Server
protected void doGet(...) throws IOException {
String callBack = request.getParameter("jsonp");
if(callBack != null) {
response.getOutputStream().print(
callBack + "(" + json + ")");
} else {
response.getOutputStream().print(json);
}
}
© 2009 IBM Corporation

JSONP
● Easy
● SCRIPT tag request is GET; URL length limited
to 2083 characters by Internet Explorer
● No error handling like XHR
● JS Response executed directly; can be dangerous
● Server-side changes needed
● Many APIs available from Google, Flickr, Yahoo!,
etc.
© 2009 IBM Corporation

document.domain Property
● Domain name of server that served document
● Defined as read-only in DOM HTML spec
● Can be set to super-domain in all common
browsers, not to top-level domain
● Two documents with same domain and
transport protocol can access each other's
content
© 2009 IBM Corporation

document.domain Proxy
© 2009 IBM Corporation

document.domain Proxy
● http://pc1.myapp.com:8090 :
document.domain = "myapp.com";
...
iFrame.src = "http://pc2myapp.com:8091/proxy.html";
//add to document
...
var xhrProxy = iFrame.contentWindow.getXHR();
xhrProxy.open("GET", "http://pc2.myapp.com:8091/service");
© 2009 IBM Corporation

document.domain Proxy
● http://pc2.myapp.com:8091/proxy.html :
document.domain = "myapp.com";
var getXHR = function() {
return new XMLHttpRequest();
}
© 2009 IBM Corporation

document.domain Proxy
● XHR can be used
● Not full cross-domain; cross-(sub)-domain
● Good for intranet Mashups
● Loading application only with full domain name
© 2009 IBM Corporation

Subspace
● Proposal for secure mashups
© 2009 IBM Corporation

Subspace
● Setup of server domains needed
● Gets more complicated when Mashup integrates
data from more than one provider
● Complex, dependent on browser and browser
settings different functionality needed
– Static authorization vs. dynamic authorization
– Permissive frame access vs. restrictive frame
access
© 2009 IBM Corporation

Fragment Identifier
● Fragment id = window.location.hash
● Setting the fragment id does not reload the page
● Documents with different origins can set, but
not read each other's fragment id
© 2009 IBM Corporation

Fragment Id Usage
● Scroll to specific element with id == fragment id
● XHR back-button handling, bookmarkability
● Custom use, e.g. YouTube
© 2009 IBM Corporation

Fragment Id Messaging
© 2009 IBM Corporation

Fragment Id Messaging
● http://myapp.com :
iFrame.src =
"http://otherapp.com/proxy.html";
...
iFrame.contentWindow.location =
"http://otherapp.com/service.html#" + request;
var interval = setInterval(function() {
var response = window.location.hash.substring(1);
//clear interval, handle response
}, 200);
© 2009 IBM Corporation

Fragment Id Messaging
● http://otherapp.com/proxy.html :
setInterval(function() {
var request = window.location.hash.substring(1);
...
xhr.open(...);
...
parent.location =
"http://myapp.com#" + xhr.responseText;
}, 200);
© 2009 IBM Corporation

Fragment Id Messaging
● Limited by URL length like JSONP
● Simulation of XHR possible, XHR facade
● Setting URLs in iframes creates “click“-sound on
Internet Explorer
● Polling not an optimal solution
● Internet Explorer 8 implements HTML 5
“hashchanged” event
© 2009 IBM Corporation

Cross-Frame Technique
© 2009 IBM Corporation

Cross-Frame Technique
● http://myapp.com/main :
window.name = "myapp";
function handleResponse(response) { ... }
...
xdMain.src = "http://otherapp.com/main";
...
function sendRequest(params) { ...
xdProxy.src = "http://otherapp.com/proxy#" + params;
...
}
© 2009 IBM Corporation

Cross-Frame Technique
● http://otherapp.com/main :
window.name = "otherapp";
function doRequest(params) {
...
mainProxy.src = "http://myapp.com/proxy#" + response;
...
}
© 2009 IBM Corporation

Cross-Frame Technique
● http://otherapp.com/proxy :
var req = location.hash.substring(1)
if(isOpera) {
//restrictive frame access
window.open("", "otherapp").doRequest(req);
} else {
parent.parent.doRequest(req);
}
● http://myapp.com/proxy similar to
http://otherapp.com/proxy
© 2009 IBM Corporation

Cross-Frame Technique
● Cleaner and simpler than fragment id messaging
● Request/response length limited by URL length
● No chunking of large data possible like fragment
id messaging
© 2009 IBM Corporation

SMash (Secure Mashups)
● Proposal by IBM researchers
● Usage of fragment ids and cross-frame access
● Implemented in OpenAjax Hub library of
OpenAjax Alliance
● OpenAjax focuses on interoperable Web, Ajax
libraries and widgets from different providers
© 2009 IBM Corporation

SMash
© 2009 IBM Corporation

window.name Property
● window.frames["winName"] to get a reference
● Used as target in links and forms
● window.open("", "winName") to get reference to
(i)frame and even different browser window
● Keeps same value when navigating to different
pages
© 2009 IBM Corporation

window.name Transport
© 2009 IBM Corporation

window.name Client
● http://myapp.com :
function ifrLoad(iFrame) {
if(iFrame.isLoaded) {
alert(iFrame.contentWindow.name);
} else {
iFrame.isLoaded = true;
iFrame.contentWindow.location = "blank.html";
}
}
function doRequest(params) {
iFrame.innerHTML = "<iframe src='http://otherapp.com?" +
"isWindowName=true' onload='ifrLoad(this)'></iframe>"
}
© 2009 IBM Corporation

window.name Client
● http://myapp.com/blank.html :
<html><head></head><body></body></html>
© 2009 IBM Corporation

window.name Server
String isWindowName = request.getParameter("isWindowName");
if(isWindowName != null) {
response.getOutputStream().print(
"<html><head>" +
"<script>window.name='response';</script>" +
"</head><body></body></html>");
} else {
...
}
© 2009 IBM Corporation

window.name Transport
● Simpler than fragment ids, Subspace and Cross-
Frame
● GET/POST support
● Needs server-side response format change
● Length minimum set to 2MB by Opera
● Error handling like JSONP
© 2009 IBM Corporation

Server-Side Proxy
© 2009 IBM Corporation

Apache HTTP Server
● mod_proxy module
httpd.conf
...
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
ProxyPass /googleSearch http://ajax.googleapis.com/ajax/services/search/web
...
xhr.open("GET", "/googleSearch?v=1.0&q=Ajax");
© 2009 IBM Corporation

Apache HTTP Server
● mod_rewrite module
httpd.conf
...
RewriteEngine On
RewriteRule ^/http/(.*) http://$1 [P]
...
● No regex support for ProxyPass, Apache 2.2
adds ProxyPassMatch to mod_proxy, e.g.
ProxyPassMatch ^/http/(.*) http://$1
© 2009 IBM Corporation

IBM Ajax Proxy
● Websphere Application Server v6.0+, WAS CE
v2.0+
● Free application (.war) to be deployed into EAR
or standalone
● Runs as servlet
<servlet-mapping>
<servlet-name>ProxyServlet</servlet-name>
<url-pattern>/proxy/*</url-pattern>
</servlet-mapping>
© 2009 IBM Corporation

IBM Ajax Proxy
● proxy-config.xml
<proxy-rules ...>
<proxy:mapping contextpath="/http/*" />
<proxy:mapping contextpath="/rss/money_latest.rss"
url="http://rss.cnn.com" />
<proxy:policy url="*" acf="none">
<proxy:actions>
<proxy:method>GET</proxy:method>
</proxy:actions>
</proxy:policy>
</proxy-rules>
xhr.open("GET", "/proxy/http/www.otherapp.com");
© 2009 IBM Corporation

Microsoft IIS
● IIS 5, IIS 6 (Monolithic architecture):
– Not many (free) ISAPI (Internet Server API) filters for
URL-rewriting available
– Managed Fusion URL rewriter (Ms-PL) for IIS 5/6/7:
● Implements most of the Apache mod_rewrite directives
including the [P] modifier for proxying
● IIS 7 (Modular architecture)
– URL Rewrite Module, Application Request Routing
Module for download on IIS website
© 2009 IBM Corporation

Server-Side Proxy
● Full XHR capability
● Highly customizable traffic control with config
files
– Filtering requests
– Max connections (to host)
● Higher server load than client-side solutions
© 2009 IBM Corporation

Flash Plugin
● Placing policy file on server enables cross-
domain access
● /crossdomain.xml (root dir)
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*"
secure="false"/>
</cross-domain-policy>
© 2009 IBM Corporation

Flash Plugin
● Security.loadPolicyFile(path) to load policies from
non-root location
● Security.allowDomain(domain) for
communication between .swf files with different
origins
● Policy file provided by many companies
© 2009 IBM Corporation

Policy Files
© 2009 IBM Corporation

Policy Files
© 2009 IBM Corporation

Microsoft Silverlight
● clientaccesspolicy.xml
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="SOAPAction">
<domain uri="http://www.someapp.com/"/>
</allow-from>
<grant-to>
<resource path="/service" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
© 2009 IBM Corporation

Microsoft Silverlight
● Similar to Flash
● Main difference to Flash is subpath handling
● If no clientaccesspolicy.xml, checks for
permissive crossdomain.xml
<cross-domain-policy>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
© 2009 IBM Corporation

Google Gears
● Cross-origin workers
var workerPool = google.gears.factory.create("beta.workerpool");
workerPool.onmessage = function(a, b, message) {
//handle message.body
};
var childWorkerId = workerPool.createWorkerFromUrl(
"http://otherapp.com/worker.x_js");
workerPool.sendMessage("someParams", childWorkerId);
© 2009 IBM Corporation

Google Gears
● Worker JS must be served as application/x-
gears-worker, worker.x_js:
var wp = google.gears.workerPool;
wp.allowCrossOrigin();
wp.onmessage = function(a, b, message) {
if(message.origin == "http://myapp.com") {
var req = google.gears.factory.create("beta.httprequest");
...
wp.sendMessage(req.responseText, message.sender);
}
}
© 2009 IBM Corporation

Java Applets
● Unsigned applet runs in browser sandbox
● Signed applet can send cross-domain requests
© 2009 IBM Corporation

Java Applets
● As of Java 6 Update 10
– Flash policy file mechanism implemented for
permissive policy with <allow-access-from domain="*" />
– No signing needed for cross-domain access
– Applets can be launched with JNLP file
● Degrading gracefully
<applet code="MyApp.class"
archive="http://server/signed/MyApp.jar">
<param name="jnlp_href" value="http://server/myApp.jnlp" />
</applet>
© 2009 IBM Corporation

Java Applets
● myApp.jnlp
<jnlp spec="1.0+" codebase="" href="">
<information>
<title>MyApp</title>
</information>
<resources>
<j2se version="1.5+"
href="http://java.sun.com/products/ autodl/j2se" />
<jar href="http://server/unsigned/MyApp.jar" />
</resources>
<applet-desc name="MyApp" main-class="MyApp">
</applet-desc>
</jnlp>
© 2009 IBM Corporation

Mozilla Signed Scripts
● Enabling cross-domain requests:
netscape.security.PrivilegeManager.enablePrivilege(
"UniversalBrowserRead");
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.otherapp.com");
© 2009 IBM Corporation

Mozilla Signed Scripts
● Set prefs during development instead of signing:
© 2009 IBM Corporation

HTML 5 Cross-Document Messaging
● Communication between documents from
different origins
● New window function postMessage(string,
targetOrigin)
● New message event to listen to postMessage calls
● Implemented in Opera 9+, FF 3+, IE 8, Safari 4,
Google Chrome 2
© 2009 IBM Corporation

HTML 5 Cross-Document Messaging
● http://myapp.com/index
function receive(e) {
if(e.origin == "http://otherapp.com") {
handle(e.data);
}
}
iFrame.src="http://otherapp.com/index";
window.addEventListener("message", receive, false);
function post() {
iFrame.contentWindow.postMessage("data",
"http://otherapp.com");
}
© 2009 IBM Corporation

HTML 5 Cross-Document Messaging
● http://otherapp.com/index
function receive(e) {
e.source.postMessage("data", "*");
}
window.addEventListener("message", receive, false);
© 2009 IBM Corporation

W3C Cross-Origin Resource Sharing
● Algorithm for cross-domain access
● Access-Control-Allow-Origin: <origin> | *
© 2009 IBM Corporation

W3C Cross-Origin Resource Sharing
● Preflight request if not simple request
● Simple request:
– GET, HEAD
– POST with application/x-www-form-urlencoded,
multipart/form-data, or text/plain
– No custom headers
● Preflight result cache
© 2009 IBM Corporation

W3C Cross-Origin Resource Sharing
● Preflight request:
© 2009 IBM Corporation

W3C Cross-Origin Resource Sharing
● Sending credentials:
© 2009 IBM Corporation

W3C XMLHttpRequest Level 2
● Hosting specification for CORS
● CORS implemented in FF 3.5, Safari 4, Google
Chrome 2 as part of XHR level 2
● Similar usage like XHR level 1, with additional
functionality incl. withCredentials property, e.g.
var invocation = new XMLHttpRequest();
invocation.open("GET", url);
invocation.withCredentials = "true";
invocation.onreadystatechange = handler;
invocation.send();
© 2009 IBM Corporation

IE 8 XDomainRequest
● Lightweight CORS implementation
● Only GET and POST
● No authentication information or cookies sent
● Setting/getting headers not possible, only reading
of “contentType”
var xdr = new XDomainRequest();
xdr.onload=function() {
alert("text" + xdr.responseText + " type: " + xdr.contentType);
}
xdr.open("GET", url);
xdr.send();
© 2009 IBM Corporation

JSONRequest
● Douglas Crockford's proposal for cross-domain
access
● JSONRequest.get, .post, .cancel
● Can only send/receive JSON-encoded data
● Content-type in both directions is application/
jsonrequest
● No authentication information or cookies sent
● Does not meet CORS requirements
● Firefox plugins available
© 2009 IBM Corporation

JSONRequest Sample
requestNumber = JSONRequest.post(
"http://otherapp.com/request",
{
data: "loootsOfData"
},
function (requestNumber, value, exception) {
if (value) {
handleResponse(value);
} else {
handleError(exception);
}
}
)
© 2009 IBM Corporation

Cross-Domain Best Practices
● Sanitize responses from (untrusted) 3rd party web
APIs before calling eval or innerHTML
● Restrict policy files as much as possible
● Deploy services exposed to 3rd party users on a
different domain than the domain that needs
authentication
rd
● If services exposed to 3 party users and need
authentication, do not rely on cookies and send
additional authentication information
© 2009 IBM Corporation

Links
● Same Origin Policy
https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
● JSONP
http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
● document.domain
https://developer.mozilla.org/en/DOM/document.domain
● Subspace
http://www.collinjackson.com/research/papers/fp801-jackson.pdf
● Fragment Identifier Messaging
http://softwareas.com/cross-domain-communication-with-iframes
© 2009 IBM Corporation

Links
● SMash
http://domino.research.ibm.com/comm/research_projects.nsf/pages/
web_2.0_security.smash.html/$FILE/fp332-dekeukelaere.long.pdf
● Cross-Frame
http://www.julienlecomte.net/blog/2007/11/31/
● window.name Transport
http://www.sitepen.com/blog/2008/07/22/windowname-transport/
● Mod_rewrite/mod_proxy
http://httpd.apache.org/docs/2.2/mod/
● IBM Ajax Proxy
http://www-01.ibm.com/software/webservers/appserv/was/featurepacks/
web20/
© 2009 IBM Corporation

Links
● Microsoft IIS Modules
http://www.iis.net/downloads
● Flash Policy Files
http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html
● Microsoft Silverlight Policy Files
http://msdn.microsoft.com/en-us/library/cc197955(VS.95).aspx
● Google Gears
http://gears.google.com/
● Java Applets
http://weblogs.java.net/blog/joshy/archive/2008/05/java_doodle_cro.html
● Mozilla Signed Scripts
http://www.mozilla.org/projects/security/components/signed-scripts.html
© 2009 IBM Corporation

Links
● HTML 5 Cross-Document Messaging
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html
● W3C Cross-Origin Resource Sharing
http://dev.w3.org/2006/waf/access-control/#requirements
● W3C XMLHttpRequest Level 2
http://www.w3.org/TR/XMLHttpRequest2/
● IE8 XdomainRequest
http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
● JSONRequest
http://www.json.org/JSONRequest.html
© 2009 IBM Corporation