I am trying to get a CSV file from the following URL (http://s3.amazonaws.com/misc-ww/data.csv) and parse the data in this file on the fly. What I am trying to achieve by parsing the data in the file is important, feel free to look at the file if you wish to make suggestions on it; however my current problem lies in getting the data in the file itself. When using either XMLHttpRequest, or an Ajax call, or a JSONP call; the response is always returning with error. Meaning that the file for some reason cannot be accessed.
After researching for a few hours, I am sure this has got to do with some kind of security restriction (cross domain request), sadly I have not come any closer to understanding how to get around it. For sample purposes I have created a jsFiddle highlighting my attempt at retrieving the CSV file via an AJAX JSONP call (code seen below).
HTML
<button>Click me to get the CSV File</button>
Javascript
function getCSV() {
$.ajax({
url: "http://s3.amazonaws.com/misc-ww/data.csv",
type: 'get',
dataType: 'jsonp',
success: function(data) {
alert("Success: " + data);
},
error: function(jqXHR, textStatus, errorThrow){
alert("Error: " + jqXHR['responseText']);
}
});
}
$('button').click(function() {
getCSV();
});
My main goal is to be able to achieve this via Javascript alone, however I do welcome any answers that involve jQuery. I am aware of javascript frameworks that could allow this to work for me, but in my case I need to code without them.
You cant really bypass CORS with JSONP calls if server doesn't support them. Its more the way server don't have to set "Access-Control-Allow-Origin: *" header. Instead server can send respond inside callback function to bypass straight JSON response. So your problem is that you .csv file is not wrapped inside a callback function.
So server which supports JSONP and gets ?callback=cbFunc it will print:
cbFunc('here is my file content')
Now you are asking .csv file and server is sending it without wrapping it to callback function. That's why you end up with security restriction.
Long story short: You cant get file via AJAX JSONP like that because s3.amazonaws.com does not support JSONP.
here is nice explanation about JSON and JSONP: http://json-jsonp-tutorial.craic.com/index.html
Sorry about repeating myself.
Related
I have a client-side web-app which is all static html and javascript, and I use JQuery. I am more of a back-end/middle-ware guy with Spring, and so I am not really good withthe front-end stuff.
I have a RESTful API from my client UI to my middle-ware web app written in Spring as a Controller. I can call this successfully, and there is middle-ware business logic where I can a third-party API and it returns HTML. I return this HTML to my client and I was trying to load it in an iframe or within a div tag. Of course, I got all kinds of javascript errors and a lot of CORS issues. So, if this isn't a feasible option to get HTML from another web-site and deploy it on my page, then I am willing to let that go.
I created another RESTful API on my back-end that now just returns a URL this third-party RESTful API. Specifically, I am calling the authorization page for Coinbase, but it could easily be any other third-party authorization page. I have the full URL that they recommend, and I am ready to do something with it.
So, I get a URL (dataType is 'text') like this, and I can see it with an alert:
https://www.coinbase.com/oauth/authorize?
response_type=code&client_id=MY_CLIENT_ID
&redirect_uri=MY_REDIRECT_URL
&state=SECURE_RANDOM
&scope=wallet:accounts:read
I figure I would do a redirect as follows:
window.location.replace(response);
but, what happens is I get an HTTP 404 because my system is pre-pending my UI locahost to that url. So, it looks like:
http://localhost:8080/my_web_ui_app/https://www.coinbase.com/oauth/authorize?
response_type=code&client_id=MY_CLIENT_ID
&redirect_uri=MY_REDIRECT_URL
&state=SECURE_RANDOM
&scope=wallet:accounts:read
And obviously, that is not going to work as I get the HTTP 404 error.
Anything else I should try? Like I said, I am not a good UI guy, but I just need something that works ok.
Thanks!
It was the Ajax call itself.
$.ajax({
url : 'http://localhost:8080/myapp-be/api/myrestapi/authorize',
headers : {'token' : token},
dataType: 'text',
cache: false,
success: function(response) {
console.log(response)
$(location).attr('href',response);
}
});
The dataType: 'text' was the culprit.
The URL was the response, and as 'text', it added another layer of quotes around the response.
Once I removed the dataType from the Ajax call, then the default dataType worked and I no longer got a URL with extra quotes. On success, I was able to do a simple redirect and that worked. Was a simple fix.
Thank goodness for Chrome and the debugging tools so I could see that the response coming back had that extra quotes around it.
I'm new to JS and am trying to execute a function on a site to pull all the data in table in JSON format.
I am using Parse Cloud Code to send my http requests, and the requests themselves are working, but I can't seem to get just the data itself.
It seems I am only able to get it in HTML and even then the objects do not display the same way that they do in the webpage's elements.
Any help/advice would be greatly appreciated!
Thank you in advance.
This is the link:
http://www.capetown.gov.za/Media-and-news#k=thinkwater
Here is the code:
Parse.Cloud.define('hello', function(req, res) {
res.success('Hi');
});
Parse.Cloud.define('htmlTest', function(req, res) {
Parse.Cloud.httpRequest({
method: 'POST',
url: 'http://www.capetown.gov.za/Media-and-news#k=thinkwater',
params: {
action: '/Media-and-news',
id: 'aspnetForm',
onsubmit: 'javascript:return WebForm_OnSubmit();'
},
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}).then(function(httpResponse) {
// success
res.success(httpResponse.text);
}, function(httpResponse) {
// error
res.error('Request failed with response code ' + httpResponse.status);
});
});
You can't execute client-side JavaScript function with an HTTP request.
Here's what happens when you load that page:
Server (the site you're trying to fetch) receives an HTTP request (from you)
Server generates initial HTML and responds to whoever made the above request, be it a browser, or your NodeJS Code. This "initial" HTML is what you get with a simple HTTP request. (which in your case doesn't contain the results you need)
If the HTML was served inside a browser, additional client-side JavaScript code is executed (i.e. the "javascript function" which you're trying to want to execute). This can only happen in a browser (or browser-like) environment. This JavaScript code (or function) modifies HTML (when loaded in a browser-environment, using DOM) and thus the final HTML is rendered. You can't get to these results with a simple HTTP request*, as that will only get you till #2.
*You can find out which URL the client javascript uses to fetch those results itself. Network tab in console tools might help with this. When you click on the button that triggers it to fetch the results keep an eye on which requests are made.
.
In your case it seems to be fetching JSON with a POST request from http://www.capetown.gov.za/_vti_bin/client.svc/ProcessQuery although it doesn't seem straightforward, it makes a series of requests each depending on the previous one, at least that's what it seems on the first glance. Feel free to explore this route yourself.
So in order to get the final HTML you will either
Need the direct URL that serves those results. This is usually the quickest but requires understanding the site's API and how it fetches results if it does so via AJAX (fetching via client-side JavaScript)
Use a fetcher with a browser or browser-like environment. E.g. PhantomJS (deprecated), Puppeteer, selenium, zombie
I got a URL from a ecommerce website and when i access it i get all the last 5 products that i've visited in their site. I don't know how it works, i guess it's because of the cookie that this ecommerce website have left in my browser.
I would like to use this URL to show in my website something like this: "The Last 5 Products You Have Seen at X Ecommerce Website".
But to do that this URL must be executed in somehow in the client side and i will still need to get the JSON content returned by this URL.
Is there exist anyway to do that by using PHP or any other web technology?
Thank you!
It might be cookies, localStorage (there are other APIs to save data on local computer, imo they are unused or deprecated e.g. openDatabase) or last views could be connected with account and saved on internal database.
You should use AJAX, but by default in browser mechanism called CORS blocks all requests coming from other domain than resource.
In PHP you can download external page using file_get_contents function or cURL library, but without localStorage/cookies (which can be accessed from JS executed on domain, where that cookies are saved).
AJAX is your option for client side requests. Here's the jQuery guide for it.
https://api.jquery.com/jquery.ajax/
Here's a quick example:
$.ajax({
url: "http://ecommerce.com/your/url/here",
method: 'get',
dataType: 'json', //if you're sure its returning json you can set this
success: function(data) {
//handle success json here
//be sure that you're going to receive json though, possibly could receive some other data type and you should handle appropriately
},
error: function(error) {
//handle error json here
}
});
I am creating an application, that accepts a ajax call (jquery) and returns the validated user an entry token to the website.
Say for example the ajax is called checkAuth.php and there are all the other php files in this directory. By changing the JS to validate another file like checkMail.php for example:
var xmlRequest = $.ajax({
url: "checkAuth.php",
processData: false,
data: xmlDocument
});
change the url to checkMail.php and create a vulnerability in the site?
var xmlRequest = $.ajax({
url: "checkMail.php",
processData: false,
data: xmlDocument
});
Although the result would return a different object but by doing so would this create an "open door" perhaps where the malicious user would keep sending requests in order to gain access? I understand that the user would have to know that the php file exists however I am unsure how to process this securely whilst maintaining my directory structure.
Please note this is not my actual code and I cant clarify the answer with these other posts or I am not understanding this correctly.
Edit: In addition - would this mean that any site using jquery would be able to ajax request any file from the server and create a vulnerability?
How to authenticate an AJAX request to a PHP file?
Question regarding Ajax Hacking
Ajax Security questions
How to send secure AJAX requests with PHP and jQuery
In general, any AJAX request can access all files which accessible via http request like as user types full URL as the browser address.
So, you have to check security token or something else in the begining of PHP-scripts.
You can restrict access to folders or files using .htaccess, see https://stackoverflow.com/a/11729748/3325396
$.ajax({
type: "POST",
url: "http://images.digu.com/web_res_v1/images/logo.png?t=20091230",
success: function(msg){ alert( "Data Saved: " + msg ); }
});
where is the download file.
thanks
AJAX request actually only 'download' the requested resource into your browser memory. If you request an image like in your code, the image will be put into browser's cache. So if you set an img DOM element's src with the same URL, the modern browser will smart enough to use the one in cache.
If you request a part of web page, not an image like your code above, you can insert it directly into DOM element:
$.get(URL,
{},
function(data){
$("#container").html(data);
});
Read the jQuery documentation about AJAX for more example and explaination.
Btw, AJAX request can be only made to the same domain, so make sure that you only request URL in the same domain with your jQuery code. Your code above will only work if the page also in http://images.digu.com/.
Second note, use POST when you need to send data that will change something in the server side (add, edit, delete). If you just want to request something, use GET. Also, if you don't need extra AJAX setting, I recomend you to use $.post(); and $.get(); so the code will be more readable and easier to maintain, at least it work for me :)
It is loaded into browser memory, and likely your cache. If you're wanting to save the file, you probably don't want AJAX.
It doesn't download to a file or anything. A successful ajax call returns data in a javascript variable. In this case you are saving it into a variable called msg. Depending on your app, you could insert this data into the webpage (i.e into the DOM).
I guess I'd ask for more detail. It seems like you just want to set an image's src property on the fly since I don't see you posting any data. To do that, you can use something like this:
$("#my_image").attr("src","http://images.digu.com/web_res_v1/images/logo.png?t=20091230");