lavamoat/lavadomeShadowDOM का उपयोग करके सुरक्षित DOM ट्री पृथक्करण और एनकैप्सुलेशन
⚠️ प्रायोगिक [WIP] - अपने जोखिम पर उपयोग करें (और जानें)
LavaDome पर हाथ आज़माएँ - डेमो ऐप पर जाएँ, कंसोल खोलें, और LavaDome इंस्टेंस के भीतर से रहस्य चुराने के लिए अपनी शक्ति में सब कुछ करें (अपनी सफलता की रिपोर्ट करें)
आज के वेब मानकों के तहत, DOM सबट्रीज़ को सुरक्षित तरीके से चुनिंदा रूप से अलग करने का कोई स्थापित तरीका नहीं है। दूसरे शब्दों में, यदि पक्षकार एक ही JavaScript निष्पादन वातावरण साझा करते हैं, तो हम कुछ पक्षकारों को पहुँच देकर और दूसरों के लिए पहुँच अवरुद्ध करके DOM के अनुभागों तक पहुँच को नियंत्रित नहीं कर सकते।
हम ऐसी दुनिया में रहते हैं जहाँ हम अब अपने स्वयं के ऐप्स में कोड पर भरोसा नहीं कर सकते, और same-origin निष्पादन सुरक्षा की गारंटी नहीं देता। फ्रंटएंड में रहस्यों को सुरक्षित करने के लिए, हमें उपयोगकर्ता को सामग्री प्रस्तुत करने में सक्षम होना चाहिए, साथ ही यह सुनिश्चित करना चाहिए कि उसी मूल के अंतर्गत चलने वाले JavaScript कोड द्वारा उससे समझौता न किया जा सके।
वर्तमान में, यह संवेदनशील सामग्री निर्यात होते ही केवल DOM से जोड़ दी जाती है, जिससे यह उसी ऐप में चल रहे सभी इकाइयों के लिए पूरी तरह सुलभ हो जाती है। अर्थात्, कोड के वे अनुभाग जिनके पास निजी कुंजी तक पहुँच नहीं होनी चाहिए, आसानी से उसे सादे पाठ में निकाल सकते हैं, जब तक कि दुर्भावनापूर्ण कोड के पास DOM तक पहुँच हो।
लेकिन निश्चिंत रहें। हमें विश्वास है कि यह एक हल करने योग्य समस्या है 👇
LavaDome वर्तमान में Vanilla JavaScript और React का समर्थन करता है (और अधिक आने वाले हैं)
import { LavaDome as LavaDomeJavaScript } from '@lavamoat/lavadome-javascript';
const root = document.getElementById('root'); const lavadome = new LavaDomeJavaScript(root); lavadome.text(secret); lavadome.copy(); // copy to clipboard
### [React](https://github.com/lavamoat/lavadome/blob/main/packages/react)```javascript
import { LavaDome as LavaDomeReact, toLavaDomeToken } from '@lavamoat/lavadome-react';
function Secret({ text }) {
const {token, copy} = toLavaDomeCapabilities(text);
return <>
<a onClick={copy}> copy to clipboard </a>
<LavaDomeReact token={token} />
</>;
}
रूट नोड के अतिरिक्त, सभी कंस्ट्रक्टर वैकल्पिक विकल्पों का दूसरा तर्क स्वीकार करते हैं:```javascript // javascript new LavaDomeJavaScript(root, { // boolean unsafeOpenModeShadow: false, });
// react function Secret({ text }) { const {token} = toLavaDomeCapabilities(text); return <LavaDomeReact token={token} // boolean unsafeOpenModeShadow={false} /> }
### सुरक्षित उपयोग
वेब कोर की सीमाओं के कारण, LavaDome को सुरक्षित रूप से एकीकृत करने के लिए, कुछ बातों से अवगत होना आवश्यक है जिनके लिए एकीकृत करने वाले डेवलपर से कुछ सक्रिय प्रयास की आवश्यकता होती है:
#### निष्पादन क्रम
LavaDome, किसी भी अन्य JavaScript सुरक्षा सॉफ़्टवेयर की तरह, हमेशा उस कोड के प्रति संवेदनशील होता है जो उससे पहले चलता है।
इसका मतलब यह है कि उस कोड को छोड़कर जिस पर हम पूरी तरह भरोसा करते हैं, LavaDome को वेब अनुप्रयोग प्रोग्राम में लोड होने वाला पहला कोड होना चाहिए।
हालाँकि इसका मतलब यह नहीं है कि डेवलपर को तुरंत इसका उपयोग करना चाहिए (बल्कि केवल तभी जब उन्हें आवश्यकता हो), फिर भी उन्हें प्रोग्राम को जितनी जल्दी हो सके शामिल करना चाहिए।
इसे सही ढंग से (सुरक्षित रूप से) करने के लिए, इसे पूरे प्रोग्राम में पहली import/require घोषणा होनी चाहिए:```javascript
import '@lavamoat/lavadome-react';
import 'other-stuff';
console.log('Program starts here');
इस तरह हम सुनिश्चित करते हैं कि LavaDome सुरक्षित उपयोग के लिए स्वयं को तैयार कर ले।
ध्यान दें कि यह बाकी LavaDome पैकेजों पर भी इसी तरह लागू होता है, न कि केवल @lavamoat/lavadome-react पर (इसलिए उनमें से एक से अधिक का आयात करना आवश्यक नहीं है)।
अधिक जानने के लिए सुरक्षा(रक्षात्मक-कोडिंग) पर जाएँ।
साइड चैनलिंग हमलों और वेब सीमाओं के कारण, रिमोट फ़ॉन्ट्स आयात करना LavaDome के विरुद्ध एक सफल तकनीक हो सकती है। चूँकि यह CSS के दायरे में एम्बेडेड है, इसलिए LavaDome के माध्यम से इस समस्या का समाधान वर्तमान में संभव नहीं है।
सौभाग्य से, इसे CSP के font-src निर्देश का उपयोग करके प्रभावी ढंग से संबोधित किया जा सकता है।
इस प्रकार के हमले को कम करने के लिए, सुनिश्चित करें कि आपका वेब ऐप अज्ञात सर्वरों से फ़ॉन्ट्स लाने की अनुमति नहीं देता है।
अधिक जानने के लिए सुरक्षा(साइड-चैनलिंग) पर जाएँ।
डेवलपर द्वारा LavaDome को प्रदान किया गया पाठ 100% अप्रत्याशित होना चाहिए, अन्यथा उस पर हमला किया जा सकता है और वह लीक हो सकता है।
तो यदि आपका ऐप "your key is 234789" प्रदर्शित करता है, तो इसका अर्थ है कि आपकी DOM संरचना इस प्रकार होनी चाहिए:```html
your key is 234789
और नहीं होना चाहिए:```html
<span> <lavadome>your key is 234789</lavadome> </span>
अधिक जानने के लिए Security(findability) पर जाएँ।
LavaDome को परीक्षण के संदर्भ में एकीकृत करना मुश्किल हो सकता है, क्योंकि चूँकि LavaDome रहस्य को छिपाने का अच्छा काम करता है, यह इसे आपके परीक्षणों से भी काफी अच्छी तरह छिपाता है!
LavaDome को अपने परीक्षण वातावरण में सफलतापूर्वक एकीकृत करने के लिए, आपको LavaDomeDebug से कुछ मदद की आवश्यकता हो सकती है, जिसे @lavamoat/lavadome-core द्वारा export किया गया है:```javascript
// IMPORT/USE FOR TESTING/DEBUGGING PURPOSES ONLY - NEVER IN PRODUCTION!
import { LavaDomeDebug } from '@lavamoat/lavadome-core';
यहाँ कुछ डिबगिंग उपयोगिता विधियाँ हैं जिन्हें `LavaDomeDebug` export करता है और जो `LavaDome` आधारित घटकों के परीक्षण में आपकी सहायता कर सकती हैं:
#### `getTextByRoot()`
किसी `LavaDome` संलग्न root को देखते हुए, `getTextByRoot()` आंतरिक secret को recursively निकालकर पुनर्निर्मित करेगा। ऐसा करने में सक्षम होने के लिए, `LavaDome` instance को मूल रूप से असुरक्षित विकल्प `@unsafeOpenModeShadow` के साथ प्रारंभ किया जाना चाहिए, जो `LavaDome` के आंतरिक shadows को बाहर से accessible बनाता है।
स्वाभाविक रूप से, यह असुरक्षित है और `LavaDome` को पूरी तरह असुरक्षित छोड़ देता है, लेकिन केवल परीक्षण/डिबगिंग उद्देश्यों के लिए उपयोग करना उचित है - सुनिश्चित करें कि इस विकल्प को production में कभी सक्षम न करें!```javascript
new LavaDomeJavaScript(root, {
unsafeOpenModeShadow: isThisTestingEnv, // boolean
}).text('123456');
LavaDomeDebug.getTextByRoot(root) === '123456'; // true
stripDistractionFromText()जब परीक्षण के लिए वेब ड्राइवरों का उपयोग किया जाता है और उन्हें किसी LavaDome इंस्टेंस रूट का इनर टेक्स्ट निकालने का निर्देश दिया जाता है, तो वे एक स्ट्रिंग लौटाते हैं जिसमें सीक्रेट और LavaDome का डिस्ट्रैक्शन टेक्स्ट दोनों शामिल होते हैं।