सुरक्षित, कम विलंबता फ़िल्टरिंग के लिए वर्सेल एज फ़ंक्शंस और अपस्टैश रेडिस के साथ डेटा लीक को रोकें

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

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

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

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

विशेषताएं

<पी> ऐप रिमोट एपीआई से मौजूदा शब्दों के साथ रेडिस डेटाबेस के लिए अपस्टैश को अपडेट करने के लिए वर्सेल के क्रॉन फीचर का उपयोग करेगा।

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

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

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

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

<पी> कम विलंबता और उपयोग में आसानी के कारण हम Redis® के लिए अपस्टैश का उपयोग डेटा भंडारण के रूप में करेंगे।

<पी> दोनों सेवाएँ निःशुल्क स्तरों और ऑन-डिमांड मूल्य निर्धारण के साथ आती हैं।

आवश्यकताएँ

<पी> हमें सेवाओं के लिए खातों की आवश्यकता है:

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

कार्यान्वयन

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

<पी>

सुरक्षित, कम विलंबता फ़िल्टरिंग के लिए वर्सेल एज फ़ंक्शंस और अपस्टैश रेडिस के साथ डेटा लीक को रोकें

चित्र 1:कोडस्पेस प्रारंभ करें <पी> सबसे पहले, हमें एक नया Next.js प्रोजेक्ट बनाना होगा और निम्नलिखित कमांड के साथ अपस्टैश रेडिस क्लाइंट इंस्टॉल करना होगा:

$ 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();
}

<पी> हम किनारे पर चलने के लिए फ़ंक्शन को कॉन्फ़िगर करके प्रारंभ करते हैं। यह यहां आवश्यक नहीं है क्योंकि यह फ़ंक्शन पृष्ठभूमि में चलेगा, लेकिन वर्सेल एज फ़ंक्शंस क्लाउडफ़ेयर वर्कर्स द्वारा संचालित हैं, जो हमें फ़ेच विधि का उपयोग करने की अनुमति देता है, जिसे Node.js मूल रूप से समर्थन नहीं करता है।

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

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

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

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

<पी> फ़ाइल vercel.json :

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

<पी> यह कॉन्फ़िगरेशन वर्सेल को प्रतिदिन 10:00 यूटीसी पर रिफ्रेश-लिस्ट फ़ंक्शन निष्पादित करने का कारण बनेगा।

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

फ़िल्टर उपयोगिता को कार्यान्वित करना

<पी> अगली सुविधा एक उपयोगिता फ़ंक्शन है जो किसी पाठ में शब्दों को तब छिपा देगी जब वे हमारे डेटाबेस में शब्दों से मेल खाते हों। 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;
}

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

<पी> चूँकि हमें स्ट्रिंग्स की एक सरणी मिलती है, हम बस उस पर लूप कर सकते हैं और एक प्रतिस्थापन फ़ंक्शन को कॉल कर सकते हैं जो टेक्स्ट में प्रत्येक खराब शब्द को "[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 } };
}

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

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

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

पहला एपीआई रूट लागू करना

<पी> पहला एपीआई रूट होम पेज की तरह काम करता है; यह 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 फ़ंक्शन की तरह, हम एक स्थिर टेक्स्ट का उपयोग करते हैं।

दूसरा एपीआई रूट लागू करना

<पी> यह मार्ग अनुरोध के माध्यम से पाठ स्वीकार करता है और फ़िल्टर किया गया संस्करण लौटाता है। 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" },
 });
}

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

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

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

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

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

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

तैनाती

<पी> पर्यावरण चर और वर्सेल प्रोजेक्ट के लिए क्रेडेंशियल प्राप्त करने के लिए हमें एक अपस्टैश रेडिस डेटाबेस बनाने की आवश्यकता है।

रेडिस डेटाबेस बनाना

<पी> हम "डेटाबेस बनाएं" बटन पर क्लिक करके अपस्टैश कंसोल में एक नया रेडिस डेटाबेस बना सकते हैं। चित्र 2 कॉन्फ़िगरेशन दिखाता है। इस उदाहरण के लिए, एक क्षेत्रीय डेटाबेस पर्याप्त है, लेकिन यदि आपके पास विश्व स्तर पर वितरित उपयोगकर्ता हैं और विलंबता कम रखना चाहते हैं, तो आप वैश्विक प्रकार भी चुन सकते हैं।

<पी>

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

<पी>

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

एक वर्सेल प्रोजेक्ट बनाना

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

<पी> हम डिफ़ॉल्ट कॉन्फ़िगरेशन रख सकते हैं और ऊपर से अपस्टैश रेडिस क्रेडेंशियल्स के साथ अपने पर्यावरण चर जोड़ सकते हैं। चित्र 4 संदर्भ के लिए वर्सेल का निर्माण यूआई दिखाता है।

<पी>

<पी> चित्र 4:वर्सेल प्रोजेक्ट निर्माण <पी> पर्यावरण चर के नाम UPSTASH_REDIS_URL हैं और UPSTASH_REDIS_TOKEN . हम उन्हें बनाने के लिए पिछले चरण के मानों का उपयोग करते हैं।

<पी> "डिप्लॉय" पर क्लिक करने के बाद वर्सेल हमारे GitHub रिपॉजिटरी से कोड डाउनलोड और तैनात करेगा।

ऐप का परीक्षण

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

<पी> यहां हम अपना /api/refresh-list देखते हैं क्लिक करने के लिए "रन" बटन के साथ कार्य करें।

<पी> जब फ़ंक्शन समाप्त हो जाता है, तो हम "प्रोजेक्ट" टैब पर जाते हैं और "डोमेन" के अंतर्गत किसी एक यूआरएल पर क्लिक करते हैं। इससे ब्राउज़र में फ़िल्टर किए गए टेक्स्ट वाली वेबसाइट खुल जाएगी; इसे चित्र 5 जैसा दिखना चाहिए।

<पी>

चित्र 5:फ़िल्टर की गई वेबसाइट <पी> यदि हम /api/filtered-data जोड़ते हैं हमारे यूआरएल पर, हम देख सकते हैं कि यह एपीआई प्रतिक्रियाओं के लिए भी काम करता है। उन्हें निम्नलिखित उदाहरण की तरह दिखना चाहिए:

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

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

$ 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]."
}

आगे क्या है

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

<पी> क्रॉन जॉब हमारे रिफ्रेश फ़ंक्शन को ट्रिगर करता है, लेकिन यह अभी भी एक नियमित एपीआई फ़ंक्शन है, इसलिए हम इसे अपनी इच्छानुसार कॉल कर सकते हैं।

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

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

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