Files
cinny/src/app/components/math/KaTeX.tsx
T
jaredandClaude Opus 5 3adba22ddf fix(security): bound KaTeX rendering of remote LaTeX
maxSize 10, maxExpand 100, trust false, strict ignore, and a 5000-char
cap (rendered as plain text beyond it), so a remote sender can't blow out
layout or CPU with \rule{99999em} or deep macro expansion.

Fixes #65

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
2026-09-12 20:28:41 -04:00

61 lines
2.0 KiB
TypeScript

import React from 'react';
import katex from 'katex';
import 'katex/dist/katex.min.css';
type KaTeXProps = {
/** Raw LaTeX source (without `$`/`$$` delimiters). */
latex: string;
/** Render as block (display) math when true, inline otherwise. */
displayMode?: boolean;
};
/**
* Lazily-loaded KaTeX renderer.
*
* This module statically imports `katex` and its stylesheet, so both only enter
* the bundle via the dynamic `import()` of this file (see the `lazy()` wrapper
* in `react-custom-html-parser.tsx`). They are therefore NOT part of the eager
* import graph.
*
* We render with `throwOnError: false`, so KaTeX itself renders a parse error
* inline (in its error colour) rather than throwing. The HTML returned by
* `renderToString` is produced by our own trusted call from a fixed options
* object — it is safe to inject via `dangerouslySetInnerHTML`.
*
* `maxSize`/`maxExpand` cap how large a single glyph (`\\rule`, etc.) or macro
* expansion remote LaTeX can request, and `trust: false` disables commands
* that can embed arbitrary HTML/URLs (e.g. `\\includegraphics`, `\\href`) —
* without these a hostile `$$...$$` from a remote message can DoS or (via
* `trust`) inject unsafe links (Gitea #65). `strict: 'ignore'` keeps unknown-
* but-harmless LaTeX from spamming the console as before. Extremely long
* source is rendered as plain text rather than handed to KaTeX at all.
*/
const MAX_LATEX_LENGTH = 5000;
export default function KaTeX({ latex, displayMode = false }: KaTeXProps) {
if (latex.length > MAX_LATEX_LENGTH) {
const Plain = displayMode ? 'div' : 'span';
return <Plain>{latex}</Plain>;
}
const html = katex.renderToString(latex, {
displayMode,
throwOnError: false,
output: 'htmlAndMathml',
maxSize: 10,
maxExpand: 100,
trust: false,
strict: 'ignore',
});
const Wrapper = displayMode ? 'div' : 'span';
return (
<Wrapper
// KaTeX output is generated by our own render call (trusted-safe).
dangerouslySetInnerHTML={{ __html: html }}
/>
);
}