Apply html utils sanitiser to embedded page (#33842)

* Apply html utils sanitiser to embedded page

* Write tests

apps/web/src/HtmlUtils.tsx

@@ -89,11 +89,18 @@ export function unicodeToShortcode(char: string): string {
 /*
  * Given an untrusted HTML string, return a React node with an sanitized version
  * of that HTML.
+ * @param insaneHtml - the input to sanitize
+ * @param className - an optional class name to apply to the element
+ * @param sanitizeParams - the params to use for sanitization
  */
-export function sanitizedHtmlNode(insaneHtml: string): ReactNode {
-    const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
+export function sanitizedHtmlNode(
+    insaneHtml: string,
+    className?: string,
+    sanitizeParams = sanitizeHtmlParams,
+): ReactNode {
+    const saneHtml = sanitizeHtml(insaneHtml, sanitizeParams);
 
-    return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
+    return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" className={className} />;
 }
 
 export function getHtmlText(insaneHtml: string): string {

apps/web/src/components/structures/EmbeddedPage.tsx

@@ -19,6 +19,9 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { type ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions.ts";
+import { sanitizedHtmlNode } from "../../HtmlUtils.tsx";
+import { sanitizeHtmlParams, transformTags } from "../../Linkify.ts";
+import { objectExcluding } from "../../utils/objects.ts";
 
 interface IProps {
     // URL to request embedded page content from
@@ -126,7 +129,15 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
             [`${className}_loggedIn`]: !!client,
         });
 
-        const content = <div className={`${className}_body`} dangerouslySetInnerHTML={{ __html: this.state.page }} />;
+        const content = sanitizedHtmlNode(this.state.page, `${className}_body`, {
+            ...sanitizeHtmlParams,
+            transformTags: objectExcluding(transformTags, [
+                // Disable the transformer for `img` as it only allows mxc resources
+                "img",
+                // Disable the default transformer as it forbids inline styles
+                "*",
+            ]),
+        });
 
         if (this.props.scrollbar) {
             return <AutoHideScrollbar className={classes}>{content}</AutoHideScrollbar>;