DEV Community: Husain Bhagat

Securing Next.js Applications with Robust CSP Headers

Husain Bhagat — Sun, 14 Apr 2024 11:45:24 +0000

Keeping your web applications safe is crucial, especially when using frameworks like Next.js that build dynamic sites. One important way to boost security is by setting up Content Security Policy (CSP) headers. In this blog post, I’ll walk you through how to add CSP headers in Next.js, focusing on version 14.2, but this guide should be useful for anyone using Next.js 13 or newer.

Why CSP is Important

CSP headers protect your app from certain types of attacks, like cross-site scripting (XSS) and unwanted data injection. By specifying which sources your app can trust, CSP prevents harmful scripts from running, making your site safer.

Generic Approach and Its Limitations

Typically, you might find online guides suggesting you to simply modify your next.config.js file to add CSP headers. While this approach can work for adding general headers, it often falls short when dealing with more complex configurations or specific security requirements.

Follow the Official Documentation

It's best to follow the official Next.js documentation for the most reliable instructions:

Next.js CSP Documentation

However, even the official guide has some gaps, which you might discover the hard way through trial and error. That's what leads many developers to seek out additional resources like this blog.

Addressing the Gaps

If you've followed the documentation, you might find everything works perfectly in your local development environment. But as soon as you build and run your application, you encounter errors related to script handling, which are often not nonce-compliant.

This issue arises because, by default, Next.js does server-side rendering (SSR), and during the build and run phase, the nonces for scripts generated by Webpack aren't set correctly.

The Solution

Currently, the best solution is to include the following line in your root layout:

export const dynamic = 'force-dynamic';

This directive opts the component out of static optimization, which can interfere with nonce propagation and CSP enforcement during the build process.

Final Steps

Make sure that your root layout is configured as a server component, not a client component. This is crucial because server components handle headers and optimizations differently, affecting your security settings directly.

Conclusion

Implementing robust CSP headers in Next.js requires more than just adding a few lines of code to your configuration. Understanding the nuances of nonce management and how Next.js handles scripts and styles at build time can save you from security headaches. By following the steps outlined above, you can ensure that your application not only runs smoothly but also maintains high security standards.

As you start the development journey, here are the essential tools you will need.

Husain Bhagat — Sat, 14 Aug 2021 17:50:30 +0000

In this blog, I am going to address some of the most important things you need to consider to have with you to make your Web Dev Journey a smooth experience.

1. Mindset

The No.1 one thing and also a cliche is that you need to have the correct mindset to start this journey. If you are only getting into this journey thinking you can make some good bucks then maybe you won't last.

Initially, you will need to put in a few months of work to learn the basics of coding. The mindset of showing up every day and creating a habit of coding a minimum of an hour will have compounding results.
Some days you might feel that this isn't worth it. In those days, the right mindset along with your habit will put you right on track.

2. The Basic Peripherals

This consists of a good laptop or a desktop. One which is smooth to use and doesn't lag or is slow. This is very much important since a slow computer may hinder your whole experience and put you off track.

Another thing which is even more important is a fast and reliable internet connection. You might be lucky if you are living in India since there is a telecom war which is a blessing in disguise for you. Having a fast internet connection has a similar effect where you won't be bugged while the page is buffering.

3. A good Environment

Don't use your bed as the place to learn. Having a proper desk for your work or study is crucial. There are many types of research and psychologically your mind differentiates a place of work from a place of rest. Having a good desk at optimum height and enough space along with an ergonomic chair is so very important.
Also having a proper corner for it helps your brain to map out that it is your working area, so whenever you go and sit there and start your work, now your brain knows it's time to tighten the shoes,

4. Cut off Distractions

Highly inspired by the book "Deep Work", whenever you start to code, put your phone in another room. Firstly, you'll save loads of time, since we are habituated to check our phones on a timely basis. Secondly, any notifications that pop off won't bother you or urge you to check it out. OUT OF SIGHT OUT OF MIND.

5. The Right Resources

I know you are amazed as to why I reached this part so late in my blog. Well, all the things mentioned above are very crucial mentally and physically to put you in your seat for long hours. Now it's also important to find the right resources to learn. Before that, learn to google search things the right way i.e., learn how to put in the right keywords in google to fetch you the most accurate results.
You can learn coding either via books or via videos. I would recommend you to go with the video tutorials. Just go to Youtube and search for whatever you want to learn and you will be provided with a playlist from various creators and developers. Pick any one and checkout a few videos and see whether the teaching style matches with your learning style.

One such resource to learn web development would be Tanay Pratap's LevelZero. Also if you know hindi then you can checkout CodeWithHarry's channel too.

6. Don't forget the Roadmap

Roadmaps are important. It helps you get an overview of what lies ahead and also what all levels do you have to pass through. Treat roadmap as a game where each language or thing is a level. This will gamify the whole process and make it enjoyable.

7. A community or accountability partner

Join in a community or find an accountability partner. I'd recommend joining a community where you can easily find an accountability partner there. This helps you whenever you are feeling down or have a doubt which after googling and trying out cannot be solved. Turn to the community or to your partner and speak up. This also helps a little bit with your soft skills in general.

8. Showcase your work

It's really important to showcase your work, however horrible or novice it may feel. That's how you'll improve and it will create a feedback loop for you. Not necessary to share it with those who are into development but in general. This will help you in your user experience and design too.

9. Write

This may sound odd, it did for me too, but writing helps you accumulate your knowledge on that subject into easy and understandable bite-sized content. This will also help you to find what you actually didn't understand since before writing you do a ton of research and viola you learn there too. This also helps with your communication skills in general where you will become a good communicator which is very much vital for your future endeavours.

10. Just Start

Even if you don't have a fancy desk or an awesome mechanical keyboard it doesn't matter. All you need is the internet and the grit to learn. Beg, borrow, steal but put in the work. You may not see the effects right away but it will, definitely will compound one day. Show up daily, take it up into your stride and make it a habit to code at least an hour minimum. Even if you read about some concepts on your low days it's enough, but keep the bandwagon moving.

That's all from my side. This whole blog is quite enthusiastically written as it really resonates with me. I hope this helps and inspires you, even a little bit. If there are additional points to add do tell me. Always ready to learn and grow. Adios.

Converting JavaScript to ES6: A blog explaining the benefits of ES6.

Husain Bhagat — Mon, 09 Aug 2021 08:35:34 +0000

If you're still writing your code in ES5, it's about time you got "ES6". ES6 is a new generation of Javascript that will make writing cleaner and powerful code easier than ever before. This blog post should set you on your path to converting ES5 to ES6.

So what is ES6?

ECMAScript 6 (ES6) was the second major revision to Javascript in 2015, which simplifies the code and enables us to write less and do more. It has a lot of new features and new syntaxes to make your code looks more modern, more structured and more readable.

1. Variable Creation using let and const

let: It is a mutable variable, which means we can reassign its value. let can be declared without being initialized. It is much similar to var but you cannot redeclare the same let variable again in the same scope unlike in var. This is very useful during programming as it avoids mistakes.

const: It is an immutable variable except when it is used in objects, which means we cannot reassign its value to const variables. const must be initialized during declaration.

let is the same as const in that both are blocked-scope. It means that the variable is only available within its scope.

Traditional var variable:

ES6 let variable:

ES6 const variable:

2. Arrow Functions

Let's start by showing you how we write the function in traditional syntax:

This is how we rewrite it in ES6 syntax:

It's awesome since the arrow function makes your code looks clean, more structured and more readable.

When the body inside arrow function has more than one line, we need to wrap it inside {} like this:

Arrow functions are frequently used as callbacks. You will find them a lot when you're working with map(), filter() and reduce().

This is how we traditionally write a map function:

This is how ES6 simplifies it:

Although the addition of Arrow Functions is powerful, there are limitations that we need to understand in order to avoid errors that will be difficult to track down, such as when using the this keyword inside an arrow function.

3. Template Literals

Template literals are a new addition in ES6 just like string interpolation, but more powerful because you can use expressions inside them.

Let's take a look at code example below.

This is how we create greetings function that will greet the given name in traditional syntax.

Now, let's refactor to template literals!

Here, we can more easily see the structure of the data in our code. We don't need the + sign anymore and we can use ${} to call variables.

4. Rest Parameters and Spread Syntax

Previously, before we had rest parameter, we had to code like this to convert arguments to array. However, it only supports limited number of arguments and you need to be sure how many items are there.

But with ES6, it introduced the REST Parameter. It accepts unlimited arguments and returns it as array. You can use rest parameter by adding three dots .... . When you use rest paramater as argument inside a function, it must be at the end.

Because it turns our parameters into an array, we can combine it with map() just like the example below.

Next we have spread syntax ..., which looks exactly the same as rest parameter. However, spread syntax does quite the opposite of rest parameter. With spread syntax we can get list of arguments from array or Key-Value pairs in the case of Objects.

It can be used for creating the reference elements.

In case of Objects -

5. Default Parameters

In ES6, we can give default value to function's parameters.

With the old syntax, this is how we create default value to a parameter.

Now, let's refactor using ES6 default parameter!

It's so simple and easy to understand. This also helps you to handle error in advance when you forget to assign the parameter.

6. Destructuring Assignment

Destructuring allows us to Unpack arrays or Objects into a bunch of variables which makes working with arrays and objects more convenient.

Array

The traditional way:

Using Destructuring:

We can also use destructuring assignment to swap between two values in array.

Here's how we swap array using traditional syntax.

And now, let's refactor the code using destructuring assignment!

We have less code and it's easier to understand, isn't it awesome?

Object

We can also use destructuring assignment with object. Take a look at the example below.

Here's how we do it with traditional syntax to get the object's value.

Now let's refactor with destructuring assignment!

There's a lot more you can do with destructuring assignment as it is really useful and practical, especially when you are working with modern Javascript.

7. Array Functions: find() and findIndex()

find() is used to search for element in the array that matches some condition. it returns the first element that matches the condition.

findIndex() returns the index of the element.

8. Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data.

The body of a class is executed in strict mode, i.e., code written here is subject to stricter syntax for increased performance.

Strict mode makes several changes to normal JavaScript semantics:

Eliminates some JavaScript silent errors by changing them to throw errors.
Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
Prohibits some syntax likely to be defined in future versions of ECMAScript

Example -

9. Import and Export

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

Export: You can export a variable using the export keyword in front of that variable declaration. You can also export a function and a class by doing the same.

Import: You can import a variable using import keyword. You can specify one of all the members that you want to import from a JavaScript file.

10. Promises

A promise is used to handle the asynchronous result of an operation. JavaScript is designed to not wait for an asynchronous block of code to completely execute before other synchronous parts of the code can run. For instance, when making API requests to servers, we have no idea if these servers are offline or online, or how long it takes to process the server request.

With Promises, we can defer execution of a code block until an async request is completed. This way, other operations can keep running without interruption.

Promises have Three States:

Pending: This is the initial state of the Promise before an operation begins
Fulfilled: This means the specified operation was completed
Rejected: The operation did not complete; an error value is usually thrown

Creating a Promise

The Promise object is created using the new keyword and contains the promise; this is an executor function which has a resolve and a reject callback. As the names imply, each of these callbacks returns a value with the reject callback returning an error object.

Using a Promise

Using a promise that has been created is straightforward; we use .then() and .catch() to our Promise like:

Example -

11. Async and Await

An async function is a modification to the syntax used in writing promises. An async function returns a promise -- if the function returns a value, the promise will be resolved with the value, but if the async function throws an error, the promise is rejected with that value.

Await is only used with an async function. The await keyword is used in anasync function to ensure that all promises returned in the async function are synchronized, ie. they wait for each other. Await eliminates the use of callbacks in .then() and .catch(). In using async and await, async is prepended when returning a promise, await is prepended when calling a promise. try and catch are also used to get the rejection value of an async function.

Conclusion

Understanding the concepts of Callbacks, Promises, and async/await can be tricky sometimes, it was for me, but till now we have seen how they will work when carrying out asynchronous operations and other ES6 features in JavaScript.

These techniques will come in handy a lot when making API requests and event handling.

I hope you guys found this article useful, and I hope I was able to introduce you to some of the ES6 features.

Want to learn JavaScript ? Here's a Detailed Roadmap for you

Husain Bhagat — Mon, 14 Jun 2021 03:49:02 +0000

A Detailed Roadmap for you👇

Start with https://freecodecamp.org's - JavaScript Algorithms and Data Structures Certification and finish the "Basic JavaScript" module.

You'll get a basic understanding of JavaScript and Programming in
general.

Move to http://JavaScript.info and complete the following parts:
- An Introduction
- JavaScript Fundamentals You'll start to understand Basic JavaScript concepts and their details.
Complete "Objects: the basics" section in http://JavaScript.info

By this point you'll have a decent understanding of JavaScript Objects

Time to return to freeCodeCamp. Finish the following sections:
- Debugging
- Basic Data Structure
Complete "Data types" Section in http://JavaScript.info

Congratulations!🎉🎉🎉
Now you have a great understanding of JS

Time to move back to freeCodeCamp. Complete the following sections in order:
- ES6
- Object Oriented Programming
- Functional Programming
Finish Part 1 of http://JavaScript.info
Finish freeCodeCamp's JavaScript Algorithms and Data Structures Certification
Now you'll have to learn something called DOM. For that you'll need a basic understanding of HTML and CSS.

For learning DOM, I would recommend the following two resources:

Part 2 of http://JavaScript.info
MDN https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
- Practice by making small projects from http://JavaScript30.com

Congratulations! You know JS🔥💯

My Learning Methods (applicable on mostly every technical skill)

Husain Bhagat — Mon, 14 Jun 2021 03:21:46 +0000

I had started a #21DaysOfJavaScript challenge where I learnt JavaScript for 21 days. This was to build the habit of coding for a lifetime and have a fixed routine where I have time-blocked a few hours for my learning. Here is a list of the five most useful things which helped in my journey:

1. Accountability

The first reason and the most important one is accountability. I informed publicly through the social media platforms and so by committing myself out in public I'm making sure I stick to my goals. Also psychologically we are prone to achieve something if it's announced and seen by people. I might not procrastinate much as I used to and start getting things done.

2. Pseudo Teaching

The other reason I did this is was because I would have been learning the fundamentals of JavaScript but also I would also be teaching my own self. I had gone through a ton of resources and curated (much of it is curated online I'm just choosing) many lessons and topics that I'll be learning.

3. Time Management

I had alloted my whole morning to this challenge where I revised, learnt new concepts, and hard-coded them into projects.

4. Note-Taking

I usually do not like to take notes, thinking that I might remember it in the long term. I don't. Hence I also created a summary of all the concepts I've learned for that day.

5. Documentation

This is new and quite effective to me. I document my process of learning and iterated and always tried to make it better. Documenting will also help me later on with different opportunities and grow my social profile. Highly recommended.

These are some of the reasons I had come up with to take this step. It was quite new and exciting for me since I was experimenting but it turned out really good.