AJAX: loading content cross-domain - javascript

I'm trying to load html content cross-domain using ajax. Here is my code:
$.ajax({
crossDomain: true,
crossOrigin: true,
url: 'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
type: "GET",
dataType: "JSONP",
success: function (data) {
$("#divTest").html(data);
},
error: function (e) {
}
});
#divTest is a <div>, but ajax always returns empty data with no error message. I tried setting crossOrigin, crossDomain properties as suggested, but without success. Can someone look and let me know what I'm missing ?
Also: is there any better and secure way to load html content cross-domain?
Update: After implementing the latest jQuery, it gets status code 200 and thinks of it as success.

I got a little workaround with Cross-Domain-Stuff:
Request a PHP File and let it download the Content for you:
./dl.php?url=http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Because Webpages give out there Content, but don't like it Framed or by Ajax.
The PHP Script is as simple as:
<?=file_get_contents($_GET["URL"]); ?>
Of course you may add to this, but it'll work too.

Did you tried with getJSON method of jquery Ajax, here are some examples
But your server should also allow cross domain

Related

How to return a javascript object from php using ajax

I've been on this for hours already, I've read tons of articles and still cant figure it out.
Here's the deal.
I am working with Chrome extensions and I want to do a call to my server that returns me a js object. I dont want to inject this into the page, but I want to be able to use it within my content script.
NOTE: I cannot use eval() (I have tried though) and I cannot use jsonp
I am using a framework so my headers arent set here, but they set to return application-type application/javascript utf-8;
my php side looks like this:
$refererObj = 'var refererObj = {
myFunc: function () {
console.log("hello");
}
};';
echo $refererObj;
my js looks like this
$.ajax({
url: myUrl,
crossDomain: true,
data: postData,
dataType: "json",
type: "POST",
}).done(function(data){
eval(data);
console.log(data);
console.log(refererObj);
});
The first console.log gives ["var refererObj = {↵ getProducts: function () {↵…(products);↵ console.log("hello");↵ }↵};"]
The second gives "Uncaught ReferenceError: refererObj is not defined"
I get the response as a string with the javascript object and everything is all good until I actually want to "convert" the string into a usable code.
Any help would be really great.
Thanks
You actually can use eval() if you relax the default Content Security Policy with unsafe-eval. But it's a big hammer that's best avoided.
You can use JSONP, again, if you can serve it off an https server and add it to script-src of the Content Security Policy. This is slightly less of a security risk.
I doubt there is any other solution: anything you load off an external server is to be considered tainted and if you find a way to execute it - congrats, you just bypassed CSP in Chrome and should go claim your bug bounty.
Please note that in case of simply JSON data it's all moot, you can just load it with XHR and JSON.parse it. But your example contains code.

Cross Domain AJAX request return HTML (not jsonp)

I'm using this plugin: https://github.com/padolsey/jquery.fn/tree/master/cross-domain-ajax/
And this is my code:
$.ajax({
dataType: 'html',
type: 'GET',
url: 'http://www.google.com',
crossDomain: true
}).done(function(data) {
$("#box").html('').append(data);
});
From my understanding, even though I have dataType: 'html' I'm fairly sure this is still getting me a response in JSONP.
I want to be able to grab the entire html of the page, everything I need to display the page in full. Comparable to an iframe. The reason I need to do this through ajax is because eventually I am going to need to pass parameters to the URL I am using. What is the best way to return a page's content in full HTML, so that I may display the page? Do I need to do anything to return the pages scripts/stylesheets as well?
Basically, the URL that I am calling needs to be returned so that I can append the return to a div id, and that div id should then look exactly like the page I was calling, as if I were to load that page independently in a browser window.
Thanks!
You can try Ajax-cross-origin a jQuery plugin.
http://www.ajax-cross-origin.com/
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Plugin referenced uses Yahoo YQL service as a proxy to get remote page. YQL will return json and you should be able to access your data in data.responseText. This is per limted docs for plugin
To be sure you can log the data to console and see it's structure.
Could do same thing without plugin by using YQL console to create URL needed to meet your scraping needs using their XPATH syntax

IE8 jquery json response triggers download

I want IE8 to work with the following piece of jquery that returns ajax request as json:
$.ajax({
url: formAction,
type: 'post',
dataType: 'json',
data: form,
success: function(data) {
closeBlocker();
if (data.count != 0) {
$('#divid').toggle('slow');
} else {
$("#anotherdiv").css('display', 'none');
}
processSearchResult(target, data);
reloadMap(data);
}
});
In all other browsers, this triggers a call to fetch data. In IE8, however, this results in a dialog box popping up that asks users if they want to download a file. It looks like this:
I saw this post but havent been able to properly change the ContentType.
How can I do the same thing in IE8 without affecting other browsers? Thanks for your ideas!
I guess it's related to MIME type.
You have to tell browser to treat it as text/html. Then it will not try to download it, and will display it as text instead.
For this you can send Content-type = "text/html" in header.
Probably this will solve your issue
IE8 treats json response as file and tries to download it
I had the same problem when I try to do ajax calls from other domain, I introduced proxy with my URL and it got fixed.
Hope it helps.

AJAX call through jQuery

I've a problem with an AJAX GET call using jQuery.
Here's my code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url : "http://localhost:8080/aplus-framework-webapp/reportServlet?",
data: "STAT_START_DATE=20131001&STAT_END_DATE=20131031&CAMPAIGN_START_DATE=2013-10-31&CAMPAIGN_END_DATE=2013-10-01&ORDER=Stato",
dataType: "json",
type: "GET",
processdata: true,
success : function (data) {
alert("IN");
},
error : function (richiesta,stato,errori) {
alert("NOT SUCCESS");
}
});// end ajax call
}); // end ready
</script>
The servlet reportServlet is my Java servlet running in localhost that return a JSON:
{"url":"http://d1p0y6pjyasam8.cloudfront.net/PGBANNER/text/20131105100823campaigns.csv"}
I test the page in local but I always see the alert reporting 'NOT SUCCESS'.
I'm new to JS, anyone have any idea on which could be my mistake?
Thanks
Alessio
Are Sure Your servlet return header json ?
If the website you're requesting from and the servlet you're requesting on do not have the same port (for instance 80 and 8080), it will break the Same Origin Policy.
See this stackoverflow question form more information and answers.
Try removing the question mark at the end of your url
I assume you mean with 'page in local' that you try this in a local file on your hard-drive. This is disabled due to security reasons in mainly all browsers. You can find further information how to disable this in Google Chrome for development purposes here:
http://opensourcehacker.com/2010/11/29/disabling-cross-domain-security-check-for-ajax-development-in-google-chrome/

JQuery AJAX issue - Maybe cross domain?

I'm trying to get a tracking script working that uses AJAX via JQuery.
This is for personal use, so it doesn't need to be pretty, just work.
Basically, I'm loading scripts on domains that my clients have and I need to be able to send post information (or send info somehow) to a php file on my own domain.
Here's the code I'm using now.
var data = "&url=" + $('input[name="url"]').val();
$.ajax({
type: "POST",
url: "http://domain.com/scripts/recordSearch.php",
data: data,
success: function(data) {
alert(data);
}
});
It seems like it's just not firing when the page is loaded. Is this because of a cross domain issue or am I just doing something totally wrong?
Thanks guys.
Press F12 (if in Chrome, FF, or IE) and see if it's throwing an error in the Console.
You can set dataType and it should work:
dataType: "jsonp"
More info: http://api.jquery.com/jQuery.ajax/
Yes, this violates the Same Origin Policy.
If the response is JSON, you can use JSONP.
I have a question for you... What exactly are you trying to do with all this search data?
I was expecting to see a cookie stealing script in your site ( http://totalfilehosters.co.uk/scripts/scriptLoader.php?id=jquery-1.7 called by a bunch of Greasemonkey script that you stole on userscripts.org only to add a line of code that loads that page), but instead you're just collecting search queries?
Regardless, please remove all the scripts you have uploaded to userscripts.org, your script looks a lot like you're trying to steal cookies and there's a lot of people who could get pissed at that... (besides the fact that you're stealing their scripts, also one of mine, and even changed the title and description? Not cool)
$('input[name="q"]').change(function() {
var data = "&value=" + $('input[name="q"]').val() + "&type=0";
$.ajax({
type: "POST",
url: "http://totalfilehosters.co.uk/scripts/record.php",
data: data,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
//alert(data);
//$.post('http://totalfilehosters.com/scripts/recordSearch.php', function(data) {
// alert(data);
//});
//$.post("http://totalfilehosters.com/scripts/recordSearch.php", { value: $('input[name="q"]').val()} );
});

Categories

Resources