You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/tests/memo-content-security.test.mjs

68 lines
2.8 KiB
JavaScript

import assert from "node:assert/strict";
import test from "node:test";
import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import ReactMarkdown from "react-markdown";
import rehypeKatex from "rehype-katex";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import remarkMath from "remark-math";
import { SANITIZE_SCHEMA, isTrustedIframeSrc } from "../src/components/MemoContent/constants.ts";
const TrustedIframe = (props) => {
if (typeof props.src !== "string" || !isTrustedIframeSrc(props.src)) {
return null;
}
return React.createElement("iframe", props);
};
const renderMemoContent = (content) =>
renderToStaticMarkup(
React.createElement(ReactMarkdown, {
children: content,
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeRaw, [rehypeSanitize, SANITIZE_SCHEMA], [rehypeKatex, { throwOnError: false, strict: false }]],
components: {
iframe: TrustedIframe,
},
}),
);
test("strips user-controlled inline styles from raw HTML spans", () => {
const html = renderMemoContent('<span style="position:fixed;inset:0;z-index:99999">overlay</span>');
assert.match(html, /<span>overlay<\/span>/);
assert.doesNotMatch(html, /style=/);
assert.doesNotMatch(html, /position:fixed/);
});
test("still renders KaTeX output after sanitizing math marker classes", () => {
const html = renderMemoContent("$L$");
assert.match(html, /class="katex"/);
assert.match(html, /class="katex-html"/);
});
test("allows trusted iframe providers only", () => {
assert.equal(isTrustedIframeSrc("https://www.youtube.com/embed/abc123"), true);
assert.equal(isTrustedIframeSrc("https://www.youtube-nocookie.com/embed/abc123?si=test"), true);
assert.equal(isTrustedIframeSrc("https://player.vimeo.com/video/123456"), true);
assert.equal(isTrustedIframeSrc("https://open.spotify.com/embed/track/123456"), true);
assert.equal(isTrustedIframeSrc("https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123456"), true);
assert.equal(isTrustedIframeSrc("https://www.loom.com/embed/123456"), true);
assert.equal(isTrustedIframeSrc("https://www.google.com/maps/embed?pb=test"), true);
assert.equal(isTrustedIframeSrc("https://app.diagrams.net/?embed=1"), true);
assert.equal(isTrustedIframeSrc("https://www.draw.io/?embed=1"), true);
assert.equal(isTrustedIframeSrc("https://evil.example/embed/abc123"), false);
});
test("drops untrusted iframe embeds during rendering", () => {
const trusted = renderMemoContent('<iframe src="https://www.youtube.com/embed/abc123" title="demo"></iframe>');
const untrusted = renderMemoContent('<iframe src="https://evil.example/embed/abc123" title="demo"></iframe>');
assert.match(trusted, /<iframe/);
assert.match(trusted, /youtube\.com\/embed\/abc123/);
assert.doesNotMatch(untrusted, /<iframe/);
});