Add frontend docs for dompurify

doc/development/fe_guide/security.md

@@ -83,3 +83,25 @@ inject scripts into the web app.
 Inline styles should be avoided in almost all cases, they should only be used
 when no alternatives can be found. This allows reusability of styles as well as
 readability.
+
+### Sanitize HTML output
+
+If you need to output raw HTML, you should sanitize it.
+
+If you are using Vue, you can use the[`v-safe-html` directive](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default) from GitLab UI.
+
+For other use cases, wrap a preconfigured version of [`dompurify`](https://www.npmjs.com/package/dompurify)
+that also allows the icons to be rendered:
+
+```javascript
+import { sanitize } from '~/lib/dompurify';
+
+const unsafeHtml = '<some unsafe content ... >';
+
+// ...
+
+element.appendChild(sanitize(unsafeHtml));
+```
+
+This `sanitize` function takes the same configuration as the
+original.

doc/development/secure_coding_guidelines.md

@@ -329,6 +329,7 @@ References:
 
 - When updating the content of an HTML element using JavaScript, mark user-controlled values as `textContent` or `nodeValue` instead of `innerHTML`.
 - Avoid using `v-html` with user-controlled data, use [`v-safe-html`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default) instead.
+- Render unsafe or unsanitized content using [`dompurify`](fe_guide/security.md#sanitize-html-output).
 - Consider using [`gl-sprintf`](../../ee/development/i18n/externalization.md#interpolation) to interpolate translated strings securely.
 - Avoid `__()` with translations that contain user-controlled values.
 - When working with `postMessage`, ensure the `origin` of the message is allowlisted.