DEV Community: mugunthanselvaraj

Understanding CORS, CSRF attacks and enabling valid CORS

mugunthanselvaraj — Sun, 21 Jan 2024 13:33:07 +0000

In this post, using some basic questions will try to explain what CORS is, CSRF attacks, how modern browsers protect from CSRF attacks and how to enable valid CORS when needed.

What is CORS?
CORS stands for acronym - Cross Origin Resource Sharing

When you should worry about using CORS?
Only when you use browsers for API access

When do you see the CORS error?
While using browsers, you may need to incorporate content by sending a request to another domain and you would have landed on a CORS error.

Why do browsers need a CORS policy?
It is a security feature to detect and avoid data sharing and access from different origins.
This is needed to tackle CSRF - Cross-Site request forgery attacks.

What is same-origin policy?
A Security feature to detect and avoid data sharing and access from different origins.

How does CORS secure a website by avoiding CSRF attacks?
Faking websites can mock the request/response of original websites and perform GET/PUT/POST/DELETE operations as shown below:
Browser:
Fake origin request ---------request--------> Bank origin
Fake origin blocked to execute <--------response--------- Bank origin response
Since the browser will be able to differentiate and identify from the response that it is from the bank, it will block it.

Which are all the components used for CORS in a URL?
1. protocol - HTTP or HTTPS should match
2. The domain name should match - e.g. example.com
3. port - 80 or 443 should match

Valid requests
http://example.com && http://example.com/api/rooms

Invalid requests
http://example.com && https://api.example.com/rooms

When do you need to enable CORS?
CORS is important when you use cross-domain browser clients. There is a requirement that you need to share data between your own websites (having different origins say abc.com and xyz.com) through API calls.

How you can enable it?
CORS allows the browser to explicitly whitelist certain origins and relax the browser's same-origin policy

The server will be configured with CORS it will return some extra headers with each response
This response whitelist
* Certain origins
* HTTP methods
* Headers
* Other elements of the request

The browser looks at the response and makes the decision.
CORS requires support on both the server and the browser to work.
The server controls the server's response that whitelists certain origins, but the final decision to allow the response is made by the browser.

What do you do to enable CORS on the origin server?
* Determine which origins to whitelist
* Add CORS middleware to the server

CORS Headers - The following are the related headers for CORS
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method
Origin

Among the above the important header is Access-Control-Allow-Origin
This is used to allow access to which origin resources.
This header is used/enforced by the browser to make a decision on whether this response content can be allowed.
If this response's header contains the current origin (browser url), it is allowed to be rendered. Else not.
Browser:
Origin A (current URL) --------------> Orgin B(another URL)
Origin A (current URL) <-------------- Origin B response
If Origin's B response contains 'Access-Control-Allow-Origin' to allow Origin A, then the browser renders the response. Else blocks it.

Reference:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Enable CORS in ruby on rails:
https://stackoverflow.com/questions/17858178/allow-anything-through-cors-policy

Enable CORS in a Java application:
https://stackoverflow.com/questions/44905898/how-to-enable-cors-on-server-side-code-in-java

Enable CORS in a C# application:
https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-8.0

How to create a static website locally, push it to github, then to AWS S3 using AWS codepipeline and publish it automatically.

mugunthanselvaraj — Thu, 13 Apr 2023 21:59:59 +0000

This post shows how you can create a local static website, push to github, then to AWS S3 using AWS code pipeline automatically for every commit to the remote github repository and publish it as a website automatically.

Step-1 Create your local project

Create your local files for the website using your favorite IDE (like VS code). In my case I created the files in the following location C:\Users\MugunthanSelvaraj\Desktop\MyNewWebSite

Sample html, css and javascript files are given here:
index.html

<html>
    <head>
        <title>My Website using S3</title>
        <link rel="stylesheet" href="index.css"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
        <script src="index.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </head>
    <body>
        <main role="main" class="container">
            <h1 class="mt-5">Welcome Demo page</h1>
            <p class="lead">This is my demo page for S3 web hosting.</p>
        </main>
        <div id="animation">hover over me</div>
    </body>
</html>

index.js

$(document).ready(function(){
    $("#animation").hover(function(){
        $(this).animate({height: "200px"});
    });

    $("#animation").mouseout(function(){
        $(this).animate({height: "100px"});
    });
})

index.css

html, body{
    height: 100%;
}
#animation{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: box;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }


@keyframes box {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }

Step-2 Setup Git repository and push it to remote

To do first time git setup check out this
Use the following git commands to create the repository locally.

Initialize git repository in the project folder. In my case C:\Users\MugunthanSelvaraj\Desktop\MyNewWebSite

git init

Add all files to the repository
git add .
Commit the files to the local repository
git commit -m “my website using AWS S3”

Before proceeding further, you need to have your remote git repository

Create and/or login to your github account
Create a new repository using the ‘new’ button

Give suitable name and description
You can add readme.md file if you need. Click ‘create repository’

Once repository is created in your github account, it will suggest you how to push your local code to remote git repository.

Add remote origin
git remote add origin git@github.com:your_github_account/mynewwebsite.git
Create and name main branch
git branch -M main
Push the code to github
git push -u origin main

After the above commands are successful, you should be able to see your local files successfully pushed to remote git repository

Step-3 Create AWS S3 bucket for code push

In your AWS S3, create a new S3 bucket where you want to push the code from github to and then you will publish it.

Note that the bucket name should be unique across all AWS S3. So have some other name other than shown here.

Uncheck ‘block all public access’

Acknowledge and create the bucket.

Step-4 Create AWS code pipeline to push the code automatically to your S3 bucket

Goto AWS code pipeline

Create new pipeline by giving a name as shown below and press next

Under source stage, select github 1 or 2 depending on which you are using

Click connect to Github. This would prompt github login and show you dialog

Give the connection name as same as your remote github repository name and select connect.

Provide the repository name and branch name of your github repository

Skip the build stage as we are deploying a static website

Under deploy stage, select the deploy provider as ‘Amazon S3’, bucket with the same bucket name which you created

Make sure you check the ‘Extract file before deploy’

Review and create the pipeline.
Your pipeline should be successfully created and deployed after few minutes

Sometimes the above action would fail with error ‘insufficient permission’. Ignore and retry, it should succeed after some time.
Now your S3 bucket would have all the files which you have in your github repository.

Step-5 Making your S3 bucket as a publicly available static website

Goto your S3 bucket and properties tab:

Go below to ‘Static website hosting’ section and click ‘Edit’ button

Enable static website hosting and specify the ‘index document’ with our ‘index.html’ value.

Save the changes.
Now goto the ‘permission’ section of the bucket

Edit ‘block public access’ and uncheck ‘block all public access’

Save and confirm the changes.
Edit the Bucket policy

Use the policy generator

Copy the bucket ARN above and specify the following values as shown below:
Type of policy: S3 bucket policy
Effect: Allow
Principal: * (Allow for all)
Under Actions: select GetObject
For ARN paste the one copied from the above which the Amazon Resource Name for the bucket. Make sure it ends with /* (Else this would give error for the policy)
Add statement and generate the policy.

A pop up would be shown with a generated JSON policy
Copy it and paste it in the bucket policy section for the bucket

Save the changes.
Now got the ‘properties’ section of the bucket. Under Static website hosting, copy the bucket website endpoint.
Paste it in a browser and test it.

Your website should be publicly available now.

Step-6 Checking the codepipeline

Now we have our S3 bucket in sync with our Git repository. Let us check this from our local.
Open your local file. Add some changes and modify index.html.

Add the changes to your local repository
git add .

Commit this change
git commit -m “Adding new changes”

Push it to the remote repository
git push

Observe your AWS CodePipeline. It should have started now to pick up your changes from git remote repository and sync it to S3 bucket

Once this is success, refresh your page browser. You will observe that the local changes are automatically pushed to your static website.

How to create and launch your own secured (HTTPS) web site using AWS EC2, Ubuntu, Nginx, AWS Route 53 and LetsEncrypt?

mugunthanselvaraj — Thu, 06 Apr 2023 15:15:47 +0000

This post explains how you can register your own domain using AWS Route 53, then hosting your own website using this domain over nginx server on an Ubuntu server and securing it (HTTPS) with LetsEncrypt

Step-1 Get domain name in AWS Route 53

You need your public domain name like google.com or amazon.com in order to make the public users access it. Following steps shows how you can purchase a public domain name in AWS Route 53

In AWS console, search Route 53
Select ‘Register domain’. You can select your domain name with extension based on the availability and your price selection.

Add to cart and add registrant contact details.
Check your contact details. Accept Terms & conditions and complete the order. In some cases you may need to complete the payment through AWS billing so that your domain is enabled and available. Once your have your domain name registered with AWS Route 53, you can continue to use this domain for yourself. You should receive an email to confirm your domain as shown: (this would take some time say 30 min)

Confirm this email to further setup your server for website.

Step-2 Host an EC2 instance in AWS with Ubuntu

Goto AWS EC2.
Click Launch instances.
Give a suitable name for your server

Select ‘Ubuntu’ as application OS image

Choose instance type according to your purpose. Here I am choosing t2.micro

Select ‘Create Key pair’ option and create a new keypair to generate a new permission file (*.pem)

Save this file and it will be available only during creation. Make sure you store it carefully so you don’t lose it.
Edit network settings and provide appropriate values

Under inbound security group rules, add the types HTTP and HTTPS

Configure storage based on your purpose. Here I am leaving it as default 8GB.
Review all and select ‘Launch instance’

Step-3 Attach an elastic IP

Once the instance is successfully launched, go to Network&Security -> Elastic IPs

Select ‘Allocate Elastic IP address’

Add new tag ‘Name’ and provide a reasonable name.

Select ‘Allocate’ button.
Once the elastic ip data is created, use ‘associate this elastic ip address’ button to assign IP to your above created ubuntu server.

Select your server and associate this IP with it

Now you would observe this elastic IP is same as your EC2 instance IP address

Step-4 Install and Nginx

You can now connect to your EC2 instance and setup the website

Use ssh command to connect to your EC2 instance (on windows try using Cygwin or Git Bash
To start with make sure you set your pem file downloaded with read-only permission chmod 400 <path to your pem file>
Connect to your server instance using the ssh command, server name and pem file ssh -i <path to your pem file> ubuntu@your_server_name
Input ‘yes’ to add your finger print
Switch root user (as installations will be done as an root user) sudo su -
Update ubuntu apt update
Install nginx apt install -y nginx
This would install nginx and would have started it in background. You can verify the nginx status by systemctl status nginx

Following are the key locations/files where the configurations and files handled by nginx are located:

view the logs
/var/log/nginx

view the configurations
/etc/nginx/nginx.conf
/etc/nginx/sites-enabled/default
/etc/nginx/conf.d/

website location
/var/www/html

Test the nginx configuration without loading using the following command nginx -t

Place your website static files in this location /var/www/html. If the location does not exist, create the same. By default nginx creates this location and place a default index file /var/www/html/index.nginx-debian.html
You can verify this by going to a browser and typing the following: (replace the IP address with your EC2 instance public IP address) http://your_public_ip_address

Now we can continue to have our own web page developed and placed in this location: /var/www/html/

Contents of the page:

<head>
    <title>My Own page</title>
</head>
<body>This is my own web page</body>
</html>

Placed in this location on a file /var/www/html/index.html

In order to point nginx to this new index page, open the default configuration of nginx vim /etc/nginx/sites-enabled/default
Locate the directive index and modify such that our new file is mentioned there, and other file names are removed
Specify the server_name directive with your domain name created above
Test and reload the nginx

nginx -t

systemctl reload nginx

Now if you refresh the URL above in a browser, you should see your own page

Step-5 Test your website with HTTP

Now instead of using the IP address we will map the domain name what we created to this web site
Once you have the domain successfully registered,

Go to ‘Hosted zone’ and select your hosted zone name
Create a new record by specifying your instance public IP address

After the record is created, you can view the status. Make sure that this is in INSYNC
You can verify this domain mapping in Ubuntu using the ‘dig’ command

The same can be verified in windows using ‘nslookup’
Once the above is in place, you now access your website using the domain name what you created http://mugunthanselvaraj.link

Step-6 Securing the website with https using letsencrypt

The current website what we have is http based and is not secured. In order to secure it with SSL/TLS encryption so that it can be accessed over https protocol, we can use letsencrypt to add a SSL certificate to our nginx server.

In order to use certbot (letsencrypt) we need to have snap installed (package manager) in ubuntu. By default this is available. You can verify this by snap version

Verify for latest version apt policy snapd

Download and update it by using the following commands

snap install core; snap refresh core

Remove if you have already have a certbot installed

apt-get remove certbot

Install latest certbot

snap install --classic certbot

Add it to your bin, so that it can be executed using certbot command

ln -s /snap/bin/certbot /usr/bin/certbot

You can verify the cerbot version

certbot --version

Continue to install ssl certificates for your nginx server

certbot -–nginx
This will ask for you email id, in-case you need to be contacted for SSL certificate renewal and notices
Type ‘Y’ for accept terms of service

It would show the available server-names for which the certificate has to be installed for

Just press enter and proceed. This would generate a ssl certificate and configure it in the nginx server.
Now if you access the above website, it would be in https

Finally you have your own website configured in AWS EC2 instance severed through HTTPS protocol.

Step-7 Auto renew certificate:

You can schedule your server to auto renew your SSL/TLS certificate using the following command

certbot renew --dry-run

This would create a timer, which check the SSL certificate expiry periodically and would auto renew it.
You can verify this by the following command and checking the current timers running

systemctl list-timers