[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
XMLHttpRequest RestrictionsMany mobile applications use data from a variety of sources, the most popular example being map-based applications with often combine map data from one site with placemarks and other map overlays from a different source. Depending on the implementation, this design might be limited by the Same-Origin Policy implemented by clients, which originated in an attempt to reduce the risks of Cross-Site Scripting (XSS). In this practical lecture, we look at some of the workarounds that are possible, specifically at JSON with Padding (JSONP), which is a client-based approach, and at reverse proxying, which is a server-based approach.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.cookie("username", "Mr.X");
$.cookie("password", "SuperSecret");
$("#remote").load("include.html");
});
</script>
</head>
<body>
<p>XSS Demo:</p>
<div id="remote"></div>
</body>
</html><p>This is included content ...</p>
<script type="text/javascript">
alert("... and this is injected scripting stealing your cookie:");
alert( document.cookie );
</script>well-behaving3rd-parties can be essential
datafrom 3rd parties can be risky
dataformats have the capability to embed code
reverse proxy
XMLHttpRequest RestrictionsXMLHttpRequest in its original design implements the same-origin policyXMLHttpRequest [http://www.w3.org/TR/XMLHttpRequest] implements the same-origin policyXMLHttpRequest2 [http://www.w3.org/TR/XMLHttpRequest2] is less limited but not yet widely deployedXMLHttpRequest implements the idea of script-based data access{ "JSON" : "Hello World!"}jsonp({ "JSON" : "Hello World!"})padding
http://api.flickr.com/…&format=json&jsoncallback=flickrfeed[http://api.flickr.com/services/feeds/geo/?g=1313291@N20&lang=en-us&format=json&jsoncallback=flickrfeed]
JSONP function call
// Handle JSONP Parameter Callbacks
if ( s.dataType === "jsonp" ) {
if ( type === "GET" ) {
if ( !jsre.test( s.url ) ) {
s.url += (rquery.test( s.url ) ? "&" : "?") + (s.jsonp || "callback") + "=?";
}
} else if ( !s.data || !jsre.test(s.data) ) {
s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?";
}
s.dataType = "json";
}
// Build temporary JSONP function
if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) {
jsonp = s.jsonpCallback || ("jsonp" + jsc++);
// Replace the =? sequence both in the query string and the data
if ( s.data ) {
s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
}
s.url = s.url.replace(jsre, "=" + jsonp + "$1");
// We need to make sure
// that a JSONP style response is executed properly
s.dataType = "script";
// Handle JSONP-style loading
window[ jsonp ] = window[ jsonp ] || function( tmp ) {
data = tmp;
success();
complete();
// Garbage collect
window[ jsonp ] = undefined;
try {
delete window[ jsonp ];
} catch(e) {}
if ( head ) {
head.removeChild( script );
}
};
}XMLHttpRequest requests are subject to the same-origin policyforwardthe request to the 3rd-party URI
LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule rewrite_module modules/mod_rewrite.so
incomingURIs to
outgoingrequests
RewriteEngine On ProxyRequests Off <Proxy *> Order deny,allow Allow from all </Proxy> RewriteRule ^/staticmap(.*) http://maps.google.com/maps/api/staticmap$1 [P]