Using secure https and returning data - angularjs

I am using a 3rd party API as a booking portal. I am using Angular $http to post to a php curl script on my site that will make the actual call cross site to the API.
factory.bookingRequest = function(reservationData){
return $http({
method: "post",
url: "api-book.php",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: reservationData
}).then(function(response){
return response.data;
});
};
1)
Does the Angular page that is posting to the php page need to be via https also? Or just the script that is responsible for sending the data outside of the site?
2) Also when I get the response back, it has a confirmation number and other details that they have said also need to be via HTTPS.
How would this best be handled? Could I have this as a session cookie and return it to a /booking/confirmation route or return this back to the same page but using ng-show or ng-hide to show confirmation details?
3)
Also when I am sending form data from my Angular route to my Php page in the network tab in chrome dev tools I can see all the information that is getting sent to my php page (Request payload in the headers tab). Just wanted to make sure this was ok also?

Related

Using https rather than http in angular to get data from server

My application has the following architecture,
An angular 1.5 application has a service which sends request to one of endpoints on server.
The request is received by an nginx server if it is an http request it is redirected to https server.
Then the nginx server redirects my request to upstream node server.
In angular I use the http service to send get and post request.
I don't know if my request along with the data are travelling encrypted by https protocol or as plain text by http protocol from angular to server and back.Can someone please clarify what is going on, the data might contains personal details of user and it is important that it is encrypted.
This question asks the same but is not answered properly.
Thank You.
You can force $http to use HTTPS simply by ensuring that your URL is formatted correctly.
var req = {
method: 'POST',
url: 'https://localhost/api/v1/users', // note: https specified
headers: {
'Content-Type': undefined
},
data: { test: 'test' }
}
angularjs docs - $https

AngularJS OPTIONS request to Web API lost

I am trying to make a post request from AngularJS to WebAPI on a different domain.
$http({
method: 'POST',
url: 'http://www.test.com/api/app/controller',
data: postdata,
headers: {
'Content-Type': 'application/json'
}
})
.then(function(response) {
// Do stuff
}, function() {
// Show error
})
.finally(function() {
// Cancel loading indicator
});
I believe Web API is setup correctly to handle CORS requests. If I make a CORS OPTIONS request using Chrome Advanced REST client, the correct headers and a 200 response code are returned.
When I make the POST call above, a preflight OPTIONS request is made. This always times out with a 504 code. The logging in my Application_BeginRequest is never hit (which it is when calling from Chrome plugin).
What is the difference between calling from AngularJS and the Chrome plugin? Both are being run from the same machine and AngularJS is running in an application on localhost. The same headers are being set in both calls.
This was a stupid mistake on my behalf. I am answering the question (rather than deleting) in case somebody does the same.
I was pointing to a service containing a typo:
url: 'http://www.test2.com/api/app/controller',
Instead of:
url: 'http://www.test.com/api/app/controller',
My CORS pre-flight request was working without an issue, it was just never getting to the right server.

How do cookie authentication on couchdb with angularjs

Hey? Can someone hep me to do cookie authentication on CouchDB with AngularJS?
This my code:
var app = angular.module('app', []);
app.controller('mainController', ['$scope','$http', function($scope,$http){
//Authentification cookie
$http.({
url: 'http://localhost:5984/_session',
method: 'POST',
headers: {
Accept: 'application/json',
Content-Type: 'application/x-www-form-urlencoded'
},
data:{
name: "packy",
password: "packy8"
}
}).then(function(response){
console.log(response.headers);
});
}
The problem? i'm not able to read The AuthSesssion Cookie.
Cookies are sent via HTTP headers. If you got a cookie in response you have to dig into the response headers.
Alternatively you can ask the browser via JavaScript to provide the cookie data that was stored automatically from the response into the browser session.
To receive the AuthSession cookie from CouchDB you need to do a POST request to _session. The cookie you get is marked with a HttpOnly flag so it's tricky if not impossible to read it from the browser (at least I wasn't able to).
Once you have the cookie, GET requests to _session will return the logged in user, you don't need to do anything else. The one issue that I ran into was tricking the browser into prompting the "save password for this website" message, it seems they expect the POST request to be made from a standard HTML form not an ajax request. What I ended up with is a mix between sending a POST request using the Angular $http, then if successful do a full form request to _session as well as setting the "next" query param so I get returned to whatever page I need (otherwise you get stuck on the localhost:5984/_session page).

angularjs preflight request fails to load data

I am developing a single page application using Angularjs framework.
inside my homeController i use a service call as below
$http({
method: 'POST',
url: 'http://localhost:1530/api/Profile?username=sa&password=da',
data: { Email: "dmytest#test.com", Password: "saas" },
headers: {'Content-Type': 'application/json'}
}).success();
The problem is that when i am making a api call the browser initiates a preflight request with method options instead of post.
Server responds with all required headers.But the actual call is not done.Preflight request initiates only when using "Content-Type:application/json".
I am posting Json data to server.
Is there any way to either prevent the preflight request nor making a successfull api call?
It is working fine on mobile as well as on ajax call.
Thanks in advance.
Depending on you browser, try forceCORS
Chrome: https://chrome.google.com/webstore/detail/forcecors/oajaiobpeddomajelicdlnkeegnepbin?hl=en
Firefox: http://www-jo.se/f.pfleger/forcecors
Also ensure you have enabled CORS on your Server side. I reference here some examples. Please find out what you platform offers:
JAX-RS: http://www.developerscrappad.com/1781/java/java-ee/rest-jax-rs/java-ee-7-jax-rs-2-0-cors-on-rest-how-to-make-rest-apis-accessible-from-a-different-domain/
JAX-RS: http://cxf.apache.org/docs/jax-rs-cors.html
Nodejs: http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm
Hope this helps.

Request changed from POST to OPTIONS hangs

I am trying to send a POST request to an endpoint over HTTPS.
The request has 2 headers, content-type (application/json) and an apiKey.
I am using the request in a PhoneGap application built in Angular, and when the request is sent its method is changed to OPTIONS.
I know this is standard practice for browsers due to CORS, but I have a payload which I need the server to take, and I'm told by the server guys that OPTIONS requests have an empty payload with CORS (although I can't find verification on this).
The server is set up for CORS and should accept POST and OPTIONS.
For some reason my request hangs.
Angular code:
var submitDBIDResource = $resource(env.loginUserUrl, {}, {
save: {
method: 'POST',
headers: { 'apiKey': apiKey }
}
});
submitDBIDResource.save({"dbid": dbid}).$promise.then(function(data) {
console.log(data);
return data;
});
I have in my config.xml file
Any ideas what I need to do?
Thanks
The browser will automatically send an OPTIONS request before it sends the POST request. The OPTIONS request must respond with the appropriate response or else the browser will not send the POST request.
Your backend guys need to create two request handlers, one for the OPTIONS and one for the POST.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Resources