Skip to main content

Allowing cross origin requests using CORS and Content Security Policy settings



I learned about Content Security policy (CSP) while working on a project involving a Cordova mobile app which needed to communicate with a back end server I wrote in NodeJS. So I figured I would share with anyone running into this type of issue.
So when I had my server deployed at a url like http://x.y.z:8080

 Without additional configuration, my app would not be able to communicate with the server successfully and I would get a blank screen or some other behavior I did not expect. When debugging (in this case using Safari developer tools because this was Cordova with iOS), I found the calls were getting blocked with this error

 After referring to these documents, 
  1. https://developers.google.com/web/fundamentals/security/csp/
  2. https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/


 I did the following to resolve the issue

 First I added code like this to my nodejs express app.js file to setup the server to send the correct Cross origin headers

 res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Then I configured my Cordova app's index page to allow access to this server using CSP, with something like this
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://x.y.z:8080/ 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">


Of course, tune the CSP settings to make sense and stay secure, for your project

This did it. Hope this is handy when you work on your next project. Happy coding!



Labels:

Comments

Post a Comment

Popular posts from this blog

Authenticating Spring Boot based application against secure LDAP/AD server

Authenticating against an Active Directory setup is quite common in organizations using Spring Boot / Spring Security can be a pain if you don't know exactly the requirements. I needed to add auth in my web app and secure some but not all endpoints of the application. My story was, I needed Spring security to authenticate against my company LDAP server which uses Active Directory I started by using the standard LDAP guide such as this which are all over the Internet, https://spring.io/guides/gs/authenticating-ldap/ and was able to setup the basic framework However, only test level LDAP auth was working for me, when I tried to auth against the company LDAP secure server, I had to resolve a few issues After 1 week and working with several devs at the company, I finally found why it was not working and the fix was easy Since I spent a week or so resolving this, I wanted to write this up in case someone finds this useful. Here is what I did (it was easy until the fourth ...
Post a Comment
Read more

Sending Form data to a backend REST API using Axios

This need is incredibly common and useful, and hopefully will save you a lot of time when doing server side calls from your UI application (or even non UI clients like NodeJS applications) Example here is to send a POST request to an endoint /api/item/new (which will create a new item in the database). We will just assume tbhe backend is already setup (it's not relevant to this article). All we need to know is that we can do a POST /api/item/new and send it form data with two pieces of info     name, filter So, if you have a node.js application (I was using Vue-cli generated project, but it does not matter), install 'axios' (a most popular tool to make server calls these days) npm i axios --save OR yarn add axios (my preferred method) Now, in your service JS file (which is generally when I keep all my api calls) do something like this createNew ( name , filter ) { let formData = new FormData (); formData . append ( "name" , ...
Post a Comment
Read more

Unit testing code that uses environment variables and system properties with fakes

I did not exactly learn this today, but I am sharing it as I have found it extremely useful when unit testing code that depends on environment or system property settings. While I am using Java as an example, the general concepts apply any where. Problem : You have a piece of code you are unit testing that uses settings from env variables or system properties passed to the VM (System.getProperty), but you don't want the tests to be affected by the 'real' environment or system properties in the VM. So, your unit tests should not get different results or fail when the real environment changes. Solution : There are several. But the most straightforward is to use a mocking library to mock out the environment or fake it out, whatever your prefer. You can create a fake using a library like EasyMock, PowerMock etc. This I won't discuss in this post, since there are numerous articles for that. Or you can write a simple class that acts as a proxy, using the proxy pattern...
Post a Comment
Read more