boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix(pdf): Segoe UI everywhere + rich-text colors survive sanitization

Browse Source 
- section/Quill overrides, footers and the shared header now lead with
  'Segoe UI' (installed on prod) instead of Tahoma (not installed — prod
  silently rendered sections and footers in Noto Sans, mismatching the
  Segoe UI body; dev previews showed real Tahoma and never matched prod)
- cleanQuillHtml no longer deletes ALL style attributes: color and
  background-color survive with strictly validated literal values (hex,
  rgb/rgba, keyword) so editor font colors finally reach the PDF; url(),
  expression() and every other declaration are still stripped — new test
  file pins both the kept colors and the attack vectors

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-12 08:27:47 +02:00
parent ea3b595b32
commit eb279a87a9
6 changed files with 84 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/__tests__/pdf-shared.test.ts Normal file
View File

@@ -0,0 +1,44 @@
import { describe, it, expect } from "vitest";
import { cleanQuillHtml } from "../utils/pdf-shared";
describe("cleanQuillHtml — inline-style whitelist", () => {
it("keeps Quill text and background colors", () => {
const html =
'<p><span style="color: rgb(230, 0, 0);">červeně</span> ' +
'<span style="background-color: #ffff00;">zvýrazněně</span> ' +
'<span style="color: #06c;">modře</span></p>';
const out = cleanQuillHtml(html);
expect(out).toContain('style="color: rgb(230, 0, 0)"');
expect(out).toContain('style="background-color: #ffff00"');
expect(out).toContain('style="color: #06c"');
});
it("drops every non-color style declaration", () => {
const out = cleanQuillHtml(
'<span style="position: fixed; color: red; font-size: 99px;">x</span>',
);
expect(out).toBe('<span style="color: red">x</span>');
});
it("drops unsafe color values (url, expression, quotes)", () => {
expect(
cleanQuillHtml('<span style="color: url(javascript:alert(1))">x</span>'),
).toBe("<span>x</span>");
expect(
cleanQuillHtml('<span style="color: expression(alert(1))">x</span>'),
).toBe("<span>x</span>");
expect(cleanQuillHtml("<span style='color: \"red\"'>x</span>")).toBe(
"<span>x</span>",
);
});
it("keeps stripping scripts, event handlers and js: URLs", () => {
const out = cleanQuillHtml(
'<p onclick="alert(1)"><script>alert(1)</script>' +
'<a href="javascript:alert(1)">x</a></p>',
);
expect(out).not.toContain("script");
expect(out).not.toContain("onclick");
expect(out).not.toContain("javascript:");
});
});

6
src/routes/admin/invoices-pdf.ts
View File

@@ -253,7 +253,7 @@ export function buildInvoicePdfFooter(
const t = translations[lang] || translations.cs;
const pageWord = lang === "cs" ? "Strana" : "Page";
const ofWord = lang === "cs" ? "z" : "of";
return `<div style="width:100%; font-size:8pt; font-family:Tahoma, sans-serif; color:#646464; padding:0 12mm; box-sizing:border-box; display:flex; align-items:center;">
return `<div style="width:100%; font-size:8pt; font-family:'Segoe UI', Tahoma, Arial, sans-serif; color:#646464; padding:0 12mm; box-sizing:border-box; display:flex; align-items:center;">
<div style="flex:1; text-align:left;"><span style="font-weight:600;">${escapeHtml(t.issued_by)}</span> ${escapeHtml(issuerLine)}</div>
<div style="flex:1; text-align:center;">${pageWord} <span class="pageNumber"></span> ${ofWord} <span class="totalPages"></span></div>
<div style="flex:1;"></div>
@@ -898,7 +898,7 @@ export default async function invoicesPdfRoutes(
}
.section-content,
.section-content * {
font-family: Tahoma, sans-serif !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}
.section-content { font-size: 14px; }
.section-content h1 { font-size: 20px; }
@@ -910,7 +910,7 @@ export default async function invoicesPdfRoutes(
.section-content li { margin-bottom: 0.2em; }
/* Quill fonty – v PDF vynuceno Tahoma */
[class*="ql-font-"] { font-family: Tahoma, sans-serif !important; }
[class*="ql-font-"] { font-family: "Segoe UI", Tahoma, Arial, sans-serif !important; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

6
src/routes/admin/issued-orders-pdf.ts
View File

@@ -267,7 +267,7 @@ export function buildIssuedOrderPdfFooter(
const t = translations[lang];
const pageWord = lang === "cs" ? "Strana" : "Page";
const ofWord = lang === "cs" ? "z" : "of";
return `<div style="width:100%; font-size:8pt; font-family:Tahoma, sans-serif; color:#646464; padding:0 12mm; box-sizing:border-box; display:flex; align-items:center;">
return `<div style="width:100%; font-size:8pt; font-family:'Segoe UI', Tahoma, Arial, sans-serif; color:#646464; padding:0 12mm; box-sizing:border-box; display:flex; align-items:center;">
<div style="flex:1; text-align:left;"><span style="font-weight:600;">${escapeHtml(t.issued_by)}</span> ${escapeHtml(issuerName)}</div>
<div style="flex:1; text-align:center;">${pageWord} <span class="pageNumber"></span> ${ofWord} <span class="totalPages"></span></div>
<div style="flex:1;"></div>
@@ -655,7 +655,7 @@ export function renderIssuedOrderHtml(
}
.section-content,
.section-content * {
font-family: Tahoma, sans-serif !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}
.section-content { font-size: 14px; }
.section-content h1 { font-size: 20px; }
@@ -667,7 +667,7 @@ export function renderIssuedOrderHtml(
.section-content li { margin-bottom: 0.2em; }
/* Quill fonty – v PDF vynuceno Tahoma */
[class*="ql-font-"] { font-family: Tahoma, sans-serif !important; }
[class*="ql-font-"] { font-family: "Segoe UI", Tahoma, Arial, sans-serif !important; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

4
src/routes/admin/offers-pdf.ts
View File

@@ -293,7 +293,7 @@ export function renderOfferHtml(
img, table, pre, code { max-width: 100%; }
/* ---- Quill font classes – v PDF vynuceno Tahoma ---- */
[class*="ql-font-"] { font-family: Tahoma, sans-serif !important; }
[class*="ql-font-"] { font-family: "Segoe UI", Tahoma, Arial, sans-serif !important; }
/* ---- Quill alignment ---- */
.ql-align-center { text-align: center; }
@@ -502,7 +502,7 @@ ${indentCSS}
}
.section-content,
.section-content * {
font-family: Tahoma, sans-serif !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}
.section-content { font-size: 14px; }
.section-content h1 { font-size: 20px; }

4
src/routes/admin/orders-pdf.ts
View File

@@ -570,7 +570,7 @@ export function renderOrderConfirmationHtml(
.invoice-notes-content li { margin-bottom: 0.2em; }
.invoice-notes-content,
.invoice-notes-content * {
font-family: Tahoma, sans-serif !important;
font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}
.invoice-notes-content { font-size: 14px; }
.invoice-notes-content h1 { font-size: 20px; }
@@ -579,7 +579,7 @@ export function renderOrderConfirmationHtml(
.invoice-notes-content h4 { font-size: 15px; }
/* Quill fonty – v PDF vynuceno Tahoma */
[class*="ql-font-"] { font-family: Tahoma, sans-serif !important; }
[class*="ql-font-"] { font-family: "Segoe UI", Tahoma, Arial, sans-serif !important; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

32
src/utils/pdf-shared.ts
View File

@@ -94,7 +94,7 @@ export function buildPdfHeaderTemplate(
logoDataUri: string,
heading: string,
): string {
return `<div style="width:100%; font-family:Tahoma, sans-serif; padding:0 12mm; box-sizing:border-box;">
return `<div style="width:100%; font-family:'Segoe UI', Tahoma, Arial, sans-serif; padding:0 12mm; box-sizing:border-box;">
<div style="display:flex; justify-content:space-between; align-items:center; padding-bottom:1mm; border-bottom:2pt solid #de3a3a;">
<div style="flex:0 0 auto;">${logoDataUri ? `<img src="${logoDataUri}" style="max-width:42mm; max-height:22mm; object-fit:contain;" />` : ""}</div>
<div style="font-size:13pt; font-weight:700; color:#de3a3a; text-align:right; letter-spacing:0.03em;">${escapeHtml(heading)}</div>
@@ -108,6 +108,13 @@ export function buildPdfHeaderTemplate(
* and merge adjacent identical spans. Runs AFTER DOMPurify at every call site
* (regex pass = defense-in-depth, not the primary sanitizer).
*/
/**
* Literal CSS color values only: #hex, rgb()/rgba() with numeric components,
* or a bare keyword. No quotes, parentheses beyond rgb(a), url(), variables.
*/
const SAFE_CSS_COLOR =
/^(#[0-9a-f]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*(0|1|0?\.\d+)\s*)?\)|[a-z]{3,20})$/i;
export function cleanQuillHtml(html: string | null | undefined): string {
if (!html) return "";
let s = html;
@@ -134,7 +141,28 @@ export function cleanQuillHtml(html: string | null | undefined): string {
);
// Replace &nbsp; with regular space (outside of tags)
s = s.replace(/(&nbsp;)/g, " ");
s = s.replace(/\s+style\s*=\s*("[^"]*"|'[^']*'|[^\s>]*)/gi, "");
// Inline styles: Quill writes text/background colors as style attributes.
// Keep ONLY color/background-color with literal color values — everything
// else (url(), expression(), positioning…) must never reach Puppeteer.
s = s.replace(
/\s+style\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
(_m, dq, sq, bare) => {
const kept = String(dq ?? sq ?? bare ?? "")
.split(";")
.map((decl) => {
const i = decl.indexOf(":");
if (i < 0) return null;
const prop = decl.slice(0, i).trim().toLowerCase();
const val = decl.slice(i + 1).trim();
return (prop === "color" || prop === "background-color") &&
SAFE_CSS_COLOR.test(val)
? `${prop}: ${val}`
: null;
})
.filter((d): d is string => d !== null);
return kept.length ? ` style="${kept.join("; ")}"` : "";
},
);
// Merge adjacent spans with same attributes
let prev = "";
while (prev !== s) {