hacktricks/pentesting-web/xss-cross-site-scripting/shadow-dom.md

# शैडो डॉम

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ हैकट्रिक्स क्लाउड ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 ट्विटर 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ ट्विच 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 यूट्यूब 🎥</strong></a></summary>

* क्या आप **साइबर सुरक्षा कंपनी** में काम करते हैं? क्या आप अपनी कंपनी को **हैकट्रिक्स में विज्ञापित करना चाहते हैं**? या क्या आपको **PEASS की नवीनतम संस्करण या HackTricks को PDF में डाउनलोड करने का उपयोग** करना चाहिए? [**सदस्यता योजनाएं**](https://github.com/sponsors/carlospolop) की जांच करें!
* [**The PEASS Family**](https://opensea.io/collection/the-peass-family) की खोज करें, हमारा विशेष [**NFT**](https://opensea.io/collection/the-peass-family) संग्रह
* [**आधिकारिक PEASS और HackTricks swag**](https://peass.creator-spring.com) प्राप्त करें
* [**💬**](https://emojipedia.org/speech-balloon/) [**डिस्कॉर्ड समूह**](https://discord.gg/hRep4RUj7f) या [**टेलीग्राम समूह**](https://t.me/peass) में **शामिल हों** या मुझे **ट्विटर** पर **फ़ॉलो** करें [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **अपने हैकिंग ट्रिक्स साझा करें, PRs सबमिट करके** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **और** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **को।**

</details>

## मूलभूत जानकारी

शैडो डॉम वेब कंपोनेंट्स फीचर स्यूट का हिस्सा है, जिसका उद्देश्य JS डेवलपर्स को अपने कस्टम तत्वों को बनाने के लिए उनके फंक्शनैलिटी को वेबसाइट कोड से अलग करके पुनःउपयोगी बनाने की अनुमति देना है।

मूल रूप से, आप शैडो डॉम का उपयोग करके अपने कंपोनेंट के HTML और CSS को वेबपेज के बाकी कोड से **अलग कर सकते हैं**। उदाहरण के लिए, यदि आप शैडो डॉम में तत्व आईडी बनाते हैं, तो वे **मूल डॉम में तत्व आईडी के साथ टकराएगा नहीं**। आप अपने शैडो डॉम में उपयोग करने वाले किसी भी CSS सेलेक्टर का प्रयोग केवल शैडो डॉम में ही लागू होगा और मूल डॉम में नहीं, और आप मूल डॉम में उपयोग करने वाले किसी भी सेलेक्टर का प्रयोग शैडो डॉम में नहीं करेंगे।
```js
// creating a shadow DOM
let $element = document.createElement("div");
$shadowDomRef = $element.attachShadow({ mode: "open" }); // open or closed
```
आमतौर पर, जब आप एक **"खुला" छाया DOM को एक तत्व से जोड़ते हैं**, तो आप **`$element.shadowRoot`** के साथ छाया DOM का संदर्भ प्राप्त कर सकते हैं। हालांकि, यदि छाया DOM **"बंद"** मोड के तहत जुड़ा होता है, तो आप इस तरीके से इसे प्राप्त नहीं कर सकते हैं। चाहे जितनी भी डेवलपर दस्तावेज़ीकरण पढ़ लें, मुझे अभी भी थोड़ी सी अस्पष्टता है कि बंद मोड का उद्देश्य क्या है। [Google के अनुसार](https://developers.google.com/web/fundamentals/web-components/shadowdom):

> "बंद" मोड के एक और रूप को छाया DOM कहा जाता है। जब आप एक **बंद** छाया पेड़ बनाते हैं, तो **बाहरी JavaScript आपके कंपोनेंट के आंतरिक DOM तक पहुंच नहीं पा सकता**। यह `<video>` जैसे प्राकृतिक तत्वों के काम करने की तरह है। JavaScript `<video>` के छाया DOM तक पहुंच नहीं कर सकता क्योंकि ब्राउज़र इसे बंद मोड छाया रूट का उपयोग करके लागू करता है।

हालांकि, वे यह भी कहते हैं:

> बंद मोड छाया रूट बहुत उपयोगी नहीं है। कुछ डेवलपर बंद मोड को एक **कृत्रिम सुरक्षा सुविधा** के रूप में देखेंगे। लेकिन यह स्पष्ट हो जाए, यह **कोई** सुरक्षा सुविधा नहीं है।

## छाया DOM तक पहुंच

### window.find() और पाठ चयन <a href="#introducing-windowfind-and-text-selections" id="introducing-windowfind-and-text-selections"></a>

फ़ंक्शन **`window.find("search_text")` छाया DOM के भीतर प्रवेश करता है**। यह फ़ंक्शन प्रभावी रूप से वेबपेज पर ctrl-F की तरह कार्य करती है।

यह संभव है कि आप **`document.execCommand("SelectAll")`** को कॉल करके चयन को **जितना संभव हो सके विस्तारित** करें और फिर **`window.getSelection()`** को कॉल करें छाया DOM में चयनित पाठ की **सामग्री लौटाएं**।

**firefox** में आप `getSelection()` का उपयोग कर सकते हैं जो एक [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) ऑब्जेक्ट लौटाता है, जहां `anchorElement` एक **छाया DOM में तत्व के लिए संदर्भ** है। इसलिए, हम छाया DOM की सामग्री को निम्नलिखित तरीके से निकाल सकते हैं:
```js
getSelection().anchorNode.parentNode.parentNode.parentNode.innerHTML
```
लेकिन यह Chromium में काम नहीं करता।

### contenteditable या CSS इंजेक्शन <a href="#contenteditable-or-css-injection" id="contenteditable-or-css-injection"></a>

एक तरीका है जिससे हम शैडो डॉम के साथ इंटरैक्ट कर सकते हैं वह है जब हमारे पास इसके अंदर **HTML या JS इंजेक्शन** हो। कुछ दिलचस्प स्थितियाँ हैं जहां आप एक शैडो डॉम के भीतर इंजेक्शन प्राप्त कर सकते हैं, जहां आप एक सामान्य crossorigin पेज पर नहीं कर सकते हैं।

एक उदाहरण है, यदि आपके पास **`contenteditable` एट्रिब्यूट के साथ कोई तत्व** है। यह एक पुराना और कम उपयोग होने वाला HTML एट्रिब्यूट है जो इस तत्व की **सामग्री को उपयोगकर्ता-संपादनीय** घोषित करता है। हम संग्रहों का उपयोग कर सकते हैं इसके साथ और **`document.execCommand`** API का उपयोग करके contenteditable तत्व के साथ इंटरैक्ट कर सकते हैं और HTML इंजेक्शन प्राप्त कर सकते हैं!
```js
find('selection within contenteditable');

document.execCommand('insertHTML',false,'<svg/onload=console.log(this.parentElement.outerHTML)>')
```
शायद और भी रोचक है, **`contenteditable`** को क्रोमियम में किसी भी तत्व पर घोषित किया जा सकता है जब एक अप्रचलित **CSS गुण: `-webkit-user-modify:read-write`** लागू किया जाता है।

इससे हमें एक CSS/स्टाइल इंजेक्शन को एक HTML इंजेक्शन में उठा सकते हैं, एक तत्व पर CSS गुण जोड़कर और फिर `insertHTML` कमांड का उपयोग करके।

## CTF

इस तकनीक का उपयोग CTF चैलेंज के रूप में किया गया था, इस लेख में देखें: [https://github.com/Super-Guesser/ctf/blob/master/2022/dicectf/shadow.md](https://github.com/Super-Guesser/ctf/blob/master/2022/dicectf/shadow.md)

## संदर्भ

* [https://blog.ankursundara.com/shadow-dom/](https://blog.ankursundara.com/shadow-dom/)

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks Cloud ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* क्या आप **साइबर सुरक्षा कंपनी** में काम करते हैं? क्या आप अपनी कंपनी को **HackTricks में विज्ञापित** देखना चाहते हैं? या क्या आपको **PEASS की नवीनतम संस्करण या HackTricks को PDF में डाउनलोड करने का उपयोग** करना चाहिए? [**सदस्यता योजनाएं**](https://github.com/sponsors/carlospolop) की जांच करें!
* खोजें [**The PEASS Family**](https://opensea.io/collection/the-peass-family), हमारा विशेष [**NFT**](https://opensea.io/collection/the-peass-family) संग्रह।
* प्राप्त करें [**आधिकारिक PEASS और HackTricks swag**](https://peass.creator-spring.com)
* **शामिल हों** [**💬**](https://emojipedia.org/speech-balloon/) [**Discord समूह**](https://discord.gg/hRep4RUj7f) या [**टेलीग्राम समूह**](https://t.me/peass) या मुझे **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)** का पालन करें।**
* **अपने हैकिंग ट्रिक्स साझा करें, PRs सबमिट करके** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **और** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **को।**

</details>