Forem: Karan Sharma

Frontend Security - Something to care about?

Karan Sharma — Sun, 18 Sep 2022 13:54:36 +0000

In recent times, modern web applications are growing at a rapid pace. Responsibility for a strong and safer application should be shared between the backend as well as the frontend. Most of the security practices were being utilized in the backend side of the code but now it's becoming equally crucial to use the best security practices that will protect the frontend side of the code because of the increased cyber attacks, after all, frontend is the main window to the whole application. So, it is better to make your application safe on the entrance as well.

In this article, we’ll go through some of the common attacks that take place and the best practices that can be used to safeguard your applications from them.

Cross-Site Scripting (XSS) Attack
Cross-Site Scripting (XSS) is a form of attack whereby an attacker injects malicious scripts into a trusted website. The attacker then proceeds to send you malicious codes that look like the side script of your browser.

When other users access the web application, since the browser does not know that it is malicious as it was served by the backend, this malicious script is executed.

a) An attacker with a malicious script accesses the application.
b) He fills up a form and inputs a malicious script in the form field.
c) The malicious script reaches back-end systems via a form field data and is saved in the database.
d) When some legitimate user accesses the application, he is served with the malicious script by the application’s backend. The browser doesn’t know it is a malicious script and executes it.

The malicious scripts sent are configured to access your sensitive data, session tokens, cookies, browser history, and more.

Prevention

Filter input on arrival- When the input is received, filter data based on what is expected or valid input.
Encode data on output- When user-controllable data is provided in HTTP responses, encode the output to prevent it from being executed by HTML parser. Depending on the output context, this might require applying combinations of HTML, URL, JavaScript, and CSS encoding.
Use appropriate response headers- To prevent XSS in HTTP responses that aren’t intended to contain any HTML or JavaScript, we can use the Content-Type and X-Content-Type-Options headers to ensure that browsers interpret the responses in the way you intend. Eg. A JSON data should never be encoded as text/html, to prevent it from accidental execution.

DDOS Attack
A Distributed Denial-of-Service (DDoS) attack is the process of overwhelming a website with too much traffic to a point where it crashes. Due to the high volume of DDoS attacks, the attacker manipulates hundreds or thousands of systems to generate the high traffic targeted at your web application to wear it out.

Prevention

Using Captcha at public-facing endpoints (login, registration, contact) — a captcha is a computer program or system intended to distinguish humans from bots.
Most of the DOS attacks are carried out using bots. Captcha identifies bots and prevents them from making requests.

Google’s reCaptcha is a highly advanced service to protect bots from abusing your applications.

Cross-Site Request Forgery
Cross-Site Request Forgery (CSRF) involves an attacker luring you into taking harmful action on a website that has been authenticated with your login credentials. This kind of attack is mostly executed with download forms.

It can be tiring to always enter your login credentials into websites that you visit frequently. You might choose to make it easier by saving your login information on the website. Although this is a common practice, it can be a problem.

An attacker could send you a download link from a website that you have saved your credentials on. If you download the file, you unknowingly perform a malicious transaction.

Prevention

For every session of a user, the server should generate a randomized token (CSRF Token) and send it to the client. The client can save the token, from where javascript can read it.

When a web application is making an HTTP request, the application should include that randomized token (CSRF Token) in the header of each request.

The value of this token should be randomly generated such that it cannot be guessed by an attacker. We should use a well-known hashing algorithm such as SHA256/512 for generating tokens.

Using third-party libraries

Implementing third-party libraries to enhance the performance of your system is necessary. The more third-party software, the more functions you can execute on your web application as each one serves a unique purpose. But sometimes, these libraries might have loopholes that could expose your system to cyberattacks.

For instance, if you offer a service that requires your clients to make online payments. Instead of creating your own billing software, you might choose to implement a third-party billing software that will get the job done. If the billing system isn’t well secured and suffers a security breach, your clients' payment information will be exposed and their money can be stolen.

Prevention

One sure way to prevent third-party library attacks is to scan all the third-party libraries that you use. Doing this manually can be complex and time-consuming, especially if you are dealing with a large web application. But you can automate the process by using vulnerability scanners to detect existing threats.

One of the most crucial practice that every developer should know about and should often use is Content Security Policy (CSP).

The main issue that comes up in XSS is the browser’s inability to distinguish between script intended to be part of your own application. A website can have multiple scripts from different sources, being used. The browser will happily download and execute any script that it comes across.

Instead of blindly trusting everything that a server delivers, CSP defines the Content-Security-Policy HTTP header that allows you to create a whitelist of sources of trusted content and instructs the browser to only execute or render resources from those sources. Even if an attacker can find a hole through which to inject script, the script won’t match the whitelist, and therefore won’t be executed.

A very important point to note here is that CSP provides prevention against scripts based on origins and hence it would not prevent any inline scripts from execution. Origin based whitelisting doesn’t solve the biggest threat to XSS attacks using inline script injection.

CSP solves this problem by banning any inline scripts entirely. Hence we will have to move any inline js within the script tags to external script files. External scripts are already considered as the best practice. They are easier for browsers to cache, better for developers, better for minification.

Cyber attacks have only grown through the period of time. Attackers seize even the slightest of the opportunity they get. So, it’s better to be more secure from your end. Protecting the application from the backend only won’t solve the issue. Frontend too, should be given a priority and should not be overlooked.

RESOURCES I USED TO LEARN BLOCKCHAIN/SMART CONTRACT PROGRAMMING

Karan Sharma — Sat, 08 Jan 2022 15:02:20 +0000

Blockchain was one of the hottest topics in 2021. Many people got to know about it, some started investing in cryptocurrencies or NFTs, focussing on the finance side or some started to learn smart contract programming or blockchain development, focussing on the technical side. I took part in both the worlds, finance and tech. Started investing in Bitcoin and Ethereum every week or so and along with that started learning the blockchain and its development side. As I went further learning about it, there was not a single day I remember when I didn’t got to know about a new concept around it(Now it’s every week or so 😅). I felt intimidated as well as curious at the same time.

Blockchain has bought some new and interesting opportunities for us and I think it’s the right time to start investing some time in learning it as well and taking the first mover’s advantage as it's going to be a huge thing 5-10 yrs down the line.

So, here is the list of few resources(and some extra one’s too 😉) that I used to learn blockchain and smart contract development. Folks who are going to start their journey or has started, can refer this blog to get to know about few reliable resources to learn from.

1. The Basics of Bitcoins and Blockchain
As a first step, to know about cryptocurrency and blockchain universe I used this book by Antony Lewis. To understand blockchain in the most easiest and non-technical way, this book is hands down the best resource out there.

2. Ethereum Blockchain Developer Bootcamp With Solidity
After getting to know the basics and getting familiar with few concepts, I took this course from Udemy to get to know more about blockchain but in a more technical way and learn the development side of it.

Ethereum Blockchain Developer Bootcamp

3. Mastering Ethereum
To get my concepts more clear and refine, I used this book as a reference to know more about Ethereum and its application. I got to know more technical concepts around Ethereum blockchain.

4. Cryptozombies
After completing the course, I got to know about crypto zombies. It’s a zombie collectible game built using Ethereum blockchain. This course gave me more real-life application experience. After completing this, I gained some confidence and looked forward to building more stuff.

CryptoZombies

5. Dapp University YouTube Channel
My last project on crypto zombies made me really interested in building more projects on blockchain. So, to build more projects around blockchain, I followed tutorials on this channel and they were awesome!!!

Dapp University

Extra Resources

Some of the extra resources, that I found really helpful to me, were these following resources

Crypto Dev Hub
Ethereum Smart Contract development

Do you want to read the digital editions/pdf form of the books or
checkout them before you want to buy them?
.
.
.
.
.
.
.
.
No worries, I got you

Click on this link to access the above mentioned books.

Twitter – karan_346
Github – JavaKaran

How to deploy MERN application on Heroku(Easiest way!!)

Karan Sharma — Mon, 03 Jan 2022 15:13:54 +0000

As a beginner, when we first start building our projects, we always think of deploying our application and show it to our friends or family or share around on our social media. But there are so many portals out there and so many resources, we often get confused. I, myself, when I first started to deploy, got myself bombarded with the resources online.
After reading and watching many articles, documentation and tutorials, I finally deployed my first project. But as I was following the resources, I faced many issues and often have to look out for more resources to fix them.
At the end of all of that, I got an idea to write out a blog which will act as a guide to deploy the project in the most easiest way possible to help my fellow coders who have just started with their joruney.

So, to make your journey a little less painful,here are the instructions to follow. Let’s start....

Firstly, make sure that your Project structure looks like this.

Step 1

Initialise git directory in the root of your project by running the following command in cli

Note: Make sure you are in the root directory in cli too :)

git init

Step 2

To deploy an application on Heroku one needs to have a Heroku account. Click on the link and create one.

After that, download Heroku CLI and confirm the installation. To confirm the installation, run the following command in cli

heroku version

Step 3

After that Login in to your Heroku account with the following command

heroku login

This will prompt you to enter email and password and after successfully logging in, it will lead you to the chrome webpage of Heroku.

Step 4

Next, to deploy the app we need a production build of the frontend/client side of the project.To create a production build, run the following command in the client/frontend directory.

npm run build

Note: Make sure your client/frontend directory has build command under scripts section in package.json

After successful build, there must be a new directory under the root directory of client/frontend by the name of “build”.

Step 5

Now, add the following code at the end of server/index.js (the main/entry file of the root directory)

const path = require("path");

// This command will import the client build folder to the server.

app.use(express.static(path.resolve(__dirname, "./client/build")));

/* This command will redirect all request to index.html in build directory.*/

app.get("*", function (request, response) {
  response.sendFile(path.resolve(__dirname, "./client/build", "index.html"));
});

Step 6

After that modify the package.json file in the root directory of your project by adding the following command under scripts section.

“heroku-postbuild”: “cd client && npm install && npm run build”

Step 7 (Optional)

Now, the next step will be creating a proc file. In the root directory make a new file with the name of Procfile and add the following code

web:npm start

Step 8

After successfully doing the above steps, its time to create the Heroku app. Run the following command

heroku create app-name

Note – Make sure that you run the above command in the root directory of your project.

Also, make sure that your app name is unique, otherwise, it will keep giving errors.

Step 9

Now, in the end run the following commands in order

git add . // add files in git directory

git commit -m “your message” // commit the changes made to the branch

git push heroku main // push the code to the main branch

After executing the last line, the app will be deployed and the url for the same will be logged in the cli.
If you want you can also open the application using cli by running the command

heroku open

You can also access the deployed projects from the dashboard on Heroku web.

(This might happen to most of you, but not everyone)

But wait, if you click on the url, the app is not working. Why’s that?

Do you have a .env file in your project?
If yes, then go ahead and follow few steps to fix the issue.

Step 1: Go to your dashboard and click on the application name of the project you are currently working on.

Step 2: After that click on settings and go down to the config vars section

Step 3: Click on reveal config vars and you’ll get the section to enter all the details from .env in that

Enter the details and make sure to save at the end! :)

And….there you go!! The application is now deployed and should be running just perfect.

Twitter – karan_346
Github – JavaKaran