DEV Community: Kurt De Austria

How I Automated OBS Streaming with JavaScript (And Saved Our Office Hours of Setup Time)

Kurt De Austria — Sun, 04 May 2025 01:50:05 +0000

📌 TL;DR

I built a tool that automatically launches two OBS instances, connects to different RTSP streams, applies AI-based filters, and starts streaming to different RTMP servers — all with one click using Node.js + OBS WebSocket API.

👉 GitHub Repo

🚨 The Problem We Had

At our workplace, we operate multiple mini PCs in a remote location — each with 2 camera feed — and we needed to livestream them 24/7 to different platforms. The steps were tedious:

Manually open two OBS windows
Set up each RTSP stream
Apply AI detection filters (via obs-detect plugin)
Configure different RTMP destinations
Hit “Start Streaming” on both

Each time the PC was rebooted, all configurations had to be re-applied manually. Why initiate a reboot? To prevent thermal buildup and memory leaks—continuous 24/7 operation can lead to system degradation and reduced performance over time.

As you can imagine, this wasted time, was error-prone, and not scalable.

💡 My Eureka Moment: OBS + JavaScript

After some research, I discovered that OBS has a WebSocket API — and there’s an official JavaScript library called obs-websocket-js. That opened up a world of automation.

From there, I built a Node.js script that could:

✅ Launch multiple OBS portable instances

✅ Detect if a media source exists, or create one

✅ Auto-apply AI filters from the obs-detect plugin

✅ Configure each stream’s RTMP server and key

✅ Start streaming — no clicks required

🔧 How It Works (In Simple Terms)

I created two folders:

C:\OBS_Instances\OBS1  
C:\OBS_Instances\OBS2

Each folder holds a portable OBS installation. Basically, a copy of the original OBS directory and pasted on both instances. A Python script launches both and Node.js connects to them via WebSocket.

Using obs.call(), I set up:

Media Source: RTSP input from the camera
Filters: Object detection + pixelation
Output: RTMP settings
Streaming: Triggered automatically

All configurations are driven by a .env file so you don’t touch the code to change URLs, ports, or stream keys.

✨ The Result

Now, with a single double-click (autorun.exe), both OBS instances:

Launch silently
Auto-connect to their respective RTSP feeds
Apply detection filters
Stream to different RTMP destinations

If either OBS crashes or the PC restarts, we just click again — no more 10-minute manual setup every time.

📦 Project Structure

obs.js – Node script that configures OBS via WebSocket
autorun.py – Optional Python launcher to wrap both processes
.env – Environment variables (RTSP, ports, RTMP keys)
autorun.exe – Compiled version of the launcher

➡️ Full source code: GitHub Repo

📹 About `obs-detect` Plugin

Each mini PC has obs-detect installed — an AI plugin that identifies people in video streams and blurs them out using either pixelation or Gaussian blur.

In the automation script, I added a function to apply these filters automatically:

await obs.call('CreateSourceFilter', {
  sourceName: 'CameraSource',
  filterName: 'Detect',
  filterKind: 'ai-detect',
  filterSettings: {
    ObjectCategory: 'Person',
    MaskingOptions: true,
    MaskingType: 'Pixelate',
    BlurPixelSize: 20,
    Dilation: 10,
    AdvancedSettings: true,
    ContinousTracking: true,
    Model: 'Medium',
  }
});

🚀 Try It Yourself

If you’re running multi-stream surveillance or broadcasting cameras remotely — automating OBS with JavaScript is a game changer.

Whether you're in security, content creation, or a hybrid office setup, this approach saves time and guarantees consistency.

🧠 What I Learned

OBS is more scriptable than most people realize.
Combining Python (for process control) and Node.js (for logic) worked well.
Using .env and Promise.all() made the solution clean and scalable.
Writing tools to remove repetitive tasks = huge ROI for small teams.

Thanks for reading!

Feel free to fork the repo, suggest improvements, or reach out if you’re solving something similar. Happy streaming! 🎥

—

Kurt Chan

Portfolio | GitHub

Learning and Implementing RAG (Retrieval-Augmented Generation) using Hugging Face and LangChain

Kurt De Austria — Sat, 15 Feb 2025 03:06:04 +0000

I've been learning about AI chatbots and their widespread use as company assistants and personal AI companions. Based on what I've seen from TikTok reels and YouTube videos, here's what I understand about building RAG Applications:

LLMs only refer to public pre-trained data, which can sometimes lead to inaccurate answers.
To improve accuracy, they need to be supplemented with custom knowledge bases like documents, PDFs, and company SOPs (Standard Operating Procedures).

In essence, if you want an AI to provide accurate answers, you'll need to implement the RAG approach.

What is RAG (Retrieval-Augmented Generation)?

According to Data Camp, RAG, or Retrieval Augmented Generation, combines a pre-trained large language model with an external data source. It merges the generative capabilities of LLMs like GPT-3 or GPT-4 with precise data search mechanisms to deliver nuanced responses.

Why do we need to use RAG?

Enhanced Accuracy: RAG allows LLMs to access up-to-date and domain-specific information, reducing hallucinations and improving response accuracy.
Customization: Organizations can integrate their proprietary data, enabling AI to provide responses tailored to their specific context and needs.
Transparency: RAG makes it possible to trace the sources of information, making the AI's responses more verifiable and trustworthy.
Cost-Effective: Instead of fine-tuning entire models, RAG allows for updating knowledge by simply modifying the external knowledge base.
Real-Time Updates: The knowledge base can be continuously updated without retraining the entire model, ensuring responses stay current.

How does it work?

According to LangChain, the typical RAG approach has 2 main components:

Indexing: a pipeline for ingesting data from a source and indexing it. This usually happens offline.
Retrieval and generation: the actual RAG chain, which takes the user query at run time and retrieves the relevant data from the index, then passes that to the model.

Indexing

Load: Begin by loading your data, such as documents, PDFs, URLs, or JSON files.
Split: Break large documents into smaller, digestible chunks. This enhances both data indexing and model processing, making searches more efficient and ensuring the text fits within the model’s context window (e.g., max tokens).
Embed: Use an embedding model to convert these text chunks into vector representations. This process is typically handled by a separate model that transforms text into numerical embeddings.
Store: Finally, store the vectorized chunks in a database, allowing for efficient search and retrieval

Retrieval and Generation

Retrieve: When a user enters a question, the system looks up the most relevant text chunks from storage using a Retriever. Think of it like searching for the best puzzle pieces to answer the question.
Generate: Once the right chunks are found, a ChatModel or LLM takes over. It uses a prompt that combines the user's question with the retrieved info to generate a meaningful response—kind of like piecing together a story from key details.

Essential Components for Building RAG AI Applications:

Embedding Model: Converts text from documents or web pages into vectorized data chunks that LLMs can process. For web content, this requires scraping the URL first.
LLM: The core AI model that generates responses based on the provided embeddings.
Vector Database: A specialized database that stores vectorized data for the AI to reference.

Let’s try to build!

Of course! When learning something new, I always make sure to apply it in practice. Recently, I built an AI Exam Question Generator called Nexar, which creates questions based on the specific Bloom’s Taxonomy level the user selects. However, the AI has limited knowledge of Bloom’s Taxonomy, which is a drawback. To improve this, we’ll be implementing Retrieval-Augmented Generation (RAG).

Tech stack

LangChainJS: A powerful framework for building applications that leverage large language models (LLMs).
Node.js: The runtime environment for developing and running our application.
PineconeDB: Our vector database for storing and indexing vectorized text chunks.
Hugging Face: A platform for accessing and using open-source LLMs.

Setup

Install the dependencies:

// Install LangChain
npm install @langchain/community @langchain/core

//Install HuggingFace Inference and Pinecone DB
npm install  @huggingface/inference @langchain/pinecone 

// Install other libraries that we need
npm install dotenv ts-node playwright

Step 1: Scrape URL Contents

To gather information on Bloom’s Taxonomy, we’ll find relevant URLs and extract their content through web scraping. Then we will split these texts into smaller chunks. This will provide the necessary data for our project. We’ll add a separate function to scrape all of the contents of our URL.

// scrape.ts
import * as playwright from 'playwright';
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter';

export const scrape = async (url: string) => {
        const browser = await playwright.chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto(url, { waitUntil: 'domcontentloaded' });

    // get the text in the body
    const text = await page.innerText('body');
    await browser.close();

    // Replaces all \n with spaces
    const cleanedText = text.replace(/\n/g, ' ');

    // Split scraped data into chunks
    const splitter = new RecursiveCharacterTextSplitter({
        chunkSize: 512,
        chunkOverlap: 100,
    });

    // Create documents out of the chunk texts
    const output = await splitter.createDocuments([cleanedText]);

    console.log("Scraped text into chunks: ", output)
    // return output.map((doc) => ({ text: doc.pageContent, url }));
    return output.map((doc) => ({ text: doc.pageContent, url }));
}

Step 2: Embed the chunks

Each chunk must be embedded and converted into vectorized data before being stored in our database. To achieve this, we'll use the sentence-transformers/all-MiniLM-L6-v2 model from Hugging Face for embedding the text. First, we’ll create a separate function for embedding texts.

// generateEmbeddings.ts
import { HuggingFaceInferenceEmbeddings } from '@langchain/community/embeddings/hf';
import dotenv from 'dotenv'
dotenv.config();

// Embedding Model using HuggingFace
const client = new HuggingFaceInferenceEmbeddings({
  apiKey: process.env.HF_ACCESSTOKEN, // Your API key in HuggingFace
  model: "sentence-transformers/all-MiniLM-L6-v2",
});

export const generateEmbedding = async (text: string) => {
    const embedding = await client.embedQuery(text)
    return embedding;
}

Secondly, we’ll create an ingest function that will loop over our URLs and embed each chunks of text.

import { generateEmbedding } from "./generateEmbeddings";
import { scrape } from "./scrape";
import { upsert } from "./upsert";

// urls to scrape
const urls = [
    'https://www.coloradocollege.edu/other/assessment/how-to-assess-learning/learning-outcomes/blooms-revised-taxonomy.html', 
    'https://whatfix.com/blog/blooms-taxonomy/'
 ];

async function ingest() {
    let chunks: {id:number, text: string; $vector: number[]; url: string }[] = [];

    await Promise.all(
        urls.map(async (url) => {
            let data = await scrape(url);

            // Embed the scraped data chunks
            const embeddings = await(Promise.all(data.map(async(doc) => {
                return await generateEmbedding(doc.text)
            })))

            // Return the values with the vectorized chunks data
            chunks = chunks.concat(data.map((doc, index) => {
                return {
                    id: index + 1,
                    text: doc.text,
                    $vector: embeddings[index],
                    url: doc.url
                }
            }))
        })
    );
    // upsert the chunks to Pinecone
    await upsert(chunks)
    console.log("Vectorized Chunks", chunks)
}

ingest().catch((error) => console.error(error));

If you run this by runnning the command: npx ts-node ingest.ts, you will get all the chunked texts and its vectorized data. Now, well need to store these data into our Pinecone vector database.

Step 3: Store the vectorized chunks

On this step, make sure you already created an account for Pinecone. It is optional to create your first index on the UI because we will create the index programmatically. First, we’ll create a function that will check if we have an index created, if none, we’ll create a new index. After creating the index we will create another function to upsert the vectorized data into our pinecone index.

// upsert.ts
import { PineconeStore } from "@langchain/pinecone";
import { Pinecone as PineconeClient } from "@pinecone-database/pinecone";
import dotenv from 'dotenv'
dotenv.config();

interface Document {
    id: number,
    text: string,
    $vector: number[],
    url: string
}

export const client = new PineconeClient({apiKey: `${process.env.PINECONE_API_KEY}`});
export const indexName ="pinecone-index-1"

// Check the existing index, create if none
const createPineconeIndex = async () => {
    const existingIndexes = await client.listIndexes();
    if(!existingIndexes.indexes?.find((a) => a.name.includes(indexName))){
        console.log(`Creating "${indexName}"...`);

        const createClient = await client.createIndex({
          name: indexName,
          dimension: 384, // vector dimension for model `sentence-transformers/all-MiniLM-L6-v2`
          metric: 'cosine',
          spec: { 
            serverless: { 
              cloud: 'aws', 
              region: 'us-east-1' 
            }
          } 
        })

        console.log(`Created with client:`, createClient);
        // Wait 60 seconds for index initialization
        await new Promise((resolve) => setTimeout(resolve, 60000));
    }
    else{
        console.log(`"${indexName}" already exists.`);
    }
}

export const upsert = async (docs: Document[]) => {
    createPineconeIndex(); // create index
    const index = client.Index(indexName);
    // Batch the chunks to 100, this will allow us not to exceed the Pinecone requirements
    const batchSize = 100;
    let batch = [];

    for (let i = 0; i < docs.length; i++) {
        const vector = {
            id: `${docs[i].id}_${docs[i].url}`,
            values: docs[i].$vector,
            metadata: {
                text: docs[i].text,
                url: docs[i].url
            },
        };
        batch.push(vector)
            // If the batch is done, we will upsert everything and empty the batch
        if (batch.length === batchSize || i === docs.length -1) {
            await index.upsert(batch)
            // Empty the batch
            batch = []
        }
    }
    console.log(`Pinecone index updated with ${docs.length} vectors`);
}

After storing the vectorized data, you should be able to see the data in the Pinecone UI.

Step 4: Prompting the AI

At this step, we will try to ask the LLM to generate questions based on blooms taxonomy. To make our query be familiar to the AI about blooms taxonomy, we are also going to embed our prompt to get the vectorized data and compare it inside our Pinecone. We’ll create an askAi function that will do that.

import { generateEmbedding } from "./generateEmbeddings";
import { HuggingFaceInference } from "@langchain/community/llms/hf";
import { RunnableSequence } from "@langchain/core/runnables";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StructuredOutputParser } from "langchain/output_parsers";
import { client, indexName } from "./upsert";
import {z} from "zod";
import dotenv from "dotenv";
dotenv.config();

const question = `Generate exactly 5 Multiple-choice questions that assess the Remembering level of Bloom's Taxonomy. The questions should be based solely on the following content or topic:
    "Data Structures & Algorithms"

Each question must:
- Start with Number 1.
- Focus on the Remembering level (e.g., Remembering behavior).
- Clearly specify the correct answer.`;

// Initialize the HuggingFace model
const model = new HuggingFaceInference({
  model: process.env.HF_MODEL,
  apiKey: process.env.HF_ACCESSTOKEN,
  temperature: 0.5
});

const askAi = async () => {
  try {
    // Retrieve the Pinecone Index
    const index = client.Index(indexName);

    // Create query embedding.
    const queryEmbedding = await generateEmbedding(question);

    // Query the Pinecone index and return top 10 matches
    const queryResponse = await index.query({
      vector: queryEmbedding, // Vectorized query
      topK: 10,              // Top 10 matches
      includeMetadata: true,
      includeValues: true,
    });

    console.log(`Found ${queryResponse.matches.length} matches...`);
    console.log("Asking question...");

    if (queryResponse.matches.length) {
      // Concatenate matched documents into a single string
      const concatenatedPageContent = queryResponse.matches
        .map((match) => match.metadata?.text)
        .join(" ");

      // Create a chat-based prompt template
      const prompt = ChatPromptTemplate.fromMessages([
        [
          "system",
          `You are an expert teacher assistant specializing in creating examination questions. 
                      You will help the user by generating tricky examination questions 
                      based on the content, paragraph, or topic they provide and their 
                      preferred type of questions (e.g., true or false, short answer, multiple-choice). 

                      The user will specify the level of difficulty based on the Revised Bloom's Taxonomy: 
                      {content}

                    **Output Requirements**:
                        - Always generate the questions and answers in the following format:
                        {format_instructions}

                      Instructions:
                      - Directly generate the requested questions and answers. 
                      - Do not provide any commentary, explanations, or context about the topic or your process.
                      - Do not think step-by-step or describe your reasoning.
                      - If you encounter unfamiliar content, still generate questions based on the provided instructions.
                      - Your output must only include the generated questions and their answers in the exact requested format.
            `
        ],
        ["user", "{user_query}"],
      ]);

      // Define the JSON schema for the desired output structure
    const schema = z.object({
      questions: z.array(
        z.object({
          questionNumber: z.number(),
          question: z.string(),
          options: z.object({
            a: z.string(),
            b: z.string(),
            c: z.string(),
            d: z.string(),
          }),
          answer: z.string(),
        })
      ),
    });
      // Create an output parser from the JSON schema
      const parser = StructuredOutputParser.fromZodSchema(schema);

      // Create a RunnableSequence chain with the prompt and the structured model
      const chain = RunnableSequence.from([prompt, model, parser]);

      // Execute the chain with input
      const result = await chain.invoke({
        content: concatenatedPageContent,
        user_query: question,
        format_instructions: parser.getFormatInstructions()
      });

    //   console.log(`Generated Questions:\n${result}`);
      console.log(result);
    } else {
      console.log("No relevant content found. Skipping AI query.");
    }
  } catch (error) {
    console.error("Error occurred:", error);
  }
};

askAi();

As you can see we used a ZodSchema for JSON. Since our AI is a chat base model, it will say a lot of things. Using StructuredOutputParser we will force the output as an JSON schema.

Output:

Found 10 matches...
Asking question...
{
  questions: [
    {
      questionNumber: 1,
      question: 'What is the basic unit of data in a linked list?',
      options: [Object],
      answer: 'a'
    },
    {
      questionNumber: 2,
      question: 'Which data structure follows the Last In First Out (LIFO) principle?',
      options: [Object],
      answer: 'b'
    },
    {
      questionNumber: 3,
      question: 'In algorithm analysis, what does O(1) represent?',
      options: [Object],
      answer: 'b'
    },
    {
      questionNumber: 4,
      question: 'What is the process of adding an element to a stack called?',
      options: [Object],
      answer: 'b'
    },
    {
      questionNumber: 5,
      question: 'Which of the following is not a primitive data type in most programming languages?',
      question: 'Which of the following is not a primitive data type in most programming languages?',
      options: [Object],
      answer: 'd'
    }
  ]
}

See the repository here!

Conclusion

Retrieval-Augmented Generation (RAG) is a powerful technique that enhances AI chatbots by combining the generative capabilities of LLMs with external knowledge sources. By indexing and retrieving relevant data, RAG improves response accuracy, reduces hallucinations, and allows for real-time updates without the need for fine-tuning. Implementing RAG requires key components like embedding models, vector databases, and retrieval mechanisms, which have been demonstrated in the Nexar AI Exam Question Generator project. By integrating this approach, AI applications can deliver more precise, customized, and transparent answers tailored to specific domains.

Exploring HuggingFace and Building an AI Exam Question Generator

Kurt De Austria — Sat, 21 Dec 2024 03:08:38 +0000

Hello there! I’m Kurt. Recently, I’ve been diving deep into the world of AI models. You’ve probably heard of HuggingFace—a powerful platform for AI enthusiasts and developers. Let me take you through my journey of experimenting with one of its AI models and how it led me to build something useful for educators: an AI Exam Question Generator.

What is HuggingFace?

HuggingFace is a treasure trove for anyone curious about AI. It offers:

900k+ AI models
200k+ datasets
300k+ demo apps (Spaces)

All of this is open-source and ready to use, making collaboration in machine learning a breeze. These models cover a wide range of categories like Multimodal, Computer Vision, Natural Language Processing (NLP), and Audio.

But here’s the thing—reading about AI wasn’t enough for me. I wanted hands-on experience. So, I decided to test one of HuggingFace’s models.

My First Steps with HuggingFace

Setting up a project using HuggingFace was straightforward. Here’s a quick overview of the process:

Create an Account: Sign up and navigate to the settings to generate an access token.
Start a Node.js Project:
```
npm init --y
```
Install Required Packages:
```
npm i @huggingface/inference dotenv
```

Copy Sample Code: Paste a code snippet from the HuggingFace model page into your project.

import { HfInference } from "@huggingface/inference"
const client = new HfInference("YOUR_HF_TOKEN")

let out = "";

const stream = client.chatCompletionStream({
    model: "Qwen/QwQ-32B-Preview",
    messages: [
        { role: "system", content: "You are a helpful and harmless assistant. You are Qwen developed by Alibaba. You should think step-by-step." },
        { role: "user", content: "Tell me a story" }
    ],
    temperature: 0.5,
    max_tokens: 2048,
    top_p: 0.7
});

for await (const chunk of stream) {
    if (chunk.choices && chunk.choices.length > 0) {
        const newContent = chunk.choices[0].delta.content;
        out += newContent;
        console.log(newContent);
    }
}

Run the Code: See the magic unfold as the AI processes your input and generates outputs.

And just like that, I had the model up and running! But I wasn’t satisfied—I wanted to do more.

Finding the Problem to Solve

As a former part-time Computer Science professor, I often faced the challenge of creating test questions for exams. My friends who are teachers share the same struggle. Writing questions that align with Bloom’s Taxonomy is tedious and time-consuming.

If you’re not familiar, Bloom’s Taxonomy is a framework used in education to classify learning objectives by cognitive levels. It includes:

Remembering: Basic recall and recognition
Understanding: Comprehending information
Applying: Using information in new situations
Analyzing: Breaking information into parts
Evaluating: Making judgments based on criteria
Creating: Producing new or original work

Effective exams require a mix of these levels, not just basic recall questions. And that’s where I saw an opportunity for innovation.

Introducing Nexar: The AI Exam Question Generator

To address this problem, I developed Nexar, an AI-powered tool to generate exam questions. Here’s how it works:

Set the Number of Questions: Decide how many items to generate.
Choose a Starting Item Number: Useful for organizing questions.
Select Question Type: Choose from Multiple-choice, Fill in the blanks, or True/False.
Select Difficulty Level: Based on Bloom’s Taxonomy.
Provide Content: Paste text from your modules or write a topic.

Click "Generate" and watch as the AI creates questions tailored to your input. These questions align with Bloom’s framework, making exam preparation much easier! Here is the sample output

How You Can Try It

Nexar is still a prototype, but it’s fully functional. If you’re a teacher, developer, or just someone curious about AI, I’d love for you to try it out. Your feedback will help me improve and take this tool to the next level.

👉 Try Nexar Now!

Building Nexar was a fun and fulfilling experience. It’s proof that AI can solve real-world problems creatively and efficiently. If you’ve got ideas or want to collaborate, let’s connect!

Essential Web Resources for Stunning Front-End Design

Kurt De Austria — Mon, 11 Nov 2024 06:15:58 +0000

Introduction

Creating an eye-catching front end for a website often means diving into a variety of design tools and resources. I’ve compiled a list of some of my go-to sites that bring polish, ease, and visual appeal to my projects. Whether you're looking for UI components, icons, or gradient backgrounds, these resources offer a range of tools to elevate your design work. Let’s dive in!

1. shadcn UI - https://ui.shadcn.com/

shadcn UI offers a robust collection of React-based components built with accessibility in mind. With highly customizable options, it seamlessly integrates into modern frameworks and comes with a sleek, minimalist aesthetic, making it a fantastic choice for projects that prioritize clean, efficient UI design.

2. Heroicons - https://heroicons.com/solid

Heroicons is a popular icon set featuring over 200 hand-crafted, open-source icons in both outline and solid styles. Perfect for adding consistent, polished icons to your UI, Heroicons blends well with any aesthetic and can be styled for different brand tones.

3. Lucide - https://lucide.dev/

Lucide is a versatile icon library that emphasizes clean lines and readability. With hundreds of icons and continuous updates, it’s an excellent alternative to Heroicons, offering detailed icons that scale well at different sizes. Lucide is built for modern design trends, ensuring each icon fits smoothly into a contemporary UI.

4. Gradient Magic - https://www.gradientmagic.com/

Gradient Magic is a fantastic resource for adding unique gradient patterns to your project. With a vast library of visually dynamic gradients, it provides an array of CSS-compatible options. From subtle to bold, these gradients can transform the look and feel of a page or component background instantly.

5. Gradienty - https://gradienty.codes/tailwind-gradient-background

Tailored for Tailwind CSS users, Gradienty simplifies the process of adding gradient backgrounds, text gradients, box shadows, palette visualizer and more to your designs. The site provides custom gradients specifically designed for Tailwind, allowing for quick and easy integration that saves time while enhancing the visual impact of your site’s background elements.

Conclusion

Great design is often about finding the right resources that streamline your workflow and elevate the final product. From icons to gradients to ready-to-use components, each of these resources has been invaluable in my projects. I hope these tools inspire you to experiment and bring new visual life to your own designs!

Preventing CSRF and XSS Attacks with JWT and Fingerprint Cookies in Express

Kurt De Austria — Tue, 01 Oct 2024 13:21:33 +0000

When building a full-stack web application, the communication between your client and server are at risk with different vulnerabilities such as XSS (Cross-Site Scripting), CSRF (Cross-Site Request Forgery) and Token Sidejacking. As a web developer, knowing such vulnerabilities and how to prevent them is highly essential.

Since I am also trying to learn and prevent this vulnerabilities in my APIs, these guides are also my reference in creating this article and this are all worth reading:

First, let’s define the three vulnerabilities as mentioned before.

XSS (Cross-Site Scripting)

According to OWASP.org

Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

CSRF (Cross-Site Request Forgery)

According to OWASP.org

Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.

Token Sidejacking

According to JWT Cheatsheet

This attack occurs when a token has been intercepted/stolen by an attacker and they use it to gain access to the system using targeted user identity.

When I was starting out creating a Full-Stack application using Angular and Laravel. I used JSON Web Tokens (JWT) for authentication, it is easy to use but also easy to exploit if not implemented properly. Common mistakes I did was:

1. Storing tokens in the local storage

Local storage is a common choice since it can be easily retrieve and access from JavaScript , it is also persistent which means it does not deletes whenever the tab or the browser is closed, makes it highly vulnerable to Cross-Site Scripting (XSS) attacks.

Example:

If an XSS attack injects the following into your site:

console.log(localStorage.getItem('jwt_token'));

2. Long TTL (Time to Live) of Token

JWTs have a TTL, and if not configured properly in Laravel, by default, the token is set to 3600 seconds (1 hour), giving hackers an open and wide opportunity to steal the token and use it to act as the victim until the token expires.

3. No Refresh tokens

A refresh token allows the user to get a new access token without having to reauthenticate. TTL plays a crucial role in tokens, a longer TTL is a security risk as mentioned before, but a shorter TTL will make a bad user experience, forcing them to log in again.

We will create a basic React + Express application to apply and mitigate these vulnerabilities. To better understand the output of the application that we will be doing refer to the diagram below.

Authentication

When authentication, the user will send username and password and POST it to the /login API to verify. Upon logging in, the server will:

Verify credentials in the database

The user credentials in JSON format will be checked in the database for authentication.
Generate User Fingerprint

Generating a random byte fingerprint for the verified user and store it in a variable.
Hash the Fingerprint

The generated fingerprint will be hashed and stored in a different variable.
Creating a Cookie for the Generated Fingerprint (Original fingerprint)

The unhashed fingerprint will be set in a hardened cookie with the name __Secure_Fgp with flags: httpOnly, secure, sameSite=Strict and maxAge of 15mins.
Creating a token for the User credentials with the Hashed Fingerprint

Generating a JWT token for the verified user with its hashed fingerprint.
Creating a cookie for the token

After generating JWT token, the token will be sent as a cookie.

After the process, there will be 2 cookies will be sent, the original fingerprint of the user, and the generated token containing the data with the hashed fingerprint of the user.

Accessing the protected route

When an authenticated user accessed the protected route. A middleware will verify the cookies of the user.

Fetching cookies

The middleware of the server will fetch the 2 cookies from the client upon request.
Verify the JWT

Using JWT token, it will verify the token from the fetched cookie. Extract the data inside the JWT (e.g. User details, fingerprint etc.)
Hash the __Secure_Fgp cookie and compare it to the fingerprint from the payload JWT token.

Now for the implementation

Server-Side (Express JS)

Here are all the libraries that we need:

jsonwebtoken

For generating, signing and verifying JWT Tokens
crypto

To generate random bytes and hashing fingerprints
cookie-parser

For parsing Cookie header and creating cookies
cors

Configuring CORS policy
csurf

Generating CSRF Tokens

Set up

npm init -y //Initate a node project
// Installing dependencies
npm install express nodemon jsonwebtoken csurf crypto cookie-parser cors

Create a server.js file

Create a server.js file and edit the package.json, write "start": "nodemon server.js" under the scripts object.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },

Set up the server

Since we are using JWT, we’re gonna need a HMAC key


const express = require('express');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');
const cookieParser = require('cookie-parser');
const cors = require('cors')
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

const app = express();

// MIDDLEWARES ======================================================
// Middleware to parse JSON bodies and Cookies
app.use(express.json());
app.use(cookieParser());

// Middleware to parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: true }));

// Middleware to apply CORS
const corsOptions = {
    origin: 'http://localhost:5173',  // Your React app's URL
    credentials: true  // Allow credentials (cookies, authorization headers)
};
app.use(cors(corsOptions));

const keyHMAC = crypto.randomBytes(64);  // HMAC key for JWT signing

// API ======================================================

// we'll add our routes here

// Start the Express server
app.listen(3000, () => {
    console.log('Server running on https://localhost:3000');
});

After setting up the Express server, we can start by creating our /login API.

Create a login API

I did not used database for this project, but feel free to modify the code.

app.post('/login', csrfProtection, (req, res) => {
        // Fetch the username and password from the JSON
    const { username, password } = req.body;

    // Mock data from the database
    // Assuming the user is registered in the database
    const userId = crypto.randomUUID();
    const user = {
        'id': userId,
        'username': username,
        'password': password,
    }

    res.status(200).json({
        message: 'Logged in successfully!',
        user: user
    });
});

Generate a user fingerprint

Assuming that the user is registered in the database, First, we’re gonna need two functions, one for generating a random fingerprint and hashing the fingerprint.

/* 
.
. ... other configurations
.
*/
const keyHMAC = crypto.randomBytes(64);  // HMAC key for JWT signing

// Utility to generate a secure random string
const generateRandomFingerprint = () => {
    return crypto.randomBytes(50).toString('hex');
};

// Utility to hash the fingerprint using SHA-256
const hashFingerprint = (fingerprint) => {
    return crypto.createHash('sha256').update(fingerprint, 'utf-8').digest('hex');
};

As discussed earlier, we are going to generate a fingerprint for the user, hash that fingerprint and set it in a cookie with the name __Secure_Fgp..

Then generate a token with the user’s details (e.g. id, username and password) together with the original fingerprint, not the hashed one since we are going to use that for verification of the token later.

    const userId = crypto.randomUUID();
    const user = {
        'id': userId,
        'username': username,
        'password': password,
    }

    const userFingerprint = generateRandomFingerprint();  // Generate random fingerprint
    const userFingerprintHash = hashFingerprint(userFingerprint);  // Hash fingerprint

    // Set the fingerprint in a hardened cookie
    res.cookie('__Secure_Fgp', userFingerprint, {
        httpOnly: true,
        secure: true,  // Send only over HTTPS
        sameSite: 'Strict',  // Prevent cross-site request
        maxAge: 15 * 60 * 1000  // Cookie expiration (15 minutes)
    });

    const token = jwt.sign(
        {
            sub: userId,  // User info (e.g., ID)
            username: username,
            password: password,
            userFingerprint: userFingerprintHash,  // Store the hashed fingerprint in the JWT
            exp: Math.floor(Date.now() / 1000) + 60 * 15  // Token expiration time (15 minutes)
        },
        keyHMAC // Signed jwt key
    );

    // Send JWT as a cookie
    res.cookie('token', token, {
        httpOnly: true,
        secure: true,
        sameSite: 'Strict',
        maxAge: 15 * 60 * 1000
    });

    res.status(200).json({
        message: 'Logged in successfully!',
        user: user
    });
});

After log in, it will pass two cookies, token and __Secure_Fgp which is the original fingerprint, into the front end.

Create middleware for authenticating of token

To validate that, we are going to create a middleware for our protected route. This middleware will fetch the two cookies first and validate, if there are no cookies sent, then it will be unauthorized.

If the token that was fetched from the cookie is not verified, malformed or expired, it will be forbidden for the user to access the route.

and lastly, it will hash the fingerprint from the fetched cookie and verify it with the hashed one.

// Middleware to verify JWT and fingerprint match
const authenticateToken = (req, res, next) => {
    const token = req.cookies.token;
    const fingerprintCookie = req.cookies.__Secure_Fgp;

    if (!token || !fingerprintCookie) {
        return res.status(401).json({
            status: 401,
            message: "Error: Unauthorized",
            desc: "Token expired"
        });  // Unauthorized
    }

    jwt.verify(token, keyHMAC, (err, payload) => {
        if (err) return res.status(403).json({
            status: 403,
            message: "Error: Forbidden",
            desc: "Token malformed or modified"
        });  // Forbidden

        const fingerprintHash = hashFingerprint(fingerprintCookie);

        // Compare the hashed fingerprint in the JWT with the hash of the cookie value
        if (payload.userFingerprint !== fingerprintHash) {
            return res.status(403).json({
                status: 403,
                message: "Forbidden",
                desc: "Fingerprint mismatch"
            });  // Forbidden - fingerprint mismatch
        }

        // Return the user info
        req.user = payload;
        next();
    });
};

To use this middleware we are going to create a protected route. This route will return the user that we fetched from the verified token in our middleware.

/* 
.
. ... login api
.
*/

// Protected route
app.get('/protected', authenticateToken, (req, res) => {
    res.json({ message: 'This is a protected route', user: req.user });
});

// Start the Express server
app.listen(3000, () => {
    console.log('Server running on https://localhost:3000');
});

With all of that set, we can now try it on our front end…

Client-Side integration (React + TS)

For this, I used some dependencies for styling. It does not matter what you used, the important thing is that we need to create a form that will allow the user to login.

I will not create a step by step in building a form, instead, I will just give the gist of the implementation for the client side.

In my React app, I used shadcn.ui for styling.

// App.tsx
<section className="h-svh flex justify-center items-center">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 p-7 rounded-lg w-96 border border-white">
            <h1 className="text-center font-bold text-xl">Welcome</h1>
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Username</FormLabel>
                  <FormControl>
                    <Input placeholder="Username" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input type="password" placeholder="Password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="mr-4">Login</Button>
            <Link to={"/page"} className='py-2 px-4 rounded-lg bg-white font-medium text-black'>Go to page</Link>
          </form>
        </Form>
      </section>

This is a simple login form with a button that will navigate the user to the other page that will fetch the protected route.

When the user click submit, it will POST request to the /login API in our server. If the response is success, it will navigate to the page.

 // App.tsx
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log(values)
    try {
      const res = await fetch("http://localhost:3000/login", {
        method: 'POST', // Specify the HTTP method
        headers: {
          'Content-Type': 'application/json', // Set content type
        },
        credentials: 'include', // Include cookies in the request
        body: JSON.stringify(values), // Send the form data as JSON
      });
      if (!res.ok) {
        throw new Error(`Response status: ${res.status}`)
      }
      const result = await res.json();
      navigate("/page") // navigate to the page
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  }

In the other page, it will fetch the /protected API to simulate an authenticated session of the user.

const fetchApi = async () => {
        try {
            const res = await fetch("http://localhost:3000/protected", {
                method: 'GET', // Specify the HTTP method
                headers: {
                    'Content-Type': 'application/json', // Set content type
                },
                credentials: 'include', // Include cookies in the request
            });

            if (!res.ok) {
                // Throw error
                throw res
            }
            // Fetch the response
            const result = await res.json();
            setUser(result.user);
            console.log(result)
        } catch (error: any) {
            setError(true)
            setStatus(error.status)
        }
    }

Make sure to put credentials: ‘include’ in the headers to include cookies upon request.

To test, run the app and look into the Application tab of the browser.

// React
npm run dev

// Express
npm start

Under Application tab, go to cookies and you can see the two cookies that the server generated.

Token is good for 15 mins, and after that the user will need to reauthenticate.

With this, you have the potential prevention of XSS (Cross-Site Scripting) and Token Sidejacking into your application. This might not guarantee a full protection but it reduces the risks by setting the cookie based on the OWASP Cheat sheet.

res.cookie('__Secure_Fgp', userFingerprint, {
    httpOnly: true,
    secure: true,  // Send only over HTTPS
    sameSite: 'Strict',  // Prevent cross-site request
    maxAge: 15 * 60 * 1000
});

How about Cross-Site Request Forgery (CSRF) prevention?

For the CSRF, we are going to tweak a few things on our server side using this:

const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

then we’ll add it to the middleware

// MIDDLEWARES ======================================================
// Middleware to parse JSON bodies and Cookies
app.use(express.json());
app.use(cookieParser());
// Middleware to parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: true }));

// Middleware to apply CORS
const corsOptions = {
    origin: 'http://localhost:5173',  // Your React app's URL
    credentials: true  // Allow credentials (cookies, authorization headers)
};
app.use(cors(corsOptions));

// Middleware to apply csrf protection
app.use(csrfProtection);

Create a CSRF Token API

For this we’ll need an API that will generate a CSRF Token and passed it as a cookie to the front end.

app.get('/csrf-token', (req, res) => { // Generate a CSRF token
    res.cookie('XSRF-TOKEN', req.csrfToken(), { // Sends token as a cookie
        httpOnly: false,
        secure: true,
        sameSite: 'Strict'
    });
    res.json({ csrfToken: req.csrfToken() });
});

Take note that this csrfProtection will only apply to the POST, PUT, DELETE requests, anything that will allow user to manipulate sensitive data. So for this, we’ll just secure our login endpoint with CSRF.

// Login route to generate JWT and set fingerprint
app.post('/login', csrfProtection, (req, res) => {
    const { username, password } = req.body;

    // Mock data from the database
    const userId = crypto.randomUUID();
    const user = {
        'id': userId,
        'username': username,
        'password': password,
    }

    /*
    .
    . other code
    .
    */

Generate the CSRF Token in the front end

We need to make a GET request to the /csrf-token API and save the token in our local storage.

// App.tsx
  useEffect(() => {
    const fetchCSRFToken = async () => {
      const res = await fetch('http://localhost:3000/csrf-token', {
        method: 'GET',
        credentials: 'include'  // Send cookies with the request
      });
      const data = await res.json();
      localStorage.setItem('csrfToken', data.csrfToken);
      setCsrfToken(data.csrfToken)
    };

    fetchCSRFToken();
  }, [])

I know, I know… we just talked about the security risk of putting tokens in a local storage. Since there are many ways to mitigate such attacks, common solution would be to refresh this token or just store it in the state variable. For now, we are going to store it in the local storage.

This will run when the component loads. everytime the user visits the App.tsx, it will generate a new CSRF Token.

Now since our /login API is protected with CSRF, we must include the CSRF-Token in the headers upon logging in.

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log(values)
    try {
      const res = await fetch("http://localhost:3000/login", {
        method: 'POST', // Specify the HTTP method
        headers: {
          'Content-Type': 'application/json', // Set content type
          'CSRF-Token': csrfToken // adding the csrf token
        },
        credentials: 'include', // Include cookies in the request
        body: JSON.stringify(values), // Send the form data as JSON
      });
      if (!res.ok) {
        throw new Error(`Response status: ${res.status}`)
      }
      const result = await res.json();
      navigate("/page") // navigate to the page
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  }

Now, when the App.tsx load, we can now see the Cookies in our browser.

The XSRF-TOKEN is our generated token from the server, while the _csrf is the token generated by the csrfProtection = csrf({ cookie: true });

Here is the full code of the application.
https://github.com/Kurt-Chan/session-auth-practice

Conclusion

This might not give a full protection to your app but it reduce the risks of XSS and CSRF attacks in your website. To be honest, I am new to this integrations and still learning more and more about this.

If you have questions, feel free to ask!

THANK YOU FOR READING!

How to add Google ReCAPTCHA in your React website

Kurt De Austria — Sat, 28 Sep 2024 07:54:40 +0000

What is a CAPTCHA?

A CAPTCHA test is basically a way to check if you're a real person or just a bot. CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart," and you've probably seen them all over the web. They're a common tool to stop bots, but they do have their downsides.

Even though CAPTCHAs are there to block bots, they’re automated too. They pop up in certain spots on a website and decide on their own if you pass or fail the test.

What is ReCAPTCHA?

reCAPTCHA is a free service from Google that’s basically an upgrade to the old CAPTCHA tests. It was originally developed by researchers at Carnegie Mellon University, and Google picked it up in 2009.

What makes reCAPTCHA different is that it’s more advanced than regular CAPTCHA. Sometimes, like with traditional CAPTCHA, you might be asked to enter text from images that computers struggle to read. But with reCAPTCHA, the text comes from real-world sources, like street signs, printed books, or old newspapers. So, it’s not just random letters — it’s real information that helps improve things like map accuracy and digital archives.

I recently integrated reCAPTCHA in my side project shrt.lr, a URL shortener, to avoid spams and bots that could potentially mess up with my website. Using React and Express JS we will integrate it on both client and server side.

Create a ReCAPTCHA in Google

Enter your label:

Under Captcha type, select Challenge v2 and use the "I'm not a robot" Checkbox

For domains, type "localhost" with no ports and "http" but if you have a website already, type your domain (e.g yourwebsite.com, yourwebsite.xyz), then click Submit.

You will be given a SITE KEY and SECRET KEY.

Client Side Integration (React TS + Vite app)

Paste the SITE KEY in to your .env file.

VITE_SITE_KEY="YOUR_SITE_KEY"

Install react-google-reCAPTCHA

npm install --save react-google-reCAPTCHA

Once done, you can now use the ReCAPTCHA tag in your app.

import ReCAPTCHA from "react-google-recaptcha"

function App() {
const SITE_KEY = import.meta.env.VITE_SITE_KEY
// For submit button
const [capVerified, setCapVerified] = useState<boolean>(false);

// Get the API to verify the captcha
  const verifyCaptcha = async (token: any) => {
    const res = await post('verifyCap', { capVal: token })
    setCapVerified(res.data.message.success) // toggles enable and disable for submit button
  }

return (
 <>
  {/* INPUT FORM ... */}
   <ReCAPTCHA
    sitekey={`${SITE_KEY}`}
    onChange={(val) => { verifyCaptcha(val) }}
    theme='dark'
    />

   <button
    disabled={!capVerified}
    className="px-6 py-7"
    type="submit">Submit</button>
 </>
 )
}

export default App

onChange() allow us to fetch the token value that ReCAPTCHA returns after a user solved the challenge. The token is a long string that needs to be verified if the user is not a bot.

To check, run the app and open it on your browser

npm run dev

This is what it looks like in my website

It works! but we are not done yet! We need to verify the token value on our server side. To verify the captcha, we will use the Google API for this. We need to insert the SECRET KEY and the TOKEN into this API:
https://www.google.com/recaptcha/api/siteverify?secret=${process.env.SITE_SECRET}&response=${captchaValue}

This API will return a JSON value like this:

{
    "message": {
        "success": true,
        "challenge_ts": "2024-09-28T05:54:49Z",
        "hostname": "localhost"
    }
}

More of this on Google ReCAPTCHA documentation

Now to integrate this on our server side...

Server-Side Integration (Express JS)

Paste the SECRET KEY in to your .env file.

SITE_SECRET="YOUR_SECRET_KEY"

First, install axios

npm install axios

Create a POST API end point

    // Verify reCaptcha
    app.post('/verifyCap', async (req, res) => {
        const captchaValue = req.body.capVal; 
        try {
            const { data, error } = await axios.post(
                `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.SITE_SECRET}&response=${captchaValue}`,
            );
            res.status(200).json({
                "message": data
            }) // Send back the reCAPTCHA verification data
        } catch (error) {
            console.error(error);
            res.status(500).json({
                "error": 'Captcha verification failed'
            });
        }
    });

Done! You have successfully integrated reCAPTCHA in your website!
If you have questions, feel free to ask!

My website: https://kurtchan.com/

THANK YOU FOR READING!

How to setup your own "Git Server"

Kurt De Austria — Tue, 10 Sep 2024 22:14:30 +0000

Recently, I was tasked to setup an on-premise Git server to store a source code repository of one of our developed software. Me as a noob about Git, I know there is no such thing as "Git Server" technically.

I was so confident, Git doesn't have its own server and arrogantly read one of their documentation until I found this, 4.2 Git on the Server - Getting Git on a Server. A demonstration on how to setup Git on a Linux-based server.

According to Git, this can also possible to run on Windows Server. So, I tried it on one of our test Windows Server VM. Found this tutorial on YouTube

The Setup

Windows Server VM:

Install Git (Git UI or Git Bash are optional to include but highly recommended)
Create a folder and share this folder in the network (make sure to share this within your organization).
- Right click and select Properties
- Click share and add the organization
- Set it to Read/Write
- Copy the network shared file path (need it for later)
- Initialize a Git bare repository inside the folder

git init repo <YOUR_REPO_NAME> --bare

Client Laptop (My Laptop):

Install Git (Git UI or Git Bash are optional to include but highly recommended)
Setup a global username and email (if you are using a domain account, Git will automatically fetch your name and email)

git config --global user.name "YOUR_NAME"
git config --global user.email "YOUR_EMAIL"

Allow sharing across users (need to allow this to avoid error in cloning)

git config –-global –-add safe.directory YOUR_REPO_DIRECTORY

Clone the repository

git clone YOUR_REPO_DIRECTORY

Done!

I accessed the repository using Visual Studio Code. Modified, commit and pushed some changes. Preem! It works!

I tried to access this using the GitHub Desktop but unfortunately, GitHub desktop does not support bare repositories, as an alternative I used Git Extensions.

Conclusion

Technically, this is not the "Git Server" that you might expect, a service running on a server and accessing it via IP address on port 3000. Gitea might be the one you're looking for since this is just a network shared folder with a bare git repository.

I currently have no idea if this is good in the long run. This might be good for small set ups with few projects and developers. Since we will not fully utilize this, this setup will be good for small company.

This is probably not scalable, I think? and some complicated aspects like user management are not configured. Setting up a read-only repositories for certain users might be a challenge and this might not be the recommended setup at all.

Thank you for reading!

Writing a Telegram and Email Notifications Script for Zabbix

Kurt De Austria — Thu, 05 Sep 2024 16:57:45 +0000

Monitoring your whole infrastructure is very essential specially in IT infrastructures. I recently learn creating and writing scripts for monitoring like this. I will share you how I make telegram and email notifications script. This script sends an telegram and email notification whenever a problem in the infrastructure occurs.

What is Zabbix

Zabbix is an open source software that monitors numerous parameters of a network and the health and integrity of servers, virtual machines, applications, services, databases, websites, the cloud and more. Zabbix uses a flexible notification mechanism that allows users to configure email-based alerts for virtually any event. This allows a fast reaction to server problems. Zabbix offers excellent reporting and data visualization features based on the stored data. This makes Zabbix ideal for capacity planning.

Telegram Notification Script

cd /usr/lib/zabbix/externalscripts

Create the script for Telegram bot. Set up your telegram bot here.

sudo vim telegram-notif.sh

Paste the script below

#!/bin/bash

# Telegram Bot API Token
BOT_TOKEN="YOUR_BOT_TOKEN"

# Telegram Chat ID
CHAT_ID="YOUR_TELEGRAM_CHAT_ID"

# Message to be sent
MESSAGE="$1"

# Sends the telegram message
curl -s -X POST "https://api.telegram.org/bot$BOT_TOKEN/sendMessage" -d "chat_id=$CHAT_ID&text=$MESSAGE"

Save your script.

:wq

Convert it to an executable file

chmod +x telegram-notif.sh

Email Notification Script

In the same directory, create a python file.

sudo vim email-notif.py

Paste this code. This code requires an app password from your gmail account. Create your app password here.

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
import sys

# Get the alert message from command-line arguments
alert_message = sys.argv[1]

# Email account credentials
gmail_user = 'YOUR_EMAIL_ADDRESS'
gmail_password = 'YOUR_APP_PASSWORD'  # Use your App Password here

# Create the message
msg = MIMEMultipart()
msg['From'] = gmail_user
msg['To'] = 'YOUR_RECIPIENT_EMAIL_ADDRESS'  # Recipient's email address
msg['Subject'] = 'Alert Message Subject'  # Subject of the email
message = alert_message
msg.attach(MIMEText(message, 'plain'))

# Attempt to send the email
try:
    server = smtplib.SMTP_SSL('smtp.gmail.com', 465)
    server.ehlo()
    server.login(gmail_user, gmail_password)
    server.send_message(msg)
    server.close()

    print('Email sent!')
except Exception as e:
    print('Failed to send email:', e)

Don't forget to save and make this an executable file

:wq

chmod +x email-notif.py

This script can be integrated in Zabbix to notify issues that needs to be addressed as quickly as possible.

In some instances, running a python script in a server requires root permissions(sudo). To allow Zabbix run the python script with sudo, you must edit the visudo.

sudo visudo

Find the "User privilege specification" and paste this line of code under it.

zabbix  ALL=(ALL) NOPASSWD: /usr/lib/zabbix/externalscripts/your_script.py

So it will look like this

# User privilege specification
root    ALL=(ALL:ALL) ALL
zabbix  ALL=(ALL) NOPASSWD: /usr/bin/python3
zabbix  ALL=(ALL) NOPASSWD: /usr/lib/zabbix/externalscripts/your_script.py

Thanks for reading!

DEV Community: Kurt De Austria

How I Automated OBS Streaming with JavaScript (And Saved Our Office Hours of Setup Time)

📌 TL;DR

🚨 The Problem We Had

💡 My Eureka Moment: OBS + JavaScript

🔧 How It Works (In Simple Terms)

✨ The Result

📦 Project Structure

📹 About obs-detect Plugin

🚀 Try It Yourself

🧠 What I Learned

Learning and Implementing RAG (Retrieval-Augmented Generation) using Hugging Face and LangChain

What is RAG (Retrieval-Augmented Generation)?

Why do we need to use RAG?

How does it work?

Indexing

Retrieval and Generation

Essential Components for Building RAG AI Applications:

Let’s try to build!

Tech stack

Setup

Step 1: Scrape URL Contents

Step 2: Embed the chunks

Step 3: Store the vectorized chunks

Step 4: Prompting the AI

Conclusion

Exploring HuggingFace and Building an AI Exam Question Generator

What is HuggingFace?

My First Steps with HuggingFace

Finding the Problem to Solve

Introducing Nexar: The AI Exam Question Generator

How You Can Try It

Essential Web Resources for Stunning Front-End Design

Introduction

Conclusion

Preventing CSRF and XSS Attacks with JWT and Fingerprint Cookies in Express

XSS (Cross-Site Scripting)

CSRF (Cross-Site Request Forgery)

Token Sidejacking

1. Storing tokens in the local storage

Example:

2. Long TTL (Time to Live) of Token

3. No Refresh tokens

Authentication

Accessing the protected route

Server-Side (Express JS)

Set up

Create a server.js file

Set up the server

Create a login API

Generate a user fingerprint

Create middleware for authenticating of token

Client-Side integration (React + TS)

How about Cross-Site Request Forgery (CSRF) prevention?

Create a CSRF Token API

Generate the CSRF Token in the front end

Conclusion

THANK YOU FOR READING!

How to add Google ReCAPTCHA in your React website

What is a CAPTCHA?

What is ReCAPTCHA?

Create a ReCAPTCHA in Google

Client Side Integration (React TS + Vite app)

Server-Side Integration (Express JS)

THANK YOU FOR READING!

How to setup your own "Git Server"

The Setup

Windows Server VM:

Client Laptop (My Laptop):

Conclusion

Writing a Telegram and Email Notifications Script for Zabbix

What is Zabbix

Telegram Notification Script

Email Notification Script

📹 About `obs-detect` Plugin