My Experiment:
To test cross-site scripting (XSS), I set up an index.html file with a xss.js script that utilized the jQuery.get() function. After opening the index.html in various browsers (Firefox, Chrome, IE, and Opera), I attempted to trigger an ajax request.
The Setup
Here is what my index.html looked like:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XSS Test</title>
<script src="libs/js/jquery-1.7.2.js" ></script>
</head>
<body>
<button id="request" >fire</button>
<script src="libs/js/xss.js" ></script>
</body>
</html>
And this is xss.js:
function init()
{
$('#request').click(loadContent);
}
function loadContent()
{
$.get('http://www.example.com/', null, function(data){
alert('success');
$('body').html(data);
}, 'html');
}
init();
Upon triggering the button within the index.html, here were the responses from different browsers:
Firefox: Received no error code (HTTP/1.1 200 OK) but the response was empty
IE: Did not receive any response
Chrome: Showed "XMLHttpRequest cannot load http://www.example.com/. Origin null is not allowed by Access-Control-Allow-Origin."
Opera: Received no error code (HTTP/1.1 200 OK) and the full HTML file as a response, but nothing displayed due to the success callback not being triggered
This code successfully loaded the index.html into an Android WebView:
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webview = (WebView) findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());
webview.setWebViewClient(new WebViewClient());
webview.loadUrl("file:///android_asset/www/index.html");
}
}
It triggered the success callback and displayed content from www.example.com on the index.html's body upon clicking the button.
(Similar results are expected on iPhone devices, but I have not tested it on Windows Phone devices).
Inquiry Summary:
I am curious about how I can fetch data from a remote server onto my mobile device without facing cross-domain scripting issues. What am I missing?
Most Ajax requests are restricted by the same origin policy due to browser security restrictions, preventing successful retrieval of data from differing domains, subdomains, or protocols.
Additionally: Why does Opera receive a response but fail to display anything?
Any insights would be greatly appreciated.