Accessing different host from separate front-end (cross origin) - security

I've built a website with frontend in Polymer (no backend logic) and backend with Symfony and data given only through various APIs.
I have run it on chrome with
-args --disable-web-security
now, after upgrading chrome it doesn't work. What should I do to allow access to separate backend on a separate server that would be considered a good practice?

Have you tried to add this header to your API responses?
Access-Control-Allow-Origin: http://your.client.domain

Related

XMLHttpRequest cannot load http://localhost:5000/api/users/signup due to access control checks

I am using nodeJS and expressJS for backend and ReactJS for frontend of my application. Everything works fine when run locally on my computer. However, I recently have tried to deploy the app using Heroku. The app successfully launches at the given link from Heroku but then whenever I try to sign in/sign up I'm always thrown an error from the backend. The error is as follows when I am using Safari and Google Chrome respectively:
I have already enabled cors on my expressJS server, what is the likely cause of the issue?
It looks like your ReactJS code has the url http://localhost:5000/ hard coded in it somewhere. If your same Heroku instance serves the ReactJS and provides your API endpoints, then you should consider using
/api/users/signup
for the URL of your API endpoint instead of
http://localhost:5000/api/users/signup
This wrong URL shows up as an access control issue because browsers block external pages served by https to use localhost APIs. Because cybercreeps.

Unsecure XMLHttpRequest calls from secure page

in our company we need to implement a self hosted Rest Service that has to be deployed in the client workstations in order for our internal web applications to interact with them.
The web applications are in https, and we are not using, at the moment, the CSP headers.
Our concern is whether it's necessary to call the local service also in https or this can ne avoided (and so we can avoid to manage a certificate to deploy in every single workstation).
We made some trials with Chrome and Edge and it seems that the ajax calls are working also in plain http, but we would like to know if that is actually supported or not. Our internal web applications are not using, at the moment, the Content Security Policy headers.
Thank you!
On an HTTPS connection browsers will block HTTP content as mixed content, CSP will not change that. However, Chrome will allow mixed content on http://127.0.0.1 and http://localhost while Firefox will allow it on http://127.0.0.1, see note on https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content.
When you implement CSP you should include http://127.0.0.1 (or http://localhost) for the appropriate directive.

web-app using nginx and node - which is the web-server?

I have a web-application using nginx as a reverse-proxy and using the express framework as my backend in node.js. I am confused which is the web server. I use react, so the application features client side rendering, and nginx holds these files should it make a difference.
according to developer.mozilla.org
On the software side, a web server includes several parts that control how web users access hosted files, at minimum an HTTP server. An HTTP server is a piece of software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). It can be accessed through the domain names (like mozilla.org) of websites it stores, and delivers their content to the end-user's device.
&
A web server first has to store the website's files, namely all HTML
documents and their related assets, including images, CSS stylesheets,
JavaScript files, fonts, and videos.
Taking this into consideration, I would say that Nginx is the web-server since it holds the html file. However, I really am not sure. Is it one of the two, both or is it a grey-zone?
Web servers provide web pages(HTML) with CSS, JS files that are required to render those pages. In your case, NGINX acts as a web server since it serves with HTML files.
NodeJS has a built-in HTTP module which supports to work with HTTP. We can use NodeJS to create Web servers since they use HTTP. But in this case, NodeJS acts as an API which exposes an HTTP interface to interact with it.

Connect from WordPress webpage to a Node.js backend server

Being new to WordPress, I've been doing some research and yet I don't seem to be able to pinpoint a solution for my need.
In short, I would like to allow a WordPress page to access a Node.js backend, the goal is ultimatly to get access to MongoDB via Node.js, retrieve some data and return a dynamically generated webpage to the website.
I was checking WordPress Rest API but all it seems to do is frontend handling of a WordPress website, creating and editing post, etc.
Unless there's a better way of doing it, I was thinking I might just send a get/post request from the WP page (like, with a form's action) and use Express.js to listen to that request, do the whole workflow on Node.js, then maybe use some npm wordpress API (like this one) to create a wordpress client and add a page or post with the DB extracted content.
I would appreciate some guidance, if any, as to how could one connect from WordPress to a Node.js backend.
Thanks a bunch!
There are a lot of ways to do it.
If you only need Node for a particular page then you can use your web server (NGINX/Apache) to reverse proxy a particular path to the Node server.
If you had to you could always use an HTML iframe as well but for some reason I feel like that's bad advise.
The method you described would work too. I was considering using GET/POST requests with Express running on a different port for a project I'm working on that uses Wordpress. I decided to go with the solution linked below.
This is probably the method you're looking for based on your description. Skip to solution three if you have to use Wordpress.
Node JS Reverse Proxy (with Apache)
You can find how to do it with NGINX with a quick search.

From content scripts, can I make an ajax call to a REST API on hosted on my server?

After reading blogs and some stackoverflow answers while building a chrome extension, I had for some reason thought that we cannot make an ajax call to a REST API hosted on server that comes under another domain than the hosted page. Is this correct? While developing my extension, I mistakenly made a call from a content script on clicking a button on my extension UI (UI is injected into the DOM using content script). I did not ran into any error. Everything went smooth. The host page in my test case is infact a page from stack overflow, and the REST API is hosted on my localhost. Could it be because the api was on local host?
From Chrome XHR documentation:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
Furthermore, from the Content Script documentation:
Content scripts can also make cross-site XMLHttpRequests to the same sites as their parent extensions [...]
So the only thing you need is to add your API endpoint to host permissions in the manifest:
"permissions" : [
"*://api.example.com/*"
]

Resources