TL;DR
- समस्या: बेस६४ डिकोडिंग, जेडब्ल्यूटी निरीक्षण और लॉग विश्लेषण के लिए ऑनलाइन उपकरण अक्सर संवेदनशील टेक्स्ट, एपीआई क्रेडेंशियल और आंतरिक लॉग को तीसरे पक्ष के सर्वर पर भेजते हैं।
- समाधान: एंगुलर १९ सिग्नल्स, मूल वेब क्रिप्टोग्राफी एपीआई और समर्पित वेब वर्कर थ्रेड्स का उपयोग करके डेटा को पूरी तरह से क्लाइंट-साइड पर प्रोसेस करना।
- परिणाम: २८ उत्पादन-स्तरीय डेवलपर उपकरण जो ० बाइट नेटवर्क डेटा ट्रांसफर, एक मिलीसेकंड से कम स्थानीय निष्पादन समय और पूर्ण डेटा अलगाव के साथ चलते हैं।
वेब पर उपलब्ध डेवलपर टूल्स में गोपनीयता की एक आम समस्या होती है: संवेदनशील टेक्स्ट, जेडब्ल्यूटी टोकन या आंतरिक लॉग फाइलों को लोकप्रिय वेबसाइटों पर पेस्ट करने से आपका डेटा दूरस्थ लॉगिंग सिस्टम और एनालिटिक्स सर्वर पर अपलोड हो जाता है।
वेब यूटिल्स को गोपनीयता-प्रथम विकल्प के रूप में डिज़ाइन किया गया है। यह बिना किसी बैकएंड सर्वर के १००% क्लाइंट-साइड काम करने वाला एप्लिकेशन सेट है, जो आपके ब्राउज़र टैब के भीतर ही हर डेटा रूपांतरण, हैश गणना और लॉग विश्लेषण को निष्पादित करता है।
- गिटहब रिपॉजिटरी: github.com/breejesh/web-utils
- लाइव डेमो: utils.breejeshrathod.com
आर्किटेक्चर के चार मुख्य स्तंभ
वेब यूटिल्स उच्च प्रदर्शन और पूर्ण गोपनीयता सुनिश्चित करने के लिए चार डिज़ाइन निर्णयों पर निर्भर करता है:
१. १००% क्लाइंट-साइड डेटा अलगाव
इस सूट का हर टूल स्थानीय स्तर पर चलता है। इनपुट में दर्ज किया गया, क्लिपबोर्ड से पेस्ट किया गया या डिस्क से लोड किया गया डेटा ब्राउज़र जावास्क्रिप्ट, वेब क्रिप्टोग्राफी एपीआई और वेब वर्कर्स का उपयोग करके प्रोसेस किया जाता है। टूल डेटा के लिए नेटवर्क टेलीमेट्री पूरी तरह से शून्य है।
२. एंगुलर १९ स्टैंडअलोन सिग्नल्स आर्किटेक्चर
आधुनिक एंगुलर १९ स्टैंडअलोन घटकों के साथ निर्मित, स्थिति अपडेट बारीक signal() और computed() प्रिमिटिव द्वारा संचालित होते हैं। यह टेक्स्ट तुलना या रेगुलर एक्सप्रेशन मिलान के दौरान अनावश्यक री-रेंडरिंग को रोकता है।
३. एसईओ और त्वरित लोड के लिए स्टेटिक एसएसआर प्री-रेंडरिंग
प्रत्येक टूल का अपना समर्पित लिंक है (जैसे /tools/jwt-debugger या /tools/evtx-viewer)। @angular/ssr के माध्यम से स्टेटिक प्री-रेंडरिंग निर्माण के समय ही एचटीएमएल तैयार कर देती है, जिससे उपयोगकर्ताओं को तुरंत पेज लोड और पूर्ण खोज इंजन इंडेक्सिंग मिलती है।
४. शून्य बैकएंड इंफ्रास्ट्रक्चर और शून्य विज्ञापन ट्रैकिंग
कोई डेटाबेस कनेक्शन नहीं है, कोई एपीआई प्रॉक्सी नहीं है, कोई लॉगिन आवश्यकता नहीं है और कोई विज्ञापन स्क्रिप्ट नहीं है। यह एप्लिकेशन पूरी तरह से ऑफ़लाइन काम करने योग्य स्टेटिक पैकेज के रूप में कार्य करता है।
इंटरफेस और स्क्रीन प्रदर्शन
वेब यूटिल्स के मुख्य इंटरफेस को देखने के लिए इसके प्राथमिक स्क्रीन का अवलोकन करें।
१. श्रेणी डैशबोर्ड और खोज केंद्र
मुख्य लैंडिंग पृष्ठ टूल्स को ८ अलग-अलग श्रेणियों में व्यवस्थित करता है, साथ ही लाइव खोज और डार्क या लाइट थीम बदलने की सुविधा देता है।
२. बेस६४ एनकोडर और डिकोडर
कस्टम कैरेक्टर सेट एनकोडिंग, यूआरएल-सुरक्षित बेस६४ रूपांतरण, पंक्ति-दर-पंक्ति प्रसंस्करण और सीधे फाइल डाउनलोड विकल्पों का समर्थन करता है।
३. रेगुलर एक्सप्रेशन प्लेग्राउंड और टेस्टर्स
वास्तविक समय में मिलान हाइलाइटिंग, कैप्चर समूह विश्लेषण और प्रतिस्थापन पूर्वावलोकन के साथ इंटरैक्टिव रेगुलर एक्सप्रेशन मूल्यांकन।
तकनीकी कार्यप्रणाली: क्लाइंट-साइड सुरक्षा और वेब वर्कर्स
ब्राउज़र टैब के भीतर जटिल सुरक्षा और लॉग प्रोसेसिंग कार्यों को निष्पादित करने के लिए दो मुख्य इंजीनियरिंग आवश्यकताएं होती हैं: तीसरे पक्ष के सर्वर पर निर्भरता समाप्त करना और मुख्य यूआई थ्रेड को जमने से बचाना।
१. वेब क्रिप्टोग्राफी एपीआई के माध्यम से उच्च क्षमता हैशिंग
भारी जावास्क्रिप्ट क्रिप्टो लाइब्रेरीज़ को इम्पॉर्ट करने के बजाय, वेब यूटिल्स एसएचए-१, एसएचए-२५६ और एसएचए-५१२ गणनाओं के लिए ब्राउज़र के हार्डवेयर-त्वरित window.crypto.subtle इंटरफेस का उपयोग करता है।
export async function computeHash(
text: string,
algorithm: 'SHA-1' | 'SHA-256' | 'SHA-512'
): Promise<{ hex: string; durationMs: number }> {
const startTime = performance.now();
const encoder = new TextEncoder();
const data = encoder.encode(text);
const hashBuffer = await crypto.subtle.digest(algorithm, data);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
const durationMs = performance.now() - startTime;
return { hex, durationMs };
}
२. बाइनरी लॉग विश्लेषण के लिए वेब वर्कर
विंडोज इवेंट लॉग की बाइनरी फाइलों (.evtx) का विश्लेषण करने के लिए इवेंट रिकॉर्ड और स्ट्रिंग टेबल को पढ़ना पड़ता है। ५० एमबी की फाइल के लिए मुख्य थ्रेड पर ऐसा करने से ब्राउज़र जम जाएगा। वेब यूटिल्स ArrayBuffer ट्रांसफर क्षमता का उपयोग करके फाइल एनालिसिस को एक समर्पित वेब वर्कर को सौंपता है:
// evtx.worker.ts
import { EvtxParser } from './evtx-parser';
self.addEventListener('message', async (event: MessageEvent<{ fileBuffer: ArrayBuffer }>) => {
const { fileBuffer } = event.data;
const parser = new EvtxParser(fileBuffer);
const records = [];
while (parser.hasNext()) {
records.push(parser.nextRecord());
if (records.length % 500 === 0) {
self.postMessage({ type: 'PROGRESS', parsedCount: records.length });
}
}
self.postMessage({ type: 'COMPLETE', records }, [fileBuffer]);
});
वेब वर्कर बैच साइज बनाम यूआई प्रतिक्रियाशीलता
पृष्ठभूमि थ्रेड्स को कार्य सौंपते समय बैच आकारों को सही ढंग से सेट करना आवश्यक है ताकि मुख्य थ्रेड पर अत्यधिक संदेश न पहुँचें:
| वर्कर बैच आकार (रिकॉर्ड्स) | मुख्य थ्रेड विलंबता (p99) | पोस्ट-मैसेज ओवरहेड | कुल विश्लेषण समय (५० एमबी EVTX) | यूआई फ्रेम ड्रॉप्स |
|---|---|---|---|---|
१० |
४२ ms |
१८.४ ms |
३.२४ s |
अत्यधिक |
१०० |
१२ ms |
४.१ ms |
२.६१ s |
न्यूनतम |
५०० (सर्वोत्तम) |
२ ms |
०.८ ms |
२.१५ s |
० (६० FPS सुचारू) |
२५०० |
१ ms |
०.२ ms |
२.०८ s |
० (अंतराल पर प्रगति अपडेट) |
१०००० |
१ ms |
०.१ ms |
२.०४ s |
प्रगति बार में अचानक उछाल |
आर्किटेक्चर तुलना
ब्राउज़र-स्थानीय प्रसंस्करण और पारंपरिक सर्वर-आधारित टूल्स की तुलना:
| आर्किटेक्चर मीट्रिक | क्लाइंट-साइड वेब यूटिल्स | सर्वर-आधारित एपीआई यूटिलिटी |
|---|---|---|
| नेटवर्क डेटा ट्रांसफर | ० बाइट्स |
१००% इनपुट डेटा ट्रांसमिट |
| डेटा लीक जोखिम | शून्य जोखिम (कोई डीबी या लॉग नहीं) |
मध्यम से उच्च (सर्वर लॉग्स) |
| प्रसंस्करण विलंबता | < १ ms (लोकल जेएस / वेबक्रिप्टो) |
५० ms - ४०० ms (नेटवर्क + सर्वर) |
| ऑफ़लाइन उपलब्धता | १००% (पीडब्ल्यूए / सेव्ड बंडल) |
०% (इंटरनेट आवश्यक) |
| निष्पादन लागत | ₹०.०० (क्लाइंट हार्डवेयर) |
क्लाउड सर्वर और इंफ्रास्ट्रक्चर लागत |
उत्पादन की सीमाएँ और विशेष स्थितियाँ
१. फाइल एनालिसिस के लिए वी८ हीप सीमाएँ: अत्यधिक बड़ी फाइलें (जैसे २५० एमबी से अधिक की .evtx फाइलें) वी८ मेमोरी सीमा तक पहुँच सकती हैं यदि उन्हें पूरी तरह से डीओएम में रखा जाए। वेब यूटिल्स इस समस्या को हल करने के लिए पृष्ठों में रिकॉर्ड प्रदर्शित करता है।
२. वेब क्रिप्टो के लिए सुरक्षित संदर्भ की आवश्यकता: वेब क्रिप्टोग्राफी एपीआई (crypto.subtle) ब्राउज़र द्वारा एचटीटीपीएस या localhost तक ही सीमित है। गैर-सुरक्षित एचटीटीपी पर यह वेब-असेंबली फ़ंक्शन का उपयोग करता है।
३. प्रमाणपत्र निरीक्षकों पर CORS सीमाएँ: ब्राउज़र सुरक्षा प्रतिबंधों के कारण एसएसआर प्रमाणपत्र निरीक्षण सीधे टीसीपी सॉकेट नहीं खोल सकते हैं। इसके लिए स्थानीय पीईएम या डीईआर स्ट्रिंग्स को डिकोड किया जाता है।
सारांश और स्थानीय सेटअप
वेब यूटिल्स दिखाता है कि कैसे आधुनिक एंगुलर सिग्नल्स और वेब एपीआई बिना किसी सर्वर इंफ्रास्ट्रक्चर के एक तेज़, प्रतिक्रियाशील और निजी डेवलपर टूलकिट प्रदान कर सकते हैं।
एप्लिकेशन को स्थानीय रूप से चलाने के लिए:
# रिपॉजिटरी क्लोन करें
git clone https://github.com/breejesh/web-utils.git
cd web-utils
# डिपेंडेंसी इंस्टॉल करें
npm install
# स्थानीय सर्वर शुरू करें
npm start