DEV Community: Shubham Khan

How to Securely Remove a File from Git History: A Step-by-Step Guide

Shubham Khan — Wed, 23 Oct 2024 13:02:49 +0000

When managing a Git repository, it's possible to mistakenly commit sensitive information or files that should not be part of your project’s history. In this guide, we'll walk you through the process of safely removing such files from Git history, using the example of a common development file, .env.development, which typically contains environment variables. By following these steps, you can ensure that sensitive data is permanently erased from your repository.

Why Remove a File from Git History?

There are several reasons why you might want to remove a file from your Git history:

Security: Accidentally committing sensitive data, such as API keys or passwords, can put your project at risk.
Repository Cleanliness: Keeping your Git history clean and organized makes it easier to track changes and manage your codebase.
Best Practices: Following good version control practices ensures that your repository contains only necessary files, avoiding clutter.

Step 1: Using git filter-branch to Remove the File

The git filter-branch command allows you to rewrite your Git history, which is useful for removing unwanted files. Open your terminal, navigate to your repository, and run the following command:

git filter-branch --force --index-filter "git rm --cached --ignore-unmatch .env.development" --prune-empty --tag-name-filter cat -- --all

What Does This Command Do?

--force: Forces the command to rewrite your Git history.
--index-filter: Allows modification of the Git index.
git rm --cached --ignore-unmatch .env.development: Removes the .env.development file from the Git index but leaves it on your filesystem.
--prune-empty: Removes any empty commits that result from this operation.
--tag-name-filter cat: Ensures that any tags in your repository are preserved.
-- --all: Applies this operation to all branches and tags.

Step 2: Clean Up Your Repository

After removing the file, you need to clean up your Git repository to fully remove any traces of it. Run these commands:

git reflog expire --expire=now --all
git gc --prune=now --aggressive

Explanation:

git reflog expire --expire=now --all: Expires all reflog entries immediately, clearing history that might still contain references to the removed file.
git gc --prune=now --aggressive: Runs garbage collection to remove unreferenced files and optimize the repository.

Step 3: Force Push the Changes to Your Remote Repository

To apply these changes to your remote repository, you’ll need to force-push the updated history. Be cautious when doing this, especially in shared repositories.

git push origin --force --all
git push origin --force --tags

Important Notes:

Force-pushing overwrites the remote history. Ensure that all collaborators are aware of these changes to avoid conflicts.
Before force pushing, it’s a good idea to inform your team, as their local repositories will need to be synchronized with the updated history.

Step 4: Remove the File Locally and Update .gitignore

Now that the file is removed from your Git history, delete it from your local repository and prevent it from being tracked again by adding it to .gitignore.

git rm --cached .env.development

Next, add .env.development to your .gitignore file to prevent it from being accidentally committed again in the future. Open or create a .gitignore file in the root of your project and add:

.env.development

Conclusion

By following these steps, you can ensure that sensitive files are permanently removed from your Git history and that they won't be tracked in the future. This not only helps protect your project from security risks but also keeps your repository clean and organized.

Remember to update your .gitignore file as a best practice to prevent sensitive files from being accidentally committed again. With these techniques, you can maintain a safer and more efficient Git repository.

Happy coding!

Beginner’s Guide to AES Encryption and Decryption in JavaScript using CryptoJS

Shubham Khan — Wed, 16 Oct 2024 17:49:29 +0000

In today’s digital world, safeguarding sensitive information is critical. One of the most trusted ways to secure data is by using AES (Advanced Encryption Standard). This guide will walk you through how to use AES for encryption and decryption in JavaScript with the help of the CryptoJS library, making it both secure and easy to implement.

By the end of this post, you’ll have a solid understanding of how to encrypt data and decrypt it when needed. Let’s dive in!

Why Data Security Matters

In an age of increasing cyber threats, encryption is no longer optional—it’s essential. Whether you're building a simple web app or a complex platform, AES encryption helps ensure that your users' data remains safe and secure.

What is AES Encryption?

AES is a symmetric encryption method, meaning the same key is used to encrypt and decrypt data. It's a well-regarded standard due to its speed and security, making it a popular choice for protecting sensitive data like passwords, personal information, and financial details.

Why You Need Encryption

Data breaches, phishing attacks, and other threats make encryption essential for any web or mobile app that handles sensitive information. With AES encryption, even if an unauthorized person intercepts your data, they won’t be able to read it without the secret key.

What is CryptoJS?

CryptoJS is a robust JavaScript library that offers a range of cryptographic functionalities, including encryption, decryption, and hashing. It’s widely used for implementing AES encryption in web development, thanks to its simplicity and performance.

How Does AES Work?

Encryption and decryption using AES involve the following steps:

Encryption:

Plain text is transformed into unreadable ciphertext using a secret key.
The encrypted data is then encoded into a safe format for transmission.

Decryption:

The ciphertext is decrypted back into the original plain text using the same secret key.
Both processes ensure the confidentiality and integrity of the data being exchanged.

Implementing AES Encryption and Decryption in JavaScript

Here’s a step-by-step guide to creating AES encryption and decryption functions in JavaScript using CryptoJS. We'll utilize environment variables to securely store our secret key.

AES Encryption Function

const encryptWithSecretKey = (text) => {
  // Fetch the secret key from environment variables
  const secretKey = process.env.NEXT_PUBLIC_SECRET_KEY?.replace(/\\n/g, "\n");

  // Generate a random Initialization Vector (IV) for security
  const iv = CryptoJS.lib.WordArray.random(16);

  // Encrypt the text using AES with CBC mode and the secret key
  const encrypted = CryptoJS.AES.encrypt(
    text,
    CryptoJS.enc.Hex.parse(secretKey),
    {
      iv: iv,
      padding: CryptoJS.pad.Pkcs7,
      mode: CryptoJS.mode.CBC,
    }
  );

  // Concatenate IV and ciphertext and encode in Base64 format
  const encryptedBase64 = CryptoJS.enc.Base64.stringify(
    iv.concat(encrypted.ciphertext)
  );

  return encryptedBase64;
};

Key Points:

The Initialization Vector (IV) is randomly generated for each encryption, adding an extra layer of security.
The encryption process uses AES in CBC (Cipher Block Chaining) mode, making it more secure by using the IV along with the secret key.
The result is encoded in Base64 for safe transmission in URLs.

AES Decryption Function

const decryptWithSecretKey = (encryptedText) => {
  try {
    const fullCipher = CryptoJS.enc.Base64.parse(encryptedText);

    // Extract IV and ciphertext from the parsed cipher
    const iv = CryptoJS.lib.WordArray.create(fullCipher.words.slice(0, 4), 16);
    const ciphertext = CryptoJS.lib.WordArray.create(fullCipher.words.slice(4));

    const cipherParams = CryptoJS.lib.CipherParams.create({
      ciphertext: ciphertext,
    });

    // Fetch and parse the secret key from environment variables
    const secretKey = process.env.NEXT_PUBLIC_SECRET_KEY?.replace(
      /\\n/g,
      "\n"
    );

    // Decrypt the ciphertext using AES and the provided secret key
    const decrypted = CryptoJS.AES.decrypt(
      cipherParams,
      CryptoJS.enc.Hex.parse(secretKey),
      {
        iv: iv,
        padding: CryptoJS.pad.Pkcs7,
        mode: CryptoJS.mode.CBC,
      }
    );

    // Return decrypted text in UTF-8 format
    return decrypted.toString(CryptoJS.enc.Utf8);
  } catch (error) {
    console.error("Decryption error:", error);
    return;
  }
};

Key Points:

Decryption reverses the encryption process by using the same IV and secret keys that were used for encryption.
If the decryption fails due to an incorrect key or other issues, the error is logged and null is returned.

Essential Concepts

Secret Key: The key that encrypts and decrypts the data. This should be stored securely in environment variables, not hard-coded in your application.
Initialization Vector (IV): A unique value that makes the encryption more secure. It ensures that even the same input text results in different ciphertexts every time.
Base64 Encoding: After encryption, the ciphertext is Base64 encoded to make it suitable for storage or transmission, such as in URLs or APIs.

Benefits of AES Encryption

AES encryption provides several advantages:
Performance: AES is highly optimized for speed, making it ideal for web applications.
Security: AES has been rigorously tested and is widely regarded as one of the most secure encryption methods.
Simplicity: With libraries like CryptoJS, implementing AES encryption in JavaScript is straightforward and efficient.

Best Practices for Implementing AES

Use environment variables to store sensitive data like your secret key. Never hard-code secrets in your application code.
Always generate a new IV for each encryption operation to ensure the highest level of security.
Handle errors properly during decryption to prevent issues like data loss or unauthorized access.

Conclusion

AES encryption using CryptoJS is a powerful and efficient way to protect sensitive data in your JavaScript applications. With the steps outlined above, you can easily implement encryption and decryption for secure communication or data storage.

This guide provides you with all the tools you need to secure your app and protect your users’ data. By following best practices, you can confidently handle sensitive information, knowing it’s encrypted and secure.

Now that you’ve learned the basics of AES encryption, it’s time to put it into practice in your projects. Keep your data secure, and your users will trust your application more!

Mastering the Fundamentals of Object-Oriented Programming (OOP) in Java

Shubham Khan — Sun, 13 Oct 2024 04:24:07 +0000

Object-Oriented Programming (OOP) is one of the most important concepts in modern programming. It allows you to design software that is more flexible, modular, and easier to maintain. This article will take you through the four core pillars of OOP—Encapsulation, Inheritance, Polymorphism, and Abstraction—with practical examples in Java to help you get started.

1. Encapsulation: Safeguarding Data

Encapsulation is the principle of bundling data (fields) and methods (functions) that operate on the data within a single class, restricting direct access to that data. This protects the data from being altered unexpectedly or improperly. Instead of accessing fields directly, you use public methods known as getters and setters.

Here’s an example in Java:

public class Person {
    // Private variable to restrict access
    private int age;

    // Getter method to retrieve the age
    public int getAge() {
        return age;
    }

    // Setter method to update the age with validation
    public void setAge(int age) {
        if (age > 0) {
            this.age = age;
        } else {
            System.out.println("Age must be a positive number.");
        }
    }
}

In this example, the age variable is marked as private to prevent direct access. The getAge() and setAge() methods allow controlled access to the age field, ensuring that only valid data is set. This approach encapsulates the data and safeguards it from external interference.

2. Inheritance: Reusing Functionality

Inheritance allows one class to inherit the properties and methods of another, making it easier to reuse code and create relationships between objects. The class that inherits is called the "child" or "subclass," while the class being inherited from is the "parent" or "superclass."

Here’s a simple example:

// Superclass
public class Animal {
    public void eat() {
        System.out.println("This animal eats.");
    }
}

// Subclass inheriting from Animal
public class Dog extends Animal {
    public void bark() {
        System.out.println("The dog barks.");
    }
}

In this example, the Dog class inherits the eat() method from the Animal class. This demonstrates how the Dog class can reuse methods from its parent class without needing to rewrite them.

3. Polymorphism: Flexibility in Action

Polymorphism allows you to perform a single action in different ways depending on the object. It can be achieved through method overriding, where a subclass provides a specific implementation of a method that is already defined in its parent class.

Take a look at this example:

// Superclass
public class Animal {
    public void speak() {
        System.out.println("The animal makes a sound.");
    }
}

// Subclass overriding the speak method
public class Dog extends Animal {
    @Override
    public void speak() {
        System.out.println("The dog barks.");
    }
}

// Subclass overriding the speak method
public class Cat extends Animal {
    @Override
    public void speak() {
        System.out.println("The cat meows.");
    }
}

public class Main {
    public static void main(String[] args) {
        Animal myDog = new Dog();  // Polymorphism in action
        myDog.speak();  // Output: The dog barks

        Animal myCat = new Cat();
        myCat.speak();  // Output: The cat meows
    }
}

Even though myDog and myCat are declared as type Animal, Java will invoke the appropriate method for each object. This is the power of polymorphism—it lets you handle different objects in a uniform way, yet their behaviour can vary.

4. Abstraction: Simplifying Complex Systems

Abstraction is about hiding complex details and showing only the essential information. In Java, abstraction can be achieved using abstract classes or interfaces. These allow you to define methods that subclasses must implement, without specifying how they should work.

Here’s an example using an abstract class:

// Abstract class
public abstract class Shape {
    // Abstract method with no implementation
    public abstract double calculateArea();
}

// Subclass implementing the abstract method
public class Rectangle extends Shape {
    private double width;
    private double height;

    public Rectangle(double width, double height) {
        this.width = width;
        this.height = height;
    }

    @Override
    public double calculateArea() {
        return width * height;
    }
}

public class Main {
    public static void main(String[] args) {
        Shape rectangle = new Rectangle(5, 10);
        System.out.println("Rectangle area: " + rectangle.calculateArea());  // Output: 50
    }
}

In this example, the Shape class defines an abstract method calculateArea(), which must be implemented by any subclass like Rectangle. This allows you to work with shapes without needing to know the specific details of how the area is calculated—simplifying the interaction with the object.

Conclusion

By mastering the four fundamental principles of OOP—Encapsulation, Inheritance, Polymorphism, and Abstraction—you can create Java applications that are clean, maintainable, and scalable. Whether you're working on a small project or a large-scale system, these concepts will help you write better, more efficient code.

So, dive into OOP with Java and start applying these principles in your own projects. Understanding these concepts will not only make you a better Java developer but also enhance your overall programming skills!

Java #OOP #Encapsulation #Inheritance #Polymorphism #Abstraction #JavaLearning #ProgrammingFundamentals #CodeNewbie #SoftwareDevelopment #Tech

How to Generate RSA Key Using JavaScript and Python

Shubham Khan — Sat, 12 Oct 2024 11:36:58 +0000

In today’s digital age, ensuring the security of sensitive information is paramount. RSA, one of the most widely used encryption techniques, helps achieve that by allowing secure communication and data protection. If you’re a beginner looking to learn how to generate RSA key pairs, this tutorial will guide you through the process in both JavaScript and Python.

What is RSA?

RSA (Rivest-Shamir-Adleman) is a public-key cryptosystem used for secure data transmission. It uses two keys:

Public key: Used for encrypting messages or verifying digital signatures.
Private key: Used for decrypting messages or signing documents.
The keys are mathematically linked, but it’s nearly impossible to derive the private key from the public key, making RSA a highly secure encryption method.

Why Use RSA?

Data Encryption: Encrypt sensitive information to secure communication.
Digital Signatures: Verify the authenticity of messages or documents.
Authentication: Provide secure authentication mechanisms.
Now, let’s explore how to generate RSA keys using JavaScript and Python, two popular programming languages.

Generating RSA Keys Using OpenSSL (Command Line)

Before diving into code, you can easily generate RSA keys using OpenSSL. OpenSSL is a widely-used tool for cryptographic operations.

Generate a 2048-bit RSA private key:

openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048

Extract the public key:

openssl rsa -pubout -in private_key.pem -out public_key.pem

This will produce two files: private_key.pem (the private key) and public_key.pem (the public key).

Generating RSA Keys in JavaScript

In JavaScript, you can use Node.js's crypto module to generate RSA keys. Here’s a step-by-step guide.

Step-by-Step Guide (JavaScript)
Set up your environment: Ensure that you have Node.js installed on your system. If not, you can download it from nodejs.org.

Generate the RSA key pair: Node.js provides the crypto module, which offers built-in functions for cryptographic operations.

const { generateKeyPairSync } = require('crypto');

const { publicKey, privateKey } = generateKeyPairSync('rsa', {
  modulusLength: 2048,
  publicKeyEncoding: {
    type: 'spki',
    format: 'pem'
  },
  privateKeyEncoding: {
    type: 'pkcs8',
    format: 'pem'
  }
});

console.log('Public Key:\n', publicKey);
console.log('Private Key:\n', privateKey);

Key Points:
modulusLength: 2048 ensures that the key is 2048 bits long.
The generated public and private keys are returned in PEM format, which is widely used for storing cryptographic keys.
With this script, you can now generate RSA keys in JavaScript and use them for encryption, digital signatures, or secure communication.

Generating RSA Keys in Python

Python provides an excellent library called cryptography for generating RSA keys. Follow the steps below to generate RSA keys in Python.

Step-by-Step Guide (Python)
Install the cryptography library: If you don’t have the cryptography library installed, you can easily install it using pip:

pip install cryptography

Generate RSA Keys: After installing the library, use the following Python script to generate your RSA key pair.

from cryptography.hazmat.backends import default_backend
from cryptography.hazmat.primitives.asymmetric import rsa
from cryptography.hazmat.primitives import serialization

# Generate a private key
private_key = rsa.generate_private_key(
    public_exponent=65537,
    key_size=2048,
    backend=default_backend()
)

# Save the private key in PEM format
with open("private_key.pem", "wb") as private_file:
    private_file.write(
        private_key.private_bytes(
            encoding=serialization.Encoding.PEM,
            format=serialization.PrivateFormat.TraditionalOpenSSL,
            encryption_algorithm=serialization.NoEncryption()
        )
    )

# Generate the public key from the private key
public_key = private_key.public_key()

# Save the public key in PEM format
with open("public_key.pem", "wb") as public_file:
    public_file.write(
        public_key.public_bytes(
            encoding=serialization.Encoding.PEM,
            format=serialization.PublicFormat.SubjectPublicKeyInfo
        )
    )

print("Keys generated and saved as PEM files!")

Key Points:
This script generates a private key with a length of 2048 bits and a public exponent of 65537 (a common choice for RSA).
The private and public keys are stored in PEM format for easy use.
Understanding the Output
Whether you’re working in JavaScript or Python, the output will be your RSA key pair:

Private Key: This key is used to decrypt data or sign documents. It should be kept confidential.
Public Key: This key is used to encrypt data or verify signatures. It can be safely shared with others.
Here’s what an RSA private key looks like in PEM format:

-----BEGIN RSA PRIVATE KEY-----
MIIEpAIBAAKCAQEA...
-----END RSA PRIVATE KEY-----

Practical Uses of RSA Keys

Encrypting and Decrypting Messages: Encrypt a message using the public key and decrypt it with the corresponding private key.
Signing and Verifying Documents: Sign a document with the private key, and anyone with the public key can verify the signature’s authenticity.

Conclusion

RSA key generation is essential for secure communication, encryption, and digital signatures. In this guide, we demonstrated how to generate RSA key pairs in both JavaScript and Python. Using the Node.js crypto module and Python’s cryptography library, you can easily generate secure RSA key pairs for your applications.

Key Takeaways:

RSA involves a pair of keys: a public key and a private key.
The process of generating RSA keys in JavaScript and Python is straightforward with the right libraries.
These keys can be used for various security purposes, such as encryption, authentication, and digital signatures.
By following this guide, you can start implementing robust security features in your projects. Happy coding!

FAQs

Q: What is the ideal RSA key size for strong encryption?
A: A 2048-bit key is commonly used, but for stronger security, 4096-bit keys are recommended.

Q: Can I share my private key?
A: No, the private key should always remain confidential. Only the public key can be shared.

Q: What is PEM format?
A: PEM (Privacy-Enhanced Mail) is a base64-encoded format used for storing cryptographic keys and certificates.

Understanding JavaScript Hoisting: A Simple Guide

Shubham Khan — Sun, 06 Oct 2024 13:28:54 +0000

If you're new to JavaScript, you may have run into confusing situations where variables seem to be undefined or errors like ReferenceError pop up unexpectedly. This can often be traced back to a concept known as hoisting. But what is hoisting, and how does it affect your code?

In this guide, we'll break down the concept of hoisting and how it works in JavaScript. By the end, you'll understand why hoisting happens and how you can avoid common mistakes.

What is Hoisting?
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before the code runs. This means that declarations (not the assignments) are processed during a preparation phase before the actual execution of your code.

JavaScript goes through a creation phase first, where it allocates memory for variables and functions. However, the way it handles functions and variables is slightly different.

Function Hoisting: Fully Hoisted Definitions
Functions declared using the function keyword are hoisted with their full definition. This allows you to call or use a function before its actual declaration in the code.

For example:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a + b);
}

Even though the sum() function is called before it’s declared in the code, it works perfectly because the function declaration is hoisted to the top of its scope during the creation phase.

Variable Hoisting: var, let, and const
Variable hoisting behaves differently from function hoisting, and it varies depending on whether you use var, let, or const.

1. var Declarations
When you declare a variable using var, it is hoisted to the top of its scope with a default value of undefined. This means that you can access the variable before its declaration, but until you assign a value to it, the variable will hold undefined.

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

In this example, city is hoisted with a value of undefined initially. Once the value "New York" is assigned, the second console.log() correctly outputs "New York."

2. let and const Declarations
With let and const, variables are also hoisted, but they remain uninitialized. This means that if you try to access them before their declaration, you'll get a ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

This error happens because let and const variables exist in something called the Temporal Dead Zone (TDZ) between the start of their scope and the point where they are actually declared. During this time, you cannot reference the variable.

Key Difference Between let and const
Both let and const behave similarly in terms of hoisting, but const requires you to assign a value during declaration, while let allows you to declare a variable without immediately assigning a value.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Hoisting in Practice
Let’s look at an example that demonstrates both function and variable hoisting in action:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x + y);
}

var city = "New York";
console.log(city); // Output: "New York"

Here, the sum function is hoisted with its full definition, so it can be called before the function is declared. However, the city is hoisted with a value of undefined, which explains why the first console.log() outputs undefined. Once the assignment occurs, the second console.log() outputs the correct value.

Tips for Avoiding Hoisting Pitfalls
To avoid issues caused by hoisting, follow these best practices:

- Use let and const instead of var to avoid accessing variables before their declaration.
- Declare variables and functions at the top of their scope to ensure your code behaves predictably.

Recap of Key Hoisting Concepts

Hoisting refers to JavaScript’s behavior of moving declarations to the top of their scope before the code runs.
Functions declared with function are hoisted with their full definitions, allowing them to be used before they are declared.
Variables declared with var are hoisted with a default value of undefined, while variables declared with let and const remain uninitialized, causing a ReferenceError if accessed before declaration.
The Temporal Dead Zone (TDZ) applies to let and const, preventing them from being accessed before they are initialized.

By understanding hoisting, you can avoid common issues in JavaScript and write more predictable code. With practice, these concepts will become second nature.

Enhancing Performance in JavaScript: Understanding Debouncing and Throttling

Shubham Khan — Sat, 05 Oct 2024 19:36:02 +0000

Debouncing: A Strategic Delay
- How Debouncing Works
- Debouncing Example
Throttling: Controlling Event Frequency
- How Throttling Works
- Throttling Example
Implementing in React: Debounce and Throttle with Custom Hooks
- Custom Hook for Debouncing
- Using the Debounce Hook
- Custom Hook for Throttling
- Using the Throttle Hook
Final Thoughts

Performance optimization is critical in modern web applications, especially those that involve user interactions like typing in a search bar, scrolling, or resizing a window. These actions can fire off many function calls in a short time, which can degrade performance.

To mitigate this, two common techniques are debouncing and throttling, which allow you to control the rate at which a function is invoked, leading to a smoother, more efficient experience.

Debouncing: A Strategic Delay

Debouncing delays the execution of a function until a specified time has passed since the last event trigger. It is particularly helpful when dealing with events like search inputs, where you want to avoid making an API request on every keystroke.

How Debouncing Works

Imagine a search input where you want to wait until the user has stopped typing for 300ms before making an API request. Debouncing allows you to ensure that the function is only executed after the user has paused typing, preventing unnecessary API calls.

Debouncing Example

function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
function searchAPI() {
  console.log("API request made");
}
const debouncedSearch = debounce(searchAPI, 300);
debouncedSearch(); // Only triggers 300ms after the last call

Here, the API request will only be made if the user pauses for 300ms.

Throttling: Controlling Event Frequency

In contrast to debouncing, throttling ensures that a function is called at most once every specified interval, even if the event continues to trigger. This technique is ideal for scenarios like window resizing or scrolling, where the events fire continuously.

How Throttling Works

Throttling allows a function to execute only once during a defined period (e.g., 200ms), ensuring that the function is not overwhelmed by repeated triggers.

Throttling Example

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
function updateLayout() {
  console.log("Layout updated");
}
const throttledUpdate = throttle(updateLayout, 200);
window.addEventListener("resize", throttledUpdate);

In this example, the layout update function will only be called once every 200ms during window resizing.

Implementing in React: Debounce and Throttle with Custom Hooks

In React, we can use custom hooks to make the debounce and throttle functionality reusable across components. This enhances modularity and optimizes performance in various interactions.

Custom Hook for Debouncing

import { useRef, useCallback } from "react";
const useDebounce = (func, delay) => {
  const timer = useRef(null);
  return useCallback(
    (...args) => {
      if (timer.current) {
        clearTimeout(timer.current);
      }
      timer.current = setTimeout(() => func(...args), delay);
    },
    [func, delay]
  );
};
export default useDebounce;

Using the Debounce Hook

import React, { useState } from "react";
import useDebounce from "./useDebounce";
const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const fetchResults = (query) => {
    console.log(`Fetching results for ${query}`);
    return new Promise((resolve) => setTimeout(resolve, 1000));
  };
  const debouncedFetch = useDebounce(fetchResults, 300);
  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
    debouncedFetch(e.target.value);
  };
  return <input value={searchTerm} onChange={handleSearch} placeholder="Search..." />;
};
export default SearchComponent;

Custom Hook for Throttling

import { useRef, useCallback } from "react";
const useThrottle = (func, limit) => {
  const lastRun = useRef(Date.now());
  return useCallback(
    (...args) => {
      const now = Date.now();
      if (now - lastRun.current >= limit) {
        func(...args);
        lastRun.current = now;
      }
    },
    [func, limit]
  );
};
export default useThrottle;

Using the Throttle Hook

import React, { useEffect } from "react";
import useThrottle from "./useThrottle";

const ScrollComponent = () => {
  const handleScroll = () => {
    console.log("Scrolled!");
  };
  const throttledScroll = useThrottle(handleScroll, 500);
  useEffect(() => {
    window.addEventListener("scroll", throttledScroll);
    return () => window.removeEventListener("scroll", throttledScroll);
  }, [throttledScroll]);
  return <div style={{ height: "200vh" }}>Scroll down to see the effect</div>;
};
export default ScrollComponent;

Final Thoughts

Both debouncing and throttling are indispensable techniques to enhance performance in modern applications. While debouncing is ideal for inputs like search fields, throttling is best suited for high-frequency events like scrolling. Custom hooks in React, like useDebounce and useThrottle, make these optimizations easy to implement across your app, ensuring a more efficient, responsive experience.

Securing Data with RSA Encryption and Decryption Across Platforms

Shubham Khan — Sun, 29 Sep 2024 11:49:33 +0000

Introduction to RSA Encryption

In today's digital landscape, securing sensitive data is crucial for individuals and organizations alike. RSA (Rivest-Shamir-Adleman) encryption stands out as a robust solution for protecting data. It is an asymmetric encryption algorithm, which means that it uses a pair of keys: a public key for encryption and a private key for decryption. One of the main benefits of RSA encryption is that the private key never needs to be shared, which minimizes the risk of it being compromised.

This article explores how to use RSA encryption across three popular programming languages—JavaScript, Python, and PHP—making it easier to secure data in cross-platform applications.

Cross-Platform Encryption and Decryption: The Scenario

Imagine you're building a web application where sensitive information (like authentication data or personal details) must be securely transmitted between the client (front end) and the server (back end). For instance, you might encrypt a message on the client side in JavaScript and then decrypt it on the server using either Python or PHP.

RSA is well-suited for this scenario because it provides the flexibility of encryption in one language and decryption in another, ensuring cross-platform compatibility.

RSA Implementation: JavaScript, Python, and PHP

JavaScript (Next.js with JSEncrypt)
Encryption:

import JSEncrypt from 'jsencrypt';

// Function to encrypt a message using a public key
const encryptWithPublicKey = (message) => {
  const encryptor = new JSEncrypt();
  const publicKey = process.env.NEXT_PUBLIC_PUBLIC_KEY.replace(/\\n/g, "\n");
  encryptor.setPublicKey(publicKey);
  const encryptedMessage = encryptor.encrypt(message);
  return encryptedMessage;
};

Decryption:

import JSEncrypt from 'jsencrypt';

// Function to decrypt a message using a private key
const decryptWithPrivateKey = (encryptedMessage) => {
  const decryptor = new JSEncrypt();
  const privateKey = process.env.PRIVATE_KEY.replace(/\\n/g, "\n");
  decryptor.setPrivateKey(privateKey);
  const decryptedMessage = decryptor.decrypt(encryptedMessage);
  return decryptedMessage;
};

Explanation:

Public Key Encryption: The JSEncrypt library encrypts the message using the public key. This ensures that only the corresponding private key can decrypt it.
Private Key Decryption: The message is decrypted with the private key, which is securely stored in an environment variable.
Security Consideration: By using RSA, we ensure that the data sent from the client is encrypted and secure.

Python (using rsa library)
Encryption:

import rsa
import base64

def encrypt_with_public_key(message: str, public_key_str: str) -> str:
    public_key = rsa.PublicKey.load_pkcs1_openssl_pem(public_key_str.encode())
    encrypted_message = rsa.encrypt(message.encode(), public_key)
    return base64.b64encode(encrypted_message).decode()

Decryption:

import rsa
import base64

def decrypt_with_private_key(encrypted_message: str, private_key_str: str) -> str:
    private_key = rsa.PrivateKey.load_pkcs1(private_key_str.encode())
    encrypted_bytes = base64.b64decode(encrypted_message.encode())
    decrypted_message = rsa.decrypt(encrypted_bytes, private_key)
    return decrypted_message.decode()

Explanation:

Public Key Encryption: The message is encrypted using a public key, ensuring that only the intended private key holder can decrypt it.
Base64 Encoding: After encryption, the message is Base64 encoded to ensure compatibility with text transmission.
Private Key Decryption: The private key is used to decrypt the Base64-encoded encrypted message, ensuring confidentiality.

PHP (using OpenSSL)
Encryption:

function encrypt_with_public_key($message) {
    $publicKey = getenv('PUBLIC_KEY');
    openssl_public_encrypt($message, $encrypted, $publicKey);
    return base64_encode($encrypted);
}

Decryption:

function decrypt_with_private_key($encryptedMessage) {
    $privateKey = getenv('PRIVATE_KEY');
    $encryptedData = base64_decode($encryptedMessage);
    openssl_private_decrypt($encryptedData, $decrypted, $privateKey);
    return $decrypted;
}

Explanation:

Public Key Encryption: The openssl_public_encrypt function encrypts the message using the public key, ensuring that only the private key can decrypt it.
Private Key Decryption: The openssl_private_decrypt function decrypts the message using the private key, ensuring that sensitive information remains secure.
Environment Variables: Both the public and private keys are securely stored in environment variables, enhancing security.

Best Practices for Encryption

Use Environment Variables: Always store your keys in environment variables instead of hard-coding them into your application. This reduces the risk of exposing sensitive information.
Encrypt Sensitive Data: Encrypt personal and sensitive data such as passwords, financial details, or personally identifiable information (PII) to prevent unauthorized access.
Use HTTPS: Ensure your application communicates over HTTPS to safeguard data in transit.
Secure Key Management: Regularly rotate encryption keys and ensure they are stored securely.

Why Choose RSA Encryption?

Enhanced Data Security: RSA encryption ensures that sensitive data is kept secure during transmission, preventing unauthorized access.
Asymmetric Encryption: RSA uses a public key for encryption and a private key for decryption, which ensures the private key never needs to be shared.
Cross-Platform Compatibility: RSA works seamlessly across different platforms and programming languages, making it ideal for web applications where different technologies are used on the client and server sides.

Conclusion

RSA encryption offers a reliable way to secure sensitive data across multiple programming environments. By implementing RSA encryption and decryption in JavaScript, Python, and PHP, you can protect sensitive information, enhance security, and ensure cross-platform compatibility. Whether it's for securing API calls, safeguarding user data, or ensuring the confidentiality of messages, RSA provides a robust encryption solution.

If you found this guide helpful, consider sharing it with fellow developers, and stay tuned for more insights into encryption and data security!

Encryption #RSA #CyberSecurity #DataSecurity #WebDevelopment #CrossPlatformSecurity #JavaScript #Python #PHP

DEV Community: Shubham Khan

How to Securely Remove a File from Git History: A Step-by-Step Guide

Why Remove a File from Git History?

Step 1: Using git filter-branch to Remove the File

What Does This Command Do?

Step 2: Clean Up Your Repository

Step 3: Force Push the Changes to Your Remote Repository

Step 4: Remove the File Locally and Update .gitignore

Conclusion

Beginner’s Guide to AES Encryption and Decryption in JavaScript using CryptoJS

Why Data Security Matters

What is AES Encryption?

Why You Need Encryption

What is CryptoJS?

How Does AES Work?

Implementing AES Encryption and Decryption in JavaScript

Essential Concepts

Benefits of AES Encryption

Best Practices for Implementing AES

Conclusion

Mastering the Fundamentals of Object-Oriented Programming (OOP) in Java

1. Encapsulation: Safeguarding Data

2. Inheritance: Reusing Functionality

3. Polymorphism: Flexibility in Action

4. Abstraction: Simplifying Complex Systems

Conclusion

Java #OOP #Encapsulation #Inheritance #Polymorphism #Abstraction #JavaLearning #ProgrammingFundamentals #CodeNewbie #SoftwareDevelopment #Tech

How to Generate RSA Key Using JavaScript and Python

What is RSA?

Why Use RSA?

Generating RSA Keys Using OpenSSL (Command Line)

Generating RSA Keys in JavaScript

Generating RSA Keys in Python

Practical Uses of RSA Keys

Conclusion

Key Takeaways:

FAQs

Understanding JavaScript Hoisting: A Simple Guide

Enhancing Performance in JavaScript: Understanding Debouncing and Throttling

Table of Contents

Debouncing: A Strategic Delay

How Debouncing Works

Debouncing Example

Throttling: Controlling Event Frequency

How Throttling Works

Throttling Example

Implementing in React: Debounce and Throttle with Custom Hooks

Custom Hook for Debouncing

Using the Debounce Hook

Custom Hook for Throttling

Using the Throttle Hook

Final Thoughts

Securing Data with RSA Encryption and Decryption Across Platforms

Introduction to RSA Encryption

Cross-Platform Encryption and Decryption: The Scenario

RSA Implementation: JavaScript, Python, and PHP

Best Practices for Encryption

Why Choose RSA Encryption?

Conclusion

Encryption #RSA #CyberSecurity #DataSecurity #WebDevelopment #CrossPlatformSecurity #JavaScript #Python #PHP