अपने फ्रंटएंड को सुरक्षित करें: अपडेटेड DOM आधारित XSS चीट शीट

परिचय

एक DOM-आधारित XSS चीट शीट है आपका संदर्भ जब आप क्लाइंट-साइड स्क्रिप्ट इंजेक्शन के विरुद्ध सुरक्षा का पता लगाना, उसे रोकना और स्वचालित करना चाहते हैं। संक्षेप में: पहचानें कि उपयोगकर्ता-नियंत्रित इनपुट (a) कहाँ है स्रोत) एक खतरनाक एपीआई (ए) में प्रवाहित होता है डूबना), इसे सुरक्षित पैटर्न से बदलें (उपयोग करें) पाठ्य सामग्री, क्रिएटएलिमेंट, या सैनिटाइज़र), और अपने बिल्ड, रनटाइम और पेनटेस्ट वर्कफ़्लो में जाँचों को एकीकृत करें। चूँकि DOM XSS पूरी तरह से ब्राउज़र में होता है और कई पारंपरिक सर्वर-साइड फ़िल्टर को बायपास करता है, इसलिए आपका फ्रंट-एंड सुरक्षा की अंतिम पंक्ति बन जाता है—और वह स्थान जहाँ अधिकांश टीमों में अभी भी स्वचालन का अभाव है।

DOM-आधारित XSS क्या है और यह क्यों महत्वपूर्ण है

पोर्टस्विगर के अनुसार, DOM-आधारित क्रॉस-साइट स्क्रिप्टिंग तब उत्पन्न होती है जब "जावास्क्रिप्ट एक हमलावर-नियंत्रणीय स्रोत से डेटा लेता है, जैसे कि यूआरएल, और इसे एक सिंक में भेजता है जो गतिशील कोड निष्पादन का समर्थन करता है, जैसे कि मूल्यांकन() या आंतरिक HTML।” portswigger.net OWASP DOM-आधारित XSS रोकथाम चीट शीट रेखांकित करती है कि संग्रहीत/प्रतिबिंबित XSS से मुख्य अंतर यह है रनटाइम क्लाइंट-साइड इंजेक्शन. cheatsheetseries.owasp.org+1

आधुनिक अनुप्रयोगों में - सिंगल पेज ऐप्स (एसपीए), तृतीय-पक्ष विजेट्स का भारी उपयोग, गतिशील DOM निर्माण - जोखिम बढ़ता है: पेलोड कभी भी आपके सर्वर लॉग तक नहीं पहुंच सकते हैं, पारंपरिक WAF उन्हें याद कर सकते हैं, और डेवलपर्स अक्सर अपर्याप्त रूप से विचार करते हैं खंड पहचानकर्ता, पोस्टमैसेज प्रवाह, या विंडो का नाम, सभी सामान्य स्रोत। इस बदलाव को पहचानना आपकी सुरक्षा परिपक्वता को मापने की दिशा में पहला कदम है।

खतरे का मानचित्रण: स्रोत → डूब

सुरक्षित कोडिंग एक मानसिक मानचित्र से शुरू होती है सूत्रों का कहना है (जहाँ हमलावर इनपुट प्रवेश करता है) और डूब (जहाँ निष्पादन होता है)। एक सुरक्षा ब्लॉग का सारांश यह है: "स्रोत वेब पेज पर कोई भी स्थान है जहां उपयोगकर्ता इनपुट जोड़ा जा सकता है ... सिंक वह स्थान है जहां स्रोत में डाला गया डेटा जाता है ... और यदि इसे साफ नहीं किया जाता है तो यह DOM-आधारित XSS भेद्यता का कारण बन सकता है।" मध्यम

नीचे एक संक्षिप्त तालिका दी गई है जिसे आपको अपने कार्यस्थल पर तथा समीक्षा सूची में रखना चाहिए:

स्रोत (प्रवेश बिंदु)	सिंक (खतरनाक एपीआई)
location.hash, location.search, URLSearchParams	आंतरिक HTML, आसन्न HTML डालें, बाहरी HTML
पोस्ट संदेश, विंडो का नाम	eval(), नया फ़ंक्शन(), setTimeout(स्ट्रिंग)
document.referrer, localStorage, sessionStorage	setAttribute('on…'), element.src = …
अप्रमाणित तृतीय-पक्ष विजेट डेटा	कोई भी DOM प्रविष्टि या अंतर्निहित कोड निष्पादन

जैसा कि OWASP जोर देता है, कोई भी एकल तकनीक XSS को नहीं रोक सकती: आपको उचित सिंक, एनकोडिंग, सैनिटाइजेशन और सुरक्षित API को संयोजित करना होगा। cheatsheetseries.owasp.org

कोड और सुधारों के साथ वास्तविक दुनिया के हमले के पैटर्न

उदाहरण A – URL खंड के माध्यम से jQuery चयनकर्ता इंजेक्शन

कमजोर स्निपेट:

जे एस

$(विंडो).on('hashchange', () => {

const target = $(location.hash); // उपयोगकर्ता-नियंत्रित

लक्ष्य[0].scrollIntoView();

});

एक हमलावर यह योजना बना सकता है https://site/page.html#<img src="x" onerror="alert(1)"> — jQuery हैश को HTML/चयनकर्ता के रूप में मानता है और onerror ट्रिगर.

हल करना:

जे एस

const raw = स्थान.hash.slice(1);

const safeId = /^[A-Za-z0-9_-]+$/.test(raw) ? raw : null;

यदि (सुरक्षित आईडी) {

const लक्ष्य = document.getElementById(safeId);

यदि (लक्ष्य) target.scrollIntoView();

}

कुंजी: मान्य करें, हैश को पहचानकर्ता के रूप में मानें, HTML को नहीं।

उदाहरण B – postMessage → eval chain

कमजोर स्निपेट:

जे एस

window.addEventListener('संदेश', e => {

eval(e.data); // खतरनाक

});

निश्चित संस्करण:

window.addEventListener('संदेश', घटना => {

यदि (event.origin !== ' ') वापस करना;

कोशिश {

const msg = JSON.parse(event.data);

हैंडलमैसेज(msg);

} पकड़ना {

कंसोल.warn('अमान्य संदेश प्रारूप');

}

});

टालना मूल्यांकन, मूल की जाँच करें, सुरक्षित पार्सिंग का उपयोग करें।

उदाहरण C – मार्कडाउन संदर्भ में संपादक/पूर्वावलोकन XSS

असुरक्षित:

जे एस

पूर्वावलोकन.innerHTML = चिह्नित(userInput);

सुरक्षित:

जे एस

'dompurify' से DOMPurify आयात करें;

const गंदा = चिह्नित(userInput);

const clean = DOMPurify.sanitize(गंदा);

पूर्वावलोकन.आंतरिकHTML = साफ़;

उपयोगकर्ता द्वारा निर्मित HTML को अनुमति देते समय, स्वच्छता आवश्यक है।

परिनियोजन योग्य कार्यान्वयन: इसे क्रियाशील बनाना

सुरक्षित DOM सहायक – safe‑dom.js

जे एस

'dompurify' से DOMPurify आयात करें;

निर्यात फ़ंक्शन setSafeHTML(el, dirty) {

const clean = DOMPurify.sanitize(गंदा, {

अनुमत टैग: ['b','i','a','p','ul','li','code','pre','img'],

अनुमत_ATTR: ['href','src','alt','title','rel'],

FORBID_ATTR: ['onerror','onclick','style']

});

el.innerHTML = साफ़;

}

निर्यात फ़ंक्शन setText(el, text) {

el.textContent = स्ट्रिंग(पाठ ?? '');

}

निर्यात फ़ंक्शन safeSetAttribute(el, नाम, val) {

यदि (/^on/i.test(name)) नई त्रुटि ('ईवेंट हैंडलर विशेषता की अनुमति नहीं है') फेंकें;

el.setAttribute(नाम, स्ट्रिंग(वैल्यू));

}

सुरक्षित DOM परिचालनों को केंद्रीकृत करने और मानवीय त्रुटि को कम करने के लिए इस लाइब्रेरी का उपयोग करें।

स्थैतिक प्रवर्तन – ESLint नमूना

जे एस

// .eslintrc.js

नियम: {

'no-restricted-syntax': [

'गलती',

{ चयनकर्ता: "AssignmentExpression[left.property.name='innerHTML']", संदेश: "safe-dom.setSafeHTML या textContent का उपयोग करें।" },

{ चयनकर्ता: "CallExpression[callee.name='eval']", संदेश: "eval() से बचें" },

{ चयनकर्ता: "CallExpression[callee.property.name='write']", संदेश: "document.write() से बचें" }

]

}

प्री-कमिट हुक के साथ संयोजित करें (HUSKY, लिंट-स्टेज्ड) खतरनाक पैटर्न को रोकने के लिए।

CI / कठपुतली परीक्षण – GitHub क्रियाएँ

.github/workflows/dom-xss.yml कठपुतली परीक्षण शुरू करता है:

// परीक्षण/कठपुतली/डोम-xss-परीक्षण.js

जे एस

const कठपुतली = require('कठपुतली');

(async ()=>{

const ब्राउज़र = कठपुतली.लॉन्च() का इंतजार करें;

const पेज = ब्राउज़र.newPage() का इंतजार करें;

कॉन्स्ट लॉग्स = [];

पेज.ऑन('कंसोल', संदेश => लॉग.पुश(संदेश.टेक्स्ट()));

प्रतीक्षा करें page.goto(${URL}/page.html#<img src="x" onerror="console.log("xss")">);

प्रतीक्षा करें पेज.waitForTimeout(1000);

यदि (लॉग.कुछ(l=>l.शामिल('XSS'))) प्रक्रिया.बाहर निकलें(2);

ब्राउज़र बंद होने की प्रतीक्षा करें;

})();

पता लगाने में असफल निर्माण.

रनटाइम मॉनिटरिंग – म्यूटेशनऑब्जर्वर

जे एस

(समारोह(){

const obs = नया MutationObserver(muts=>{

muts.forEach(m=>{

m.addedNodes.forEach(n=>{

यदि(n.nodeType===1){

स्थिरांक html = n.innerHTML || '';

if(/on(error|click|load)|

नेविगेटर.sendBeacon('/_monitoring/xss', JSON.stringify({

यूआरएल: location.href, स्निपेट: html.slice(0,200)

}));

}

}

});

});

});

obs.observe(दस्तावेज़.documentElement, {childList:सच, सबट्री:सच});

})();

अप्रत्याशित DOM इंजेक्शन के प्रति सचेत करने के लिए स्टेजिंग में उपयोगी।

ब्राउज़र सुरक्षा को और मज़बूत बनाना – CSP और विश्वसनीय प्रकार

सीएसपी हेडर:

पीजीएसक्यूएल

सामग्री-सुरक्षा-नीति: डिफ़ॉल्ट-src 'स्वयं'; स्क्रिप्ट-src 'स्वयं' 'nonce-XYZ'; ऑब्जेक्ट-src 'कोई नहीं'; बेस-uri 'स्वयं';

विश्वसनीय प्रकार स्निपेट:

जे एस

window.trustedTypes?.createPolicy('safePolicy', {

createHTML: s => { throw new Error('प्रत्यक्ष HTML असाइनमेंट अवरुद्ध'); },

createScript: s => { throw new Error('प्रत्यक्ष स्क्रिप्ट निर्माण अवरुद्ध'); }

});

यह डिफ़ॉल्ट रूप से अविश्वसनीय सिंक को अस्वीकार कर देता है।

तृतीय-पक्ष स्क्रिप्ट सुरक्षा – SRI

दे घुमा के

ओपनएसएसएल डीजीएसटी -sha384 -बाइनरी विक्रेता.js | ओपनएसएसएल बेस64 -A

उपयोग <script src="vendor.js" integrity="sha384‑..." crossorigin="anonymous"></script> पिन करने और सत्यापित करने के लिए.

स्वचालन के लिए पेनलिजेंट के साथ एकीकरण

अगर आपकी टीम Penligent का इस्तेमाल करती है, तो आप अपने DOM XSS सुरक्षा को एक सतत पाइपलाइन में बदल सकते हैं। Penligent के शोध लेख में बताया गया है कि कैसे "रनटाइम टेंट ट्रैकिंग के माध्यम से DOM-आधारित XSS का पता लगाना... सर्वरसाइड तकनीक विश्वसनीय रूप से क्लाइंट-साइड इंजेक्शन को नहीं पकड़ सकती है।" पेनलिजेंट

उदाहरण कार्यप्रवाह:

1. CI में नियम सेट के साथ एक पेनलिजेंट स्कैन ट्रिगर करें डोम‑xss, जैसे पेलोड की आपूर्ति #<img src="x" onerror="alert(1)">.
2. पेनलिजेंट हेडलेस फ्लो निष्पादित करता है, PoC उत्पन्न करता है, वेबहुक के माध्यम से निष्कर्ष लौटाता है।
3. सीआई निष्कर्षों का विश्लेषण करता है: यदि गंभीरता ≥ उच्च है, तो बिल्ड विफल करें और पीआर को पेलोड + सिंक + फिक्स अनुशंसा के साथ एनोटेट करें (उदाहरण के लिए, "प्रतिस्थापित करें" आंतरिक HTML साथ safe-dom.setSafeHTML).
4. डेवलपर्स ठीक करते हैं, CI को फिर से चलाते हैं, केवल हरे होने पर ही विलय करते हैं।

यह लूप को बंद कर देता है: संदर्भ से (यह चीट शीट) → कोड नीति → स्वचालित पहचान → संगठित उपचार।

निष्कर्ष

फ्रंट-एंड अब “सिर्फ UI” नहीं है। यह एक हमले की सतहयह चीट शीट आपको क्लाइंट-साइड इंजेक्शन को समझने, खतरनाक सिंक को बदलने, सुरक्षित हेल्पर लाइब्रेरी बनाने, स्टैटिक/CI/रनटाइम डिटेक्शन को लागू करने और पेनलिजेंट जैसे प्लेटफ़ॉर्म के साथ ऑटोमेशन करने में मदद करती है। आपके अगले चरण: प्रतिबंधित सिंक के लिए अपने कोडबेस को स्कैन करें (आंतरिक HTML, मूल्यांकन), अपनाएं सुरक्षित स्थान लाइब्रेरी, लिंट नियमों को लागू करना, हेडलेस टेस्ट और रियल पेनटेस्ट लॉजिक को एकीकृत करना, प्रोडक्शन/स्टेजिंग की निगरानी करना, और तृतीय-पक्ष संसाधनों को पिन करना। DOM XSS की सुरक्षा का मतलब है इसे असंभव केवल संयोग पर निर्भर न रहकर, सफल होने का प्रयास करें।