FF140 escaping < and > to &lt; and &gt; in attributes when serializing HTML (#39639)

Author: hamishwillee

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -1057,49 +1057,6 @@ The [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) allow developer
   </tbody>
 </table>
 
-### Escape < and > in attributes when serializing HTML
-
-Firefox replaces the `<` and `>` characters with `&lt;` and `&gt;` (respectively) in attributes when serializing HTML.
-This prevents certain exploits where HTML is serialized and then injected back into the DOM.
-The affected methods and properties are: {{domxref("Element.innerHTML")}}, {{domxref("Element.outerHTML")}}, {{domxref("Element.getHTML()")}}, {{domxref("ShadowRoot.innerHTML")}}, and {{domxref("ShadowRoot.getHTML()")}}.
-([Firefox bug 1941347](https://bugzil.la/1941347)).
-
-<table>
-  <thead>
-    <tr>
-      <th>Release channel</th>
-      <th>Version added</th>
-      <th>Enabled by default?</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th>Nightly</th>
-      <td>139</td>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <th>Developer Edition</th>
-      <td>139</td>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Beta</th>
-      <td>139</td>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Release</th>
-      <td>139</td>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Preference name</th>
-      <td colspan="2"><code>dom.security.html_serialization_escape_lt_gt</code></td>
-    </tr>
-  </tbody>
-</table>
-
 ### Removal of MutationEvent
 
 {{domxref("MutationEvent")}} and its associated events (`DOMSubtreeModified`, `DOMNodeInserted`, `DOMNodeRemoved`, `DOMCharacterDataModified`, `DOMAttrModified`) are on the path for removal, and have been disabled on nightly.

files/en-us/web/api/element/gethtml/index.md

@@ -15,6 +15,9 @@ The options can be used to include nested shadow roots that have been set as {{d
 
 Without arguments, child nodes that are shadow roots are not serialized, and this method behaves in the same way as reading the value of {{domxref("Element.innerHTML")}}.
 
+Note that some browsers serialize the `<` and `>` characters as `&lt;` and `&gt;` when they appear in attribute values (see [Browser compatibility](#browser_compatibility)).
+This is to prevent a potential security vulnerability ([mutation XSS](https://research.securitum.com/dompurify-bypass-using-mxss/)) in which an attacker can craft input that bypasses a [sanitization function](/en-US/docs/Web/Security/Attacks/XSS#sanitization), enabling a cross-site scripting (XSS) attack.
+
 ## Syntax
 
 ```js-nolint

files/en-us/web/api/element/innerhtml/index.md

@@ -8,7 +8,7 @@ browser-compat: api.Element.innerHTML
 
 {{APIRef("DOM")}}
 
-The {{domxref("Element")}} property **`innerHTML`** gets or sets the HTML or XML markup contained within the element.
+The **`innerHTML`** property of the {{domxref("Element")}} interface gets or sets the HTML or XML markup contained within the element.
 
 More precisely, `innerHTML` gets a serialization of the nested child DOM elements within the element, or sets HTML or XML that should be parsed to replace the DOM tree within the element.
 
@@ -20,6 +20,9 @@ Similarly, when setting element content using `innerHTML`, the HTML string is pa
 So for example [`<template>`](/en-US/docs/Web/HTML/Reference/Elements/template) is parsed into as {{domxref("HTMLTemplateElement")}}, whether or not the [`shadowrootmode`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootmode) attribute is specified
 In order to set an element's contents from an HTML string that includes declarative shadow roots, you must use either {{domxref("Element.setHTMLUnsafe()")}} or {{domxref("ShadowRoot.setHTMLUnsafe()")}}.
 
+Note that some browsers serialize `<` and `>` in attributes as `&lt;` and `&gt;` when reading the HTML (see [Browser compatibility](#browser_compatibility)).
+This prevents certain exploits where code becomes executable when serialized and then deserialized into HTML.
+
 ## Value
 
 A string containing the HTML serialization of the element's descendants.
@@ -42,7 +45,7 @@ Reading `innerHTML` causes the user agent to serialize the HTML or XML fragment
 The resulting string is returned.
 
 ```js
-let contents = myElement.innerHTML;
+const contents = myElement.innerHTML;
 ```
 
 This lets you look at the HTML markup of the element's content nodes.

files/en-us/web/api/element/outerhtml/index.md

@@ -9,32 +9,27 @@ browser-compat: api.Element.outerHTML
 {{APIRef("DOM")}}
 
 The **`outerHTML`** attribute of the {{ domxref("Element") }}
-DOM interface gets the serialized HTML fragment describing the element including its
-descendants. It can also be set to replace the element with nodes parsed from the given
-string.
+DOM interface gets the serialized HTML fragment describing the element including its descendants.
+It can also be set to replace the element with nodes parsed from the given string.
 
-To only obtain the HTML representation of the contents of an element, or to replace the
-contents of an element, use the {{domxref("Element.innerHTML", "innerHTML")}} property
-instead.
+To only obtain the HTML representation of the contents of an element, or to replace the contents of an element, use the {{domxref("Element.innerHTML", "innerHTML")}} property instead.
+
+Note that some browsers serialize `<` and `>` in attributes as `&lt;` and `&gt;` when reading the HTML (see [Browser compatibility](#browser_compatibility)).
+This prevents certain exploits where code becomes executable when serialized and then deserialized into HTML.
 
 ## Value
 
-Reading the value of `outerHTML` returns a string
-containing an HTML serialization of the `element` and its descendants.
-Setting the value of `outerHTML` replaces the element and all of its
-descendants with a new DOM tree constructed by parsing the specified
-`htmlString`.
+Reading the value of `outerHTML` returns a string containing an HTML serialization of the `element` and its descendants.
+Setting the value of `outerHTML` replaces the element and all of its descendants with a new DOM tree constructed by parsing the specified `htmlString`.
 
 When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.outerHTML = null` is equivalent to `elt.outerHTML = ""`.
 
 ### Exceptions
 
 - `SyntaxError` {{domxref("DOMException")}}
-  - : Thrown if an attempt was made to set `outerHTML` using an HTML string which is not
-    valid.
+  - : Thrown if an attempt was made to set `outerHTML` using an HTML string which is not valid.
 - `NoModificationAllowedError` {{domxref("DOMException")}}
-  - : Thrown if an attempt was made to set `outerHTML` on an element which is a direct
-    child of a {{domxref("Document")}}, such as {{domxref("Document.documentElement")}}.
+  - : Thrown if an attempt was made to set `outerHTML` on an element which is a direct child of a {{domxref("Document")}}, such as {{domxref("Document.documentElement")}}.
 
 ## Examples
 

files/en-us/web/api/shadowroot/gethtml/index.md

@@ -15,6 +15,9 @@ The options can be used to include nested shadow roots that have been set as {{d
 
 Without arguments, child nodes that are shadow roots are not serialized, and this method behaves in the same way as reading the value of {{domxref("Element.innerHTML")}}.
 
+Note that some browsers serialize `<` and `>` in attributes as `&lt;` and `&gt;` in the returned HTML (see [Browser compatibility](#browser_compatibility)).
+This prevents certain exploits where code becomes executable when serialized and then deserialized into HTML.
+
 ## Syntax
 
 ```js-nolint

files/en-us/web/api/shadowroot/innerhtml/index.md

@@ -8,9 +8,10 @@ browser-compat: api.ShadowRoot.innerHTML
 
 {{APIRef("Shadow DOM")}}
 
-The **`innerHTML`** property of the {{domxref("ShadowRoot")}}
-interface sets or returns a reference to the DOM tree inside the
-`ShadowRoot`.
+The **`innerHTML`** property of the {{domxref("ShadowRoot")}} interface sets gets or sets the HTML markup to the DOM tree inside the `ShadowRoot`.
+
+Note that some browsers serialize `<` and `>` in attributes as `&lt;` and `&gt;` when reading the HTML (see [Browser compatibility](#browser_compatibility)).
+This prevents certain exploits where code becomes executable when serialized and then deserialized into HTML.
 
 ## Value
 
@@ -20,6 +21,8 @@ When set to the `null` value, that `null` value is converted to the empty string
 
 ## Examples
 
+### Setting the innerHTML of a Shadow root
+
 ```js
 let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;