DEV Community: Aritra Mukherjee

A Web Security Checklist For Creating Secure Websites

Aritra Mukherjee — Tue, 21 Jan 2020 19:47:50 +0000

Hello there! As a web developer, I always strive to ensure that the websites I build are as secure as possible.

Therefore, I put together a checklist 📋 of 9 crucial measures that have been mandated by Mozilla in their Web Security guidelines for all websites and/or web applications.

Web developers should implement all the items in this checklist to ensure their websites are optimally secured. 🛡️

Please refer to my blog post linked below for the description, implementation details and examples of each. 📚

BTW, I'd love suggestions from the community! If you have more items that should be added to this list or would like to suggest changes for the existing ones, please mention them in the comments below and I will update the article with due credits (Twitter/Dev). 😃

1️⃣ Use HTTPS over HTTP 🔒

Hypertext Transfer Protocol Secure (HTTPS) encrypts data exchanged between the server and the client. It prevents man-in-the-middle attacks. In order to use HTTPS, you will need to get an SSL certificate for your domain. Read More

2️⃣ Redirect From HTTP to HTTPS ↪️

Installing an SSL certificate for your website is the first step, but not the last. In order to complete the procedure, we have one more step - set up a redirection from HTTP to HTTPS. Read More

3️⃣ Load Resources Over HTTPS 📦

Resources are the various kinds of media (images/videos), scripts, and style sheets that a website requires for its functioning. Loading your website’s resources over HTTP leaves it vulnerable to cyber attacks like Phishing. Apart from that, browsers like Chrome and Firefox will show Mixed Content warnings to your site’s visitors. Read More

4️⃣ Enforce HTTP Strict Transport Security (HSTS) 🚌

HTTP Strict Transport Security (HSTS) is an HTTP header that allows user agents like browsers to only connect to a website over HTTPS. Read More

5️⃣ Use Content Security Policy (CSP) 📜

Content Security Policy (CSP) is used to specify the sources from where your website will fetch its resources. This information is used by web browsers to block requests for resources from sources, other than the ones specified by you. Read More

6️⃣ Secure Your Cookies 🍪

A cookie is a small file that stores information on the client’s machine. Other than tracking visitors’ web activity, cookies are used for session management. This is why securing your cookies is important for optimal web security. Mozilla has mandated the creation of HTTP cookies with the Secure flag. Read More

7️⃣ Prevent Clickjacking 🖱️

Clickjacking is a type of attack performed on a victim website using iframes. Websites can protect themselves from getting framed (literally) by using either CSP frame-ancestors directive or X-Frame-Options header. Read More

8️⃣ Cross-origin Resource Sharing (CORS) 📡

This is exclusively for APIs. The Access-Control-Allow-Origin header can be used to block unauthorized foreign access to resources on your origin/server. By using this header, you can state which origins you want to allow access to a particular resource, which is being requested. Read More

9️⃣ Prevent Cross-site Request Forgery (CSRF)

Cross-site request forgery (CSRF) attacks are quite simple. Websites often use cookies to store session information of a logged-in user. Such cookies can be used to perform unauthorized destructive changes on the victim server. Read More

Continue reading "A Web Security Checklist For Creating Secure Websites"

The post A Web Security Checklist For Creating Secure Websites appeared first on GeekyMinds.

2020 DevEconomics Developer Survey Is Here

Aritra Mukherjee — Wed, 04 Dec 2019 15:22:32 +0000

DevEconomics is conducting a survey to discover the biggest development trends in 2020. Would appreciate your participation!

🔥 Find the survey link in the tweet below 👇🏼

Liquid error: internal

I built PostMate - A PWA For Creating & Managing Social Media Post Templates

Aritra Mukherjee — Fri, 08 Nov 2019 18:55:22 +0000

Index

What is PostMate?
What is PostMate trying to solve?
How does PostMate solve it?
How to use PostMate?
What is a Progressive Web App?
How to install PostMate?
PostMate is Open-Source

What is PostMate?

PostMate is a Progressive Web App built with Ionic Framework using Angular and Firebase. It's aimed at digital marketers, bloggers and brands who publish lots of content on social media on a daily basis. Let me jump straight to the point and go through what PostMate is trying to solve and how it solves it.

mukherjee96 / postmate

PostMate is a progressive web app for creating and managing social media post templates on the cloud.

INDEX

What is PostMate trying to solve?

As part of the activities of running GeekyMinds, my tech blog, we post content everyday on various social media platforms like Facebook, Instagram, Twitter, Tumblr, Pinterest, etc. The format of our posts differs from content to content, platform to platform.

For example, our Revisit C++ series requires a particular set of hashtags related to C++ and a particular header text (for example, #RevisitCPP Day 15) that's part of every post. On the other hand, a regular post where I'm sharing a link to an article from my blog will have a different header and set of tags.

This is just how parts of our content differ from each other. Now consider this…

View on GitHub

What is PostMate trying to solve?

Maintaining a good social media presence for your blog, business or organization requires you to publish your content on various social media platforms on a daily basis.

This brings one big issue to the table though. The formats of your posts differ from content to content and platform to platform.

For example, our latest tutorial series on GeekyMinds, Revisit C++, requires a certain set of hashtags related to C++ and a header text like RevisitCpp Day 15 that's part of every post.

Below is a recent Revisit C++ post from our Instagram channel:

On the other hand, a regular post where I'm sharing a link to an article from my blog will have a different header and set of tags.

This is just how parts of our content differ from each other. Now consider the fact that Instagram's post reach totally depends upon hashtags, while Facebook's doesn't at all. Therefore our post formats also have to differ across various social media platforms!

Remembering or keeping a physical note of so many types of formats is difficult. Posting daily on so many platforms with varying post formats is extremely tedious. 🏋️

How does PostMate solve this?

PostMate solves this by enabling you to create post templates. Each template can have a header and/or a footer. The Header can be used to set text which always goes at the top of your posts. The Footer is ideal for setting text that goes at the bottom of your posts, like a set of hashtags on Instagram.

Templates only hold the static or the repetitive parts of your posts. You can set the header or the footer or both, as you need.

How to use PostMate?

You can create as many templates as you want and reuse them to generate your posts. All you have to do is type in the body of the post and click copy! That's all! 🎉

PostMate stores the templates on the cloud. This enables it to sync your templates to all devices you use PostMate on! Thanks to Reactive Programming, changes to your templates reflect almost instantly across all your synced devices.

You can swipe right on a template to edit/delete it. Tap on the template to open the post generation page.

What is a Progressive Web App (PWA)?

PWAs are web applications which run on regular web browsers like Google Chrome and Mozilla Firefox. They set themselves apart from normal websites or web apps as they can be installed on any device, just like a native app.

PostMate is a Progressive Web App and therefore runs in your web browser just like a website and you can install it on your laptop/smartphone if you find yourself using it a lot!

I decided to go with PWA technology instead of targeting native platforms like Android or iOS because PWAs can be deployed to a wide number of computing platforms without requiring the source code to be rewritten for each of them.

How to install PostMate?

I have an excellent article explaining PWAs on my blog. PostMate is easy to install on any platform using Google Chrome, Mozilla Firefox, etc. Find your platform below:

Installing PostMate on Android

Visit PostMate.
After a moment, Chrome/Firefox will prompt you with 'Add PostMate to home screen'.
Click on the prompt and click Add.
Alternatively, tap on the three-dot menu in Chrome and tap 'Add to home screen'.

Installing PostMate on iOS

Installing PWAs on iOS is a little more complex (thanks to Apple). 🙄

Visit PostMate via Safari.
Follow the instructions on this excellent and short video tutorial.

Installing PostMate on PC/Mac

Visit PostMate.
Chrome/Firefox will display a ➕ button at the extreme right in the address bar.
Click on the ➕ button and click Add.

PostMate is Open-Source

PostMate just entered public beta and contributors are welcome! I'll be glad to hear about any glitches/bugs/feature requests that anyone might have. Submit them as an issue here.

Also, I'm new to collaborating on GitHub, so any kind of advice regarding the same will be very useful to me!

Shadow DOM, Custom Elements and Web Components Explained

Aritra Mukherjee — Sun, 20 Oct 2019 16:34:45 +0000

Web Components are a relatively new set of technologies that lets you create custom HTML elements using the shadow DOM. They enable you to write markup, styles and logic once and reuse it around your website or web app!

I'm a strong believer in Project-Based Learning (PBL), so we are also going to write a custom element from scratch!

We will be looking at:

The Document Object Model (DOM) ✌
The concept of Shadow DOM - simplest explanation 🦄
Associated terms (shadow host, tree and root) 🐈
Custom Elements, Autonomous Custom Elements and Customized Built-in Elements 🐕
Project - Create a Custom Element from Scratch! 🎉

Continue reading "Shadow DOM and Custom Elements Explained"

The post Shadow DOM and Custom Elements Explained appeared first on GeekyMinds.

CSS Grid | Let's Simplify

Aritra Mukherjee — Fri, 18 Oct 2019 18:55:43 +0000

Introducing the CSS Grid Ultimate Guide series, where we will explain the grid system in CSS using simple examples for beginners!

We will be looking at:

Differences between grid and inline-grid
Grid column width, grid row height
The fr fractional unit
The auto-fit and auto-fill properties and minmax() function
Some example layouts made with CSS grid

In part 2, we will be diving into making the CSS Grid responsive! 🎉

Continue reading "CSS Grid | Let's Simplify"

The post CSS Grid | Let's Simplify appeared first on GeekyMinds.

Let’s Compare: Websites and Web Applications

Aritra Mukherjee — Mon, 07 Oct 2019 15:04:34 +0000

Hey guys! In this article, we are going to compare websites and web applications. Say you have built a simple portfolio site using HTML, CSS and some JavaScript. Does that make your portfolio a website, a web application or both? Let’s find out!

What Are Applications? ...

Continue reading "Let’s Compare: Websites and Web Applications"

The post Let’s Compare: Websites and Web Applications appeared first on GeekyMinds.

Progressive Web Apps (PWA) Explained

Aritra Mukherjee — Mon, 07 Oct 2019 08:36:45 +0000

This article has been written for introducing absolute beginners to Progressive Web Apps. 😊

We are going to look at:

The advent of Progressive Web Apps (PWA)
Why they are so cool 😎
The perks of a PWA 🍬
How a PWA works (service worker, manifest, etc) 🏗️
How to install a PWA on mobile and desktop 🎉
Lots of live PWA examples! ✨

Continue reading "Progressive Web Apps (PWA) Explained"

The post Progressive Web Apps (PWA) Explained appeared first on GeekyMinds.

JavaScript Promises Explained

Aritra Mukherjee — Fri, 04 Oct 2019 16:30:05 +0000

Hey geeks!

In this article, we are looking into Promises in JavaScript! As usual, I'm going to explain some foundation building concepts and then dive straight into the syntax.

Here's what we will go through:

Foundation concepts
- Asynchronous Code
- Blocking code
- Concept of threads
Creating Promises
- Syntax
- Resolve, Reject
- Then, Catch, Finally
Live examples
- Resolving a promise
- Rejecting a promise
- Using finally() on a promise

Continue reading "JavaScript Promises Explained | JavaScript Basics"

The post JavaScript Promises Explained | JavaScript Basics appeared first on GeekyMinds.

Free Tools for Creating Great Content

Aritra Mukherjee — Thu, 29 Aug 2019 16:12:15 +0000

Creating great content requires out-of-the-box ideas and a lot of research, effort and time to reach the correct audience. There is an endless number of tools for creating the content you want to deliver and some of them are incredibly costly.

While there may not always be a perfect free alternative, here are some free services which provide typography tools, stock photo and videos, royalty free music and some other useful apps we use for content creation.

Continue reading "Free Tools for Creating Great Content"

The post Free Tools for Creating Great Content appeared first on GeekyMinds.

Parameter Binding in PHP – Examples and Discussion

Aritra Mukherjee — Mon, 08 Jul 2019 15:27:51 +0000

🎯 In this article, we are going to look into four basic examples of Parameter Binding in PHP using both MySQLi and PDO! I have accumulated these from my own projects and various corners of the web. They will help you get started with Parameter Binding in PHP if you happen to find to it tricky to use, just like I did.

💡 If Parameter Binding does not tell you anything, you may want to check out my previous article where I explained how Parameter Binding can be used for deterring most SQL Injection attacks in PHP.

Just like the previous article, I am going to show you how to use both MySQLi and PDO step by step. This way, people who are comfortable with MySQLi will be able to learn PDO easily and vice versa.

Here's what I'll cover:

Creating the MySQLi and PDO Objects
Example 1: Single Parameter Binding
Example 2: Mulitple Parameter Binding
Example 3: Reusing Query with Parameter Binding
Example 4: Implementing Basic Search With SQL LIKE

Continue reading "Parameter Binding in PHP – Examples and Discussion"

The post Parameter Binding in PHP – Examples and Discussion appeared first on GeekyMinds.

Understanding SQL Injection and Prevention using Parameter Binding in PHP

Aritra Mukherjee — Sat, 29 Jun 2019 18:22:43 +0000

Happy Diwali 🎆 folks! When I learnt PHP for the first time, I wasn't really aware of the good practices regarding web security in PHP. Over the years, fuelled by my inquisitiveness and will for perfection, I put the effort in hours of research to figure out how exactly we can safely interact with the database in PHP.

If you try to do so yourself, you will realise that the experience of traversing the PHP documentation is not that convenient and there exist multiple ways of doing the same thing which is frankly very confusing to beginners. 🙄

Therefore, in this article, I decided to compile what I learnt and show you two ways of preventing most SQL Injection attacks in PHP (MySQLi and PDO) in a comparative fashion and explain their usage step by step. 🎉

This is what I am going to cover:

SQL Injection
- Short explanation
- A simple example
Preventing SQL Injection
- Using Parameter Binding in MySQLi
- Using Parameter Binding in PDO
MySQLi vs PDO

In my next article, I am going to dive deep into Parameter Binding with real-life examples.

Continue reading "Preventing SQL Injection with PHP using Parameter Binding"

The post Preventing SQL Injection with PHP using Parameter Binding appeared first on GeekyMinds.

Like A YouTube Video Using JS

Aritra Mukherjee — Tue, 30 Apr 2019 17:13:31 +0000

As you guys already know, JavaScript is a scripting language that runs in the web browser. Developers use JavaScript to manipulate the DOM, make their websites interactive and many more! This gave me a random idea – why not write a one-line JavaScript code to like a YouTube video without pressing the ‘Like’ button? Read …

Continue reading "Like A YouTube Video Using JS | Random Fun"

The post Like A YouTube Video Using JS | Random Fun appeared first on GeekyMinds.