Proxied Browser Requests with Cookies through a node server - javascript

What I am trying to achieve is displaying html content to a user from another server (external server That I do not own) that is normally accessed through a browser.
To get the right html to display to the user, cookies related to that server's domain must be provided.
APPROACH 1:
Easiest approach I tried is using an iframe. And of course, I got the usual CSP error from the chrome console:
Refused to frame '{{URL}}' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' {{ACCEPTED DOMAINS}}".
APPROACH 2:
I made a local proxy server in node.js and tried to setup a proxied request in browser axios:
axios.get("{{URL to external server}}", { proxy: { host: "localhost", port: 5050 }});
I quickly realized that axios proxy is a node only feature per this issue.
CONCLUSION:
I can't find a way to make a GET request to get html in a browser to a cookie protected and CSP protected server/domain. If I am able to display html in the first place, I can probably use the same system to show a login page to update the user's cookies. Just a heads up I am using react / node.js.
If you know of a better approach that completely scraps away my code or uses a different technology, please share!
Thank you in advance.

Related

Is it impossible to pass cookie cross domain with WebSocket handshake?

Context:
I'm developing a frontend app locally, calling APIs etc cross-domain (from localhost dev server to our server on another machine inside the local network). Since our local network is isolated, the backend server has CORS enabled which doesn't cause security problems; this is different in production (CORS is disabled).
We introduced WebSocket connections in our app and to secure it with authorization we added cookie check on handshake. (XHR requests are authorized via the Authorization header, cookies are not used there; but they actually can be used; WebSocket interface only allows a limited set of headers and if we don't authorize via WS messages, cookies seem to be the only sane option; well, in fact I failed to find if Basic HTTP auth can be implemented without broswer standart prompt, and how to do that)
The problem:
while this actually works for production (when frontend and backend are on the same domain), and cookies are sent in the handshake request inside the Cookie header (the code is trivial: I just set the cookie after getting the auth token), this doesn't work in development environment (localhost + backend on another domain): the Cookie header is just absent in the handshake. The link above shows that XHR needs the withCredentials option to try to pass cookie cross-domain; however, I haven't found a definitive answer whether there's something similar for WS or not. Here the author of a similar question just assumes that there's no such thing, but is it really so?
Double check that the cookies that you're working with are set with SameSite=None and are secure!
I was having the same issue, thinking that the cookies weren't being sent, because the chrome inspector doesn't show them on websocket connection request, but they seem to be once you mark them with same site none and secure.
Alternatively, to quickly check if that's the problem, you can disable the SameSite requirement in chrome://flags/
On another project I've learned a "correct" way to handle this. Usually a higher level protocols are used with WS, like STOMP protocol. It has specific implementation for auth, so no cookies are needed actually; it has no drawbacks regarding CORS.

Reading cookie on html

I am facing problem with cookies. We have our page hosted on weblogic which is accessible through load balancer to our client. Our Client accesses the page through URL and sets some auth information in cookies.
I read cookie on html through javascript and allow the access to page.
It was working fine until yesterday when after a apache server security patch deployment on our client's side. I am not able to read cookies. While in chrome dev tools in request I can see it.
anyone faced this problem ?
It sounds like you do authentication on the front end which is wrong in so many ways I don't know where to start.
They probably set the httpOnly flag on the cookie which restricts javascript access.
If you do security on the front end you have NO security though so this should be a call to action to migrate to performing security on the server.

How can I send cookies of a Web Api back to it from a different front-end application

I have a web application that serves only static contents - HTML, CSS and JavaScript. I have another application which is an ASP.NET Web API. Both applications are on same machine on different ports (for testing purpose and they could be on different machine or domain in production environment). When I browse the web application, it gets both cookie as well as form token of Anti CSRF on first ajax call from Web API. So I am setting the body token as header with setRequestHeader function of XMLHttpRequest. It doesn't seem there is any need to set the cookie token since cookies are restricted with HttpOnly Attribute for a security reason and as far as I know browser is responsible to send the cookie to whichever domain the cookie belongs to.
However, when I make consecutive ajax calls, instead of both these tokens being passed back to server, only the header token is being received by the server.
Currently the Web API is set with CORS restriction for the web application. But if the problem was related to cross origin then I guess, headers could not have been passed as well, correct me if I am mistaken.
So can anyone help me with this problem? I just want to be able to send cookies from one application to another without compromising in terms of security.
Take a look Cookies With My CORS and Set-Cookie in HTTP header is ignored with AngularJS

Enable CORS, WEBAPP,

i am struggling with the following problem. I created a simple webapp that sends via JavaScript „GET“ Operations to a other server.
So the problem is my app is hosted lets say on www.webapp.com/WebContent and the webapp itselfes consumes Data services. This OData Services are hosted on another system www.sap.universityber.com/opu/… so when I want to run the app locally with the reverse proxy (apache) and disable the security settings in chrome everything works fine. But when I want to run it from a normal browser without reverse proxy and the chrome settings it says „NO DATA“, Reason -> CORS.
Can somebody in this forum tell me how such a CORS- Enablement work maybe with an example code?
Please help.
Thanks
Enabling CORS would need to be done by www.sap.universityber.com/opu/, not in your web app. If it's an open API, they may offer a JSONP alternative (JSONP isn't subject to the Same Origin Policy, it does an end-run around it, but it also needs the cooperation of the server providing the content).
In short, you have to specify in your header that you accept requests from other domains. An in-depth read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
A brief example:
Access-Control-Allow-Origin: http://mozilla.com
Do note that this has some implications for your security.
If you own the another system (www.sap.universityber.com/opu/), then you need to set the following response headers in the response from this system for every request:
'Access-Control-Allow-Origin': "www.webapp.com/WebContent",
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'

Avoiding cross-domain Check and Other Browser Security Checks

We're developing a Dynamics CRM 2011 product that has a button in the ribbon that calls an external API. Currently, for this button to work, the following settings need to be changed in the browser (IE):                
We would like to avoid this, because many of the target customers for this product are very security conscious. Is there a way to write the code so that it will not require these permissions to be changed, but still be able to communicate with the external API? The code running when the button is pressed in CRM is HTML and Javascript.
Thanks!
Are you in control of the API? If so, look into CORS. With CORS, all you do is basically add a few extra headers to your request response. If you use an AJAX library (like jQuerys $.ajax), you should be able to continue writing code as is. If not, a good article on how to implement cors in Javascript can be found here: http://eriwen.com/javascript/how-to-cors/
To enable cors, read up on http://enable-cors.org/
I don't know anything about this CRM, but other than JSONP, your best bet is to have a server side script act as a proxy.
So, you would create a script within the same domain as the user interface code. That script will then use a server side language (such as PHP) to perform the request to the cross domain script on your behalf. The server side connection has no restriction on which domain it can access, and all the browser knows is that it is sending a request to a page within the calling domain, which is presumably safe.
How you will do this depends on the exact language of choice, but in general you would just need to send the remote API URL as well as any arguments needed to your server side script, which then rebuilds the request to that URL and passes the result back to the client.

Categories

Resources