` 要素があるとします。このとき、`div.outerHTML` を読み取るとどうなるでしょうか？
従来は、次のようなHTMLが得られました。
```html
```
変更後は、次のようになります。
```html
```
以前は属性内の `<` や `>` はエスケープされませんでした。今後、これらの文字列は常にエスケープされます。
## 変わらないこと
今回の変更は、HTMLフラグメントが文字列としてシリアライズされるときの挙動にのみ影響します。影響を受けるのは、`innerHTML` や `outerHTML`にアクセスするケースや、要素に対して `getHTML()` メソッドを呼び出すようなケースのみです。これらの操作は、既存のDOM構造を受け取り、HTML文字列を生成します。
この変更はHTMLのパース処理には**影響しません**。次のようなHTMLを考えてみましょう。
```html
```
どちらの`div`も同じようにパースされ、`div.dataset.content` の結果は両方とも `"
hello"` になります。
## 何が壊れないのか？
`getAttribute`、`getAttributeNS`、`dataset`、`attributes` など、DOM APIを用いて属性値を取得する場合、以前と同じデコードされた値、とくに`<` と `>` がデコードされた値が返されます。
以下の例では、すべての `console.log` が `"
"` を出力します。
```html
```
```javascript
const div = document.querySelector("div");
// All of the following will log ""
console.log(div.getAttribute("data-content"));
console.log(div.dataset.content);
console.log(div.attributes['data-content'].value);
```
## 何が壊れる可能性があるか？
### innerHTMLやouterHTMLで属性値を取得している場合
属性値の抽出に `innerHTML` や `outerHTML` を使用している場合、コードが壊れる可能性があります。たとえば次のような少し込み入った例を考えます。
```html
```
```javascript
const div = div.querySelector("div");
const content = div.outerHTML.match(/"([^"]+)"/)[1];
console.log(content);
```
このコードは、変更後は異なる挙動になります。以前は `content` は `""` でしたが、今後は `"<u>"` になります。
なお、[正規表現でHTMLをパースするのは推奨されない](https://stackoverflow.com/a/1732454)ことに注意してください。属性値を取得するには、前述のDOM APIを利用してください。
### エンドツーエンドテスト
ChromiumでHTMLを生成するCI/CDパイプラインで、期待される静的なHTMLと比較するようなテストを実行している場合、属性値に `<` や `>` を含んでいるとテストが失敗する可能性があります。
これは想定された破壊的変更であり、`<` と `>` をそれぞれ `<` と `>` にエスケープした新しい期待値に更新する必要があります。
## まとめ
本記事では、HTML仕様の変更により、属性内の `<` と `>` がエスケープされるようになり、一部のmutation XSSを防ぐことでセキュリティが向上することを紹介しました。
この変更は、2025年6月24日のChromium（バージョン138）とFirefox（バージョン140）ですべてのユーザーに適用されます。また、2025年9月ごろにリリース予定のSafari 26 Betaにも含まれる予定です。
もしこの変更によってウェブサイトが壊れてしまい、簡単に修正できない場合は、[https://issues.chromium.org/](https://issues.chromium.org/) にバグを報告してください。
## 追加情報
- [この変更の提案に関するもとのバグレポート](https://github.com/whatwg/html/issues/6235)
- [仕様を変更したプルリクエスト](https://github.com/whatwg/html/pull/6362)
- [ChromeStatusのエントリ](https://chromestatus.com/feature/6264983847174144)
- [この変更のセキュリティ的背景に関するGoogle Security Engineeringブログの投稿](https://bughunters.google.com/blog/5038742869770240)
---
“[HTML spec change: escaping < and > in attributes | Blog | Chrome for Developer](https://developer.chrome.com/blog/escape-attributes?hl=en)” by Google, licensed under [Creative Commons Attribution 4.0 License](https://creativecommons.org/licenses/by/4.0/) / translated into Japanese by ろぼいん