How to call ajax from Excel JS API - ajax

I am new to Office.js API. I am trying to develop Web Add-In for Excel and I need to get data from WebAPI for this I am trying to use ajax but its not working
Here is very simple Ajax code
$.ajax({
url: "http://localhost:61721/api/values",
type: "GET",
dataType:"JSONP",
success: function (data) {
$("#div1").html(JSON.stringify(data));
},
error:function(error){}
});
Update
Is there any alternative way other than Ajax in Office.js through which we can get data from Web API?

From the client, AJAX requests must be send to SSL URIs and those URIs must be declared in AppDomain list of the app manifest. Please refer to: Send POST AJAX request from Office Add-In.
In the same time, if your app has server side portion of code, you may send direct request to any Web API from there. Nobody limit you in technology (REST, microservices, etc.) and nobody check your connection is secure, when using 3rd party resources from your server.

Related

Send POST AJAX request from Office Add-In

I'm trying to send POST Ajax request for third party service from my Outlook Add-in, but no matter what I tried I receiving Error: Access is denied, and status 0 (request never hit the server).
Assuming we are running IE9 or 8 behind the outlook I tried old school hacks like https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest.
$.ajax({
url: endpoint,
data: JSON.stringify({'1':'2'}),
// headers: {'X-Requested-With': 'XMLHttpRequest'},
contentType: 'text/plain',
type: 'POST',
dataType: 'json',
error: function(xhr, status, error) {
// error
}
}).done(function(data) {
// done
});
Is there is something more I need to implement? Of cause I add my domain to manifest AppDomain property.
Cheers
The following needs to be done to send request to 3rd party service ...
Add the service URI to AppDomain list (you've done it.)
The service MUST have SSL endpoint; "https://your.domain" must be included within of "AppDomain" entry (see above)
The service has to allow CORS requests for your application (hosted Outlook App URI) domain or any domain. This is up to the service creators to allow or disallow client apps connections via Ajax.
As of observation of your code I notices you are sending JSON object, but setting content type to "text/plain". Contact the service creators to get information on what type of the data they accept as request. Usually services allow "application/json", but not plain text.

How do I secure my OPEN APIs?

I've an API endpoint hosted (built via Django Rest Framework), for eg:- domain.com/api/fetch_all?start=0&end=50. This fetches all the results from the database in a pagination manner.
Now I'm representing this information on a webpage. Its more or less like an open forum where everyone can read the data, but only some can write. I'm viewing this data onto the webpage via an AJAX request hitting the above endpoint. For eg:-
$.ajax({
type:'get',
contentType: 'application/json',
url:'domain.com/api/fetch_all?start=0&end=50',
cache : true,
dataType:'json',
success:function(data)
{
// presenting the information when the page loads.
}
});
So, my questing is how can I secure my APIs, so that no robots can access the data that I'm presenting on my forum. For eg:- if any code/script tries to access my APIs, it should throw 403 Forbidden error.
import requests
# this should return 403 error
response = requests.get('domain.com/api/fetch_all?start=0&end=50')
However, if I try to get this data via the browser AJAX request, it should return the data. How can I make sure whether the request is coming from a browser(man-handled) or a robot?
PS: I cannot add OAuth functionality over here, since I dont have a login form.
It's not possible to restrict requesters in this way, because a robot could always add headers to spoof being a browser. Anything you do on your client can be copied by an attacker. Without requiring auth, the best you can do is rate limiting - track requests on a per-client basis, and only allow a certain number of requests per time unit.
A partially-functional solution would be to look at the User-Agent header. That should include browser information, and might let you knock out some robots, but not all or even most of them.

AWS S3 static website ajax callback fails

Recently I got to the point to host a static webpage with a subscription option on aws s3 while website development is undergoing. My static web page makes an ajax call to another RESTful service with an email of a subscriber as a parameter. When subscription is done I need to notify a subscriber. Here it seams an issue with the callback.
$.ajax({
type: 'GET',
url: 'http://www.my-domain.com/api/Subscribe?email=' + email
}).success(function (data) {
if (data) {
alert('Thank you for registering!');
}
});
After subscription is done ".success(" doesn't fire up. Response on the request is:
Reload the page to get source for: http://www.my-domain.com/api/Subscribe?email=john.smith#simplyemail.com
Does anyone know if it's an s3 feature or something else?
As per your description this seems to be related with CORS policy.
Look to "why CORS" as Amazon defines it:
In order to keep your content safe, your web browser implements something called the same origin policy.
The default policy ensures that scripts and other active content
loaded from one site or domain cannot interfere or interact with
content from another location without an explicit indication that this
is the desired behavior.
In certain cases, the developer of the original page might have
legitimate reasons to write code that interacts with content or
services at other locations. CORS provides the mechanism to allow the
developer to tell the browser to allow this interaction.
I understood that:
[...] ajax call to another RESTful service[...]
Means call to another server, and this may be blocked by Browser because of CORS.
References:
Mozilla
W3C

Secure communication in a web-service using PhoneGap

I am going to develop a PhoneGap application which is pretty simple.
I need to implement an authentication and some simple data transfer from the phone to the server and vice versa.
I prefer to use ASP.NET as a webservice and our database is MS SQL, but I am not sure what approach I should take to create a secure communication between PhoneGap App and the webservice.
The problem with a simple AJAX request is limitation in cross-domain and I’m not sure if JSONP is a good option.
I was wondering if someone can tell me what technology I should use in order to make a semi secure connection which works with PhoneGap (HTML5, JavaScript) and .NET webservice.
I understand that it’s a general question but I need to know what technology is the best in such a case.
Thanks.
For starters you may use rest interfaces and http authentication, it will be simple and it will help you get going.
JSONP is a good option as long as you sanitize(validate) the input you receive from your request. Furthermore its supported from jquery so you could use something like:
function retrieve(parameter1,parameter2, server)
{
var url1 = 'http://' + server + '/endpoint.php?jsoncallback=?';
$.getJSON(url1,
{
param1: parameter1,
param2: parameter2,
},
function(data)
{
console.log('Data connection OK');
retData = data;
});
}
Regarding security, you could do this request over HTTPS.
At server side, the json reply should be wrapped in a function with the name taken from jsoncallback so you could achieve JSONP.

handling a redirect from a cross-origin post in AJAX

We are trying to create a RESTful API that will be hosted on server x.foo.com. Client html applications (built in jquery) will be hosted on y.foo.com.
I am dealing with cross-domain issues by setting the Access-Control-Allow-Origin header as described here http://www.w3.org/TR/cors/.
So far so good, and I can now successfully make AJAX calls from host y to host x.
However, I ran into a gotcha with POST requests. The typical response to a post request is a redirect. However, the XMLHttpRequest object will not follow cross domain redirects, thus resulting in a failed call.
// Hosted on y.foo.com
$.ajax({
type: "POST",
url : http://x.foo.com/myapp/",
success: function(data) {
alert("success!");
}
});
// Return status: 302
// (Which errors out in firebug)
Anyone know of any techniques to handle the redirect (to a resource on server x) that I get from this post for a client hosted on y?
How about the client sends a special header for AJAX requests, and depending on whether it's an AJAX request or not, you can change the response instead of doing a redirect.

Resources