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

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

Two cool ways to center content in CSS

You may have seen this question, center a div, or whatever, in interviews or other places. I am sure there are other approaches than I am sharing here, but I found these two cool ideas from multiple places (see refs at the end). These are not my original ideas so I will be sure to share where I learned these from:   Using display:flex  Make sure you know how flex works, but to do centering with flex, it's ridiculously simple: div .container { display : flex ; justify-content : center ; /* horizontal alignment */ align-items : center ; /* vertical alignment */ flex-direction : column ; /* since we are doing a vertical column */ padding : 1rem 3rem ; /* not related to centering */ }  Now everything inside <div class="container"> </div> will be centered in both directions! Using display:grid  You are so going to thank for me this one, you are welcome. This one is so simple it does not even need an explanation does it?   div .conta...
Post a Comment
Read more

Remote debugging of python code in Visual Studio Code

Remote debugging with python and visual studio Code In terminal install debugpy into your environment with something like     python -m pip install debugpy Create a visual studio launch configuration and add following to it following (or just use vs code create configuraiton button to easily create it choose type Python and select from the list, 'Remote attach') { "name" : "Python: Remote Attach" , "type" : "python" , "request" : "attach" , "port" : 5678 , "host" : "localhost" , "pathMappings" : [{ "localRoot" : "${workspaceFolder}" , "remoteRoot" : "." }] }, Run this in the command line to start a debugging server with your script runner python3 -m debugpy --listen 1.2.3.4:5678 --wait-for-client Yourscript.py Now run the launch configuration from vs code to attach to this debugger
Post a Comment
Read more