Vercel Edge Functions और Upstash Redis के साथ डेटा लीक रोकें: सुरक्षित, लो-लेटेंसी फ़िल्टरिंग

डेटा लीक इंटरनेट पर एक प्रमुख मुद्दा है। Statista के अनुसार, अकेले 2022 में 400 मिलियन से अधिक लोग डेटा लीक से प्रभावित थे। कोई भी अपना डेटा पूरे इंटरनेट पर लीक नहीं करना चाहता, इसलिए कई उद्योगों में यूजर गोपनीयता का सम्मान करने वाले सुरक्षित एप्लिकेशन बनाना महत्वपूर्ण है।

लीक से लड़ने का एक तरीका अन्य सेवाओं या यूजर्स को डिलीवर करने से पहले समस्याग्रस्त डेटा को फ़िल्टर करना है। इस विधि को अप-टू-डेट फ़िल्टर की आवश्यकता होती है ताकि यह सुनिश्चित हो सके कि डेटा फिसले नहीं और कम विलंबता वाले इंफ्रास्ट्रक्चर की आवश्यकता होती है, ताकि फ़िल्टरिंग के प्रदर्शन प्रभाव को यथासंभव छोटा रखा जा सके।

Upstash for Redis® और Vercel Edge Functions एक शक्तिशाली टीम बनाते हैं जो दोनों आवश्यकताओं को पूरा करते हुए इस समस्या से निपट सकते हैं। ये दोनों कम-विलंबता सर्वरलेस समाधान हमारे यूजर्स के करीब डेप्लॉय किए जा सकते हैं। Vercel के नए क्रॉन फीचर के साथ, हम यह सुनिश्चित कर सकते हैं कि फ़िल्टर डेटा नियमित रूप से अपडेट होता रहे।

यह दिखाने के लिए कि ऐसा फ़िल्टर कैसे काम कर सकता है, हम एक फ्रंटएंड और बैकएंड बनाएंगे जो अपशब्दों को फ़िल्टर करने के लिए इस सर्वरलेस एज तकनीक का लाभ उठाता है।

विशेषताएं

ऐप Vercel के क्रॉन फीचर का उपयोग करके एक रिमोट API से वर्तमान शब्दों के साथ Upstash for Redis डेटाबेस को अपडेट करेगा।

हमारे पास डेटा प्राप्त करने के तीन साधन होंगे:

1. फ़िल्टर किए गए टेक्स्ट के साथ एक वेबसाइट वापस करना।
2. डेटा स्टोर से फ़िल्टर किए गए टेक्स्ट के साथ JSON वापस करना।
3. टेक्स्ट स्वीकार करना और फ़िल्टर किए गए टेक्स्ट के साथ JSON वापस करना।

प्रौद्योगिकी

हम Next.js के साथ ऐप बनाएंगे और इसे Vercel पर डेप्लॉय करेंगे; इस तरह, एज फंक्शन का उपयोग करते समय हमारे पास एक सहज सर्वरलेस विकास अनुभव होगा।

हम डेटा स्टोरेज के लिए Upstash for Redis® का उपयोग करेंगे क्योंकि इसकी कम विलंबता और उपयोग में आसानी है।

दोनों सेवाएं फ्री टियर के साथ आती हैं और ऑन-डिमांड मूल्य निर्धारण है।

पूर्वापेक्षाएँ

हमें सेवाओं के लिए अकाउंट चाहिए:

• GitHub हमारे कोड को अपलोड करने के लिए ताकि Vercel इसे डाउनलोड और डेप्लॉय कर सके
• होम पेज और एज फंक्शन के साथ हमारे एप्लिकेशन को होस्ट करने के लिए Vercel
• उन शब्दों की सूची को संग्रहीत करने के लिए Upstash जिन्हें हम फ़िल्टर करना चाहते हैं

कार्यान्वयन

शुरू करने के लिए, हम एक नया GitHub रिपॉजिटरी बनाते हैं और सुनिश्चित करते हैं। हम "Add a README file" चेक करते हैं, ताकि यह खाली न हो। चूंकि रिपॉजिटरी खाली नहीं है, GitHub हमें इसके लिए एक Codespace शुरू करने की अनुमति देता है, जो Node.js और Git-to-GitHub कनेक्शन के साथ प्रीकॉन्फिगर किया हुआ आता है।

चित्र 1: Codespace शुरू करें

सबसे पहले, हमें एक नया Next.js प्रोजेक्ट बनाने और निम्न कमांड के साथ Upstash Redis क्लाइंट इंस्टॉल करने की आवश्यकता है:

$ npx create-next-app@latest --typescript
$ npm i @upstash/redis

रिफ्रेश फंक्शन लागू करना

हम जो पहली सुविधा लागू करेंगे वह वह फंक्शन है जो हमारी खराब शब्दों की सूची को रिफ्रेश करेगा। ऐसा करने के लिए, pages/api/refresh-list.ts पर एक नई फाइल बनाएं और निम्न सामग्री के साथ:

फाइल pages/api/refresh-list.ts:

import { Redis } from "@upstash/redis";
export const config = { runtime: "edge" };
const redisClient = new Redis({
  url: process.env.UPSTASH_REDIS_URL,
  token: process.env.UPSTASH_REDIS_TOKEN,
});
export default async function handler() {
  const wordResponse = await fetch(
    "https://raw.githubusercontent.com/kay-is/List-of-Dirty-Naughty-Obscene-and-Otherwise-Bad-Words/master/en",
  );
  const words = await wordResponse.text();
  const redisCommands = redisClient.pipeline();
  words
    .trim()
    .split("\n")
    .forEach((word) => redisCommands.sadd("words", word));
  await redisCommands.exec();
}

हम फंक्शन को एज पर चलाने के लिए कॉन्फिगर करके शुरू करते हैं। यह यहां आवश्यक नहीं है क्योंकि यह फंक्शन बैकग्राउंड में चलेगा, लेकिन Vercel Edge Functions Cloudflare Workers द्वारा संचालित हैं, जो हमें fetch मेथड का उपयोग करने की अनुमति देता है, जिसे Node.js मूल रूप से सपोर्ट नहीं करता।

हैंडलर खराब शब्दों वाली एक टेक्स्ट फाइल को Upstash Redis में लोड करेगा। पाइपलाइन फीचर यह सुनिश्चित करता है कि हम सभी Redis कमांड के साथ केवल एक अनुरोध भेजें।

हम शब्दों को संग्रहीत करने के लिए एक सेट का उपयोग करते हैं, ताकि हमें डुप्लिकेट न मिलें। यह हमें बाद में एक कमांड के साथ सभी शब्दों को स्ट्रिंग की सरणी के रूप में लोड करने की अनुमति भी देता है।

यदि हम व्यक्तिगत डेटा फ़िल्टर करना चाहते थे, तो हम अपने यूजर्स के ईमेल, फोन नंबर, नाम और पते को फ़िल्टर के आधार के रूप में प्राप्त करने के लिए एक अकाउंट डेटाबेस का उपयोग कर सकते थे।

Vercel को यह बताने के लिए कि हम इस फंक्शन को एक क्रॉन फंक्शन चाहते हैं, हमें प्रोजेक्ट रूट में एक vercel.json फाइल बनाने की आवश्यकता है जिसमें निम्न सामग्री हो:

फाइल vercel.json:

{
  "crons": [
    {
      "path": "/api/refresh-list",
      "schedule": "0 10 * * *"
    }
  ]
}

यह कॉन्फिग Vercel को रिफ्रेश-लिस्ट फंक्शन को रोजाना 10:00 UTC पर निष्पादित करने का कारण बनेगा।

फ्री Vercel अकाउंट केवल प्रति दिन एक स्वचालित निष्पादन का समर्थन करते हैं। हमारे उदाहरण के लिए, यह पर्याप्त है, लेकिन यदि हमारे पास डेटा है जो अधिक बार बदलता है, तो हमें अपडेट दर बढ़ानी चाहिए।

फ़िल्टर यूटिलिटी लागू करना

अगली सुविधा एक यूटिलिटी फंक्शन है जो टेक्स्ट में शब्दों को मास्क करेगा जब वे हमारे डेटाबेस में शब्दों से मेल खाते हैं। utils/word-filter.ts पर एक नई फाइल बनाएं और निम्न कोड जोड़ें।

फाइल utils/word-filter.ts:

import { Redis } from "@upstash/redis";
const redisClient = new Redis({
  url: process.env.UPSTASH_REDIS_URL,
  token: process.env.UPSTASH_REDIS_TOKEN,
});
export async function filter(text: string) {
  const filteredWords = await redisClient.smembers("words");
  let maskedText = text;
  for (let word of filteredWords)
    maskedText = maskedText.replaceAll(new RegExp(word, "gi"), "[REDACTED]");
  return maskedText;
}

फिर से, फंक्शन Upstash Redis क्लाइंट का उपयोग करता है, लेकिन इस बार यह पहले से सेव किए गए डेटा को लोड करता है।

चूंकि हमें स्ट्रिंग की एक सरणी मिलती है, हम बस उस पर लूप कर सकते हैं और एक रिप्लेसमेंट फंक्शन कॉल कर सकते हैं जो टेक्स्ट में हर खराब शब्द को "[REDACTED]" से बदल देता है।

यह फंक्शन इस बात की परवाह नहीं करता कि यह किस प्रकार के शब्दों को फ़िल्टर करता है। इस मामले में, शब्द "नॉट सेफ फॉर वर्क" हैं, लेकिन फ़िल्टर प्रक्रिया केवल हमारे द्वारा पहले संग्रहीत डेटा पर निर्भर करती है।

होम पेज लागू करना

फ़िल्टर को एक्शन में देखने के लिए, आइए pages/index.ts की सामग्री को निम्न के साथ बदलें:

फाइल pages/index.ts:

import Head from "next/head";
import { filter } from "@/utils/word-filter";
export const config = { runtime: "experimental-edge" };
interface HomeProps {
  maskedText: string;
}
export default function Home(props: HomeProps) {
  return (
    <>
      <Head>
        <title>Text with Filtered Words</title>
      </Head>
      <div>
        <h1>Text with Filtered Words</h1>
        <p>{props.maskedText}</p>
      </div>
    </>
  );
}
export async function getServerSideProps(): Promise<{ props: HomeProps }> {
  const maskedText = await filter(
    "He slipped and fell on his butt. Well, that wasn't very sexy."
  );
  return { props: { maskedText } };
}

कॉन्फिग यह सुनिश्चित करता है कि सर्वर-साइड रेंडरिंग सहित सब कुछ एज पर निष्पादित हो। यह Vercel सुविधा अभी भी प्रयोगात्मक है।

दिलचस्प हिस्सा getServerSideProps फंक्शन है, जो पहले से एक स्थिर टेक्स्ट पर हमारे filter फंक्शन का उपयोग करता है। यह केवल सर्वर पर कॉल किया जाता है, इसलिए अनफ़िल्टर्ड डेटा कभी भी क्लाइंट तक नहीं पहुंचता।

एक वास्तविक एप्लिकेशन में, यह टेक्स्ट व्यक्तिगत डेटा वाले डेटाबेस से आ सकता है जिसे प्रदर्शित करने से पहले साफ करने की आवश्यकता होती है।

पहला API रूट लागू करना

पहला API रूट होम पेज की तरह काम करता है; यह JSON वापस करता है और कोई HTML नहीं। pages/api/filtered-data.ts पर एक फाइल बनाएं और यह कोड डालें:

फाइल pages/api/filtered-data.ts:

import { filter } from "@/utils/word-filter";
export const config = { runtime: "edge" };
export default async function handler() {
  const maskedText = await filter(
    "He slipped and fell on his butt. Well, that wasn't very sexy.",
  );
  return new Response(JSON.stringify({ text: maskedText }), {
    status: 200,
    headers: { "content-type": "application/json" },
  });
}

फिर से, रनटाइम एज है, और getServerSideProps फंक्शन की तरह ही, हम एक स्थिर टेक्स्ट का उपयोग करते हैं।

दूसरा API रूट लागू करना

यह रूट अनुरोध के माध्यम से टेक्स्ट स्वीकार करता है और फ़िल्टर किया गया संस्करण वापस करता है। pages/api/filter.ts पर एक नई फाइल बनाएं और निम्न कोड जोड़ें:

फाइल pages/api/filter.ts:

import type { NextApiRequest } from "next";
import { filter } from "@/utils/word-filter";
export const config = { runtime: "edge" };
export default async function handler(request: NextApiRequest) {
  const { text } = await new Response(request.body).json();
  const maskedText = await filter(text);
  return new Response(JSON.stringify({ text: maskedText }), {
    status: 200,
    headers: { "content-type": "application/json" },
  });
}

इस बार, हमें उस टेक्स्ट तक पहुंचने के लिए बॉडी को पार्स करना होगा जिसे हम फ़िल्टर करना चाहते हैं। Vercel के एज फंक्शन में, body एक ReadableStream है; यदि हम इसे Response में बदलते हैं, तो हम डेटा निकालने के लिए नेटिव JSON पार्सर का उपयोग कर सकते हैं।

अनुरोध से डेटा प्राप्त करने के बाद, सब कुछ पहले की तरह काम करता है।

कोड परिवर्तन पुश करना

अब जब सब कुछ लागू हो गया है, तो हमें इन कमांड के साथ कोड को अपने GitHub रिपॉजिटरी में पुश करने की आवश्यकता है:

$ git add -A
$ git commit -m "Init"
$ git push

इसके बाद, कोड Vercel के लिए ऑनलाइन उपलब्ध है ताकि वह इसे डाउनलोड और डेप्लॉय कर सके।

डेप्लॉयमेंट

हमें एनवायरनमेंट वेरिएबल के लिए क्रेडेंशियल प्राप्त करने के लिए एक Upstash Redis डेटाबेस और एक Vercel प्रोजेक्ट बनाने की आवश्यकता है।

Redis डेटाबेस बनाना

हम Upstash Console में "Create database" बटन पर क्लिक करके एक नया Redis डेटाबेस बना सकते हैं। चित्र 2 कॉन्फिगरेशन दिखाता है। इस उदाहरण के लिए, एक क्षेत्रीय डेटाबेस पर्याप्त है, लेकिन यदि आपके पास वैश्विक रूप से वितरित यूजर्स हैं और विलंबता कम रखना चाहते हैं, तो आप ग्लोबल प्रकार भी चुन सकते हैं।

चित्र 2: एक नया डेटाबेस बनाएं

बनाने के बाद, हम अपने एनवायरनमेंट वेरिएबल के लिए आवश्यक URL और टोकन REST API श्रेणी के तहत पा सकते हैं; यह चित्र 3 जैसा दिखता है।

चित्र 3: डेटाबेस क्रेडेंशियल

Vercel प्रोजेक्ट बनाना

एक नया Vercel प्रोजेक्ट बनाने के लिए, ब्राउज़र में Vercel डैशबोर्ड खोलें, और केंद्र में "Create a New Project" पर क्लिक करें। अपने GitHub अकाउंट को Vercel से जोड़ने के बाद, आप आयात करने के लिए एक रिपॉजिटरी चुन सकते हैं।

हम डिफ़ॉल्ट कॉन्फिगरेशन रख सकते हैं और ऊपर से Upstash Redis क्रेडेंशियल के साथ अपने एनवायरनमेंट वेरिएबल जोड़ सकते हैं। चित्र 4 संदर्भ के लिए Vercel के निर्माण UI को दिखाता है।

चित्र 4: Vercel प्रोजेक्ट निर्माण

एनवायरनमेंट वेरिएबल के नाम UPSTASH_REDIS_URL और UPSTASH_REDIS_TOKEN हैं। हम पिछले चरण के मानों का उपयोग करके उन्हें बनाते हैं।

"Deploy" पर क्लिक करने के बाद Vercel हमारे GitHub रिपॉजिटरी से कोड डाउनलोड और डेप्लॉय करेगा।

ऐप का परीक्षण

डेप्लॉयमेंट के बाद, ऐप अभी भी अनफ़िल्टर्ड शब्द दिखाता रहेगा क्योंकि क्रॉन जॉब अभी तक नहीं चला है। लेकिन हम पहली निष्पादन मैन्युअल रूप से कर सकते हैं। "Continue to Dashboard" बटन पर क्लिक करें और "Cron Jobs" टैब चुनें।

यहां हम अपने /api/refresh-list फंक्शन को "Run" बटन के साथ देखते हैं जिस पर क्लिक किया जा सकता है।

जब फंक्शन समाप्त हो जाता है, तो हम "Project" टैब पर नेविगेट करते हैं और "Domain" के तहत URL में से किसी एक पर क्लिक करते हैं। यह ब्राउज़र में फ़िल्टर किए गए टेक्स्ट के साथ वेबसाइट खोलेगा; यह चित्र 5 जैसा दिखना चाहिए।

चित्र 5: फ़िल्टर की गई वेबसाइट

यदि हम अपने URL में /api/filtered-data जोड़ते हैं, तो हम देख सकते हैं कि यह API प्रतिक्रियाओं के लिए भी काम करता है। उन्हें निम्न उदाहरण जैसा दिखना चाहिए:

{
  "text": "He slipped and fell on his [REDACTED]. Well, that wasn't very [REDACTED]y."
}

अंत में, यदि हम /api/filter एंडपॉइंट पर cURL के माध्यम से एक अनुरोध भेजते हैं, तो हम अपना कस्टम टेक्स्ट फ़िल्टर्ड प्राप्त करते हैं। <PROJECT> को अपने Vercel प्रोजेक्ट से बदलना सुनिश्चित करें।

$ curl -X POST https://<PROJECT>.vercel.app/api/filter \
  -H "Content-Type: application/json" \
  -d '{"text":"He fell on his butt."}'

प्रतिक्रिया:

{
  "text": "He fell on his [REDACTED]."
}

आगे क्या

इस ट्यूटोरियल के बाद, आप खुद से पूछ सकते हैं कि क्या होता है यदि डेटा अपडेट हो जाता है, लेकिन क्रॉन जॉब ने अभी तक डेटाबेस को अपडेट नहीं किया है। अच्छी नजर!

एक क्रॉन जॉब हमारे रिफ्रेश फंक्शन को ट्रिगर करता है, लेकिन यह अभी भी एक नियमित API फंक्शन है, इसलिए हम इसे जैसे चाहें कॉल कर सकते हैं।

एक वास्तविक डेटा फ़िल्टर के मामले में, हम डेटा परिवर्तन के जवाब में फंक्शन को ट्रिगर करना चाह सकते हैं, लेकिन कार्यान्वयन विवरण उस डेटा स्टोरेज पर अत्यधिक निर्भर करते हैं जिसे हम अपने फ़िल्टर के आधार के रूप में उपयोग करते हैं। इसलिए, निर्माण करते समय इसे ध्यान में रखें!

अतिरिक्त संसाधन

आप GitHub पर पूरा प्रोजेक्ट पा सकते हैं।