Jquery AJAX request with hash deep in URL - javascript

I am working on embedding Sisense into my site and I would like to explore embedding via AJAX rather than the dated Iframe (since I'll have to use a hosted JS file to bind to events, only accessible via a GUI).
I have the following AJAX call (url masked with fake IP):
$.ajax({
url: 'http://99.9.9.123/app/main#/dashboards/4251cc98nc83/widgets/n128cm836chna1?embed=true&r=false',
type: 'GET',
dataType: 'html',
data: {},
success: function(result){
$("#container").html(result);
}
});
When I make this call, the request URL looks like it has been truncated to the location of the hash:
(Ignore the Access-Control-Allow-Origin error. I will be changing that in my environment)
Any idea what is going on here and why I cannot access the full URL via AJAX? I have no access to changing the URL.

This is an issue with $.ajax in jQuery < 3. Indeed everything after # is stripped out from URL. It was fixed in jQuery version 3:
https://github.com/jquery/jquery/pull/2721

With hints from the comment provided, I'm seeing that the hash is never passed to the server:
Can I read the hash portion of the URL on my server-side application (PHP, Ruby, Python, etc.)?
My thought was to decode the hash, hit it via AJAX, and decode it on the server.
Another solution I'm thinking of is to create an endpoint on the server that I can call and pass parameters that correspond to the appropriate dashboard/widget ids. Haven't implemented yet; just a thought.

Related

Jquery ajax call returns URL and load into frame or div

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.

Is it possible to execute an external URL in the client side and get JSON response by using PHP?

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
}
});

Changing a ajax request to a different php file vulnerability, potential exploit clarification

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

How to get a CSV file from an external URL using Javascript

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.

How to manually submit a post request to a server?

I am looking for a way to manually submit a Post request to a server, without using the website's UI. I can see the request headers and the post parameters in Firebug when I perform the action manually (clicking the UI's "submit" button). I am hoping there is a way to reverse engineer some Javascript using these headers and parameters so that we can automate this process.
Reason: My company recently purchased some process automation software that enables us to write automation bots that access out business partner's portal site and automatically adjust our digital marketing bids. For one of our partner sites, front-end manipulation doesn't appear to work, because the Post request is submitted via AJAX.
The software does allow us to execute custom javascript within the environment, so I am trying to construct some Javascript using the headers and request parameters.
Is there a standard template into which I can plug these parameters to execute Javascript that will send the Post request to the server?
Thank you
UPDATE:
Thank you all for your help! I've made some progress but am still having difficulty implementing the solution within the software.
The following request works when I run the code in Firebug in Firefox:
$.ajax({
type: "POST",
url: "http://acp.example.com/campaigns/122828",
data: "data-string"
});
However, the software we're using might be a little out of date and I'm not sure it recognizes the AJAX syntax.
Is there a way to effectively write the same statement above, but in Javascript rather than AJAX? Then I think it would work.
You can use AJAX to post data to a server without any direct UI interaction. I will break down a simple jQuery example below:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
});
$.ajax Is a method offered by the jQuery framework to make AJAX requests simple and cross browser compatible. As you can see I have passed in a JSON object containing various values:
type - This is the first key I have specified, in this instance you'll want this to be of the value POST as this determines the HTTP Request Method.
url - This specifies the server end point, for example: post/data/here.php would post the data to that url so that it can be picked up and handled correctly.
data - This key expects a JSON object, string or array of data to send in the POST request.
success - This key expects a function, it is called on the server's response to the request, with any relevant data passed through.
More documentation is available at: http://api.jquery.com/jquery.ajax/
If all you want to do is POST data, no JavaScript needed.
You should be able to use a browser extension for this. I have one called REST Console that is similar to what you describe. I believe REST Console is for Chrome only, but a quick Google search yielded a similar looking extension for FireFox called RESTClient.

Categories

Resources