sanitize all user inputs, fix #2172

2025-04-04 13:21:05 +08:00 · 2025-01-24 23:53:45 +01:00 · 2025-01-24 23:53:45 +01:00 · c7ae0e94d7
commit c7ae0e94d7
parent 308a8e3ae3
29 changed files with 190 additions and 99 deletions
--- a/apps/artboard/src/constants/helmet.ts
+++ b/apps/artboard/src/constants/helmet.ts
@ -0,0 +1,5 @@
+import { HelmetData } from "react-helmet-async";
+
+export const helmetData = new HelmetData({});
+
+export const helmetContext = helmetData.context;
--- a/apps/artboard/src/pages/artboard.tsx
+++ b/apps/artboard/src/pages/artboard.tsx
@ -1,6 +1,7 @@
 import { useEffect, useMemo } from "react";
 import { Helmet } from "react-helmet-async";
 import { Outlet } from "react-router";
+import sanitizeHtml from "sanitize-html";
 import webfontloader from "webfontloader";

 import { useArtboardStore } from "../store/artboard";
@ -61,8 +62,11 @@ export const ArtboardPage = () => {
    <>
      <Helmet>
        <title>{name} | Reactive Resume</title>
-
-        {metadata.css.visible && <style lang="css">{metadata.css.value}</style>}
+        {metadata.css.visible && (
+          <style id="custom-css" lang="css">
+            {sanitizeHtml(metadata.css.value)}
+          </style>
+        )}
      </Helmet>

      <Outlet />
--- a/apps/artboard/src/providers/index.tsx
+++ b/apps/artboard/src/providers/index.tsx
@ -1,6 +1,8 @@
 import { useEffect } from "react";
+import { HelmetProvider } from "react-helmet-async";
 import { Outlet } from "react-router";

+import { helmetContext } from "../constants/helmet";
 import { useArtboardStore } from "../store/artboard";

 export const Providers = () => {
@ -32,13 +34,12 @@ export const Providers = () => {
    };
  }, [setResume]);

-  // Only for testing, in production this will be fetched from window.postMessage
-  // useEffect(() => {
-  //   setResume(sampleResume);
-  // }, [setResume]);
-
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
  if (!resume) return null;

-  return <Outlet />;
+  return (
+    <HelmetProvider context={helmetContext}>
+      <Outlet />
+    </HelmetProvider>
+  );
 };
--- a/apps/artboard/src/router/index.tsx
+++ b/apps/artboard/src/router/index.tsx
@ -6,7 +6,7 @@ import { PreviewLayout } from "../pages/preview";
 import { Providers } from "../providers";

 export const routes = createRoutesFromChildren(
-  <Route element={<Providers />} hydrateFallbackElement={<div>Loading...</div>}>
+  <Route element={<Providers />}>
    <Route path="artboard" element={<ArtboardPage />}>
      <Route path="builder" element={<BuilderLayout />} />
      <Route path="preview" element={<PreviewLayout />} />
--- a/apps/artboard/src/styles/main.css
+++ b/apps/artboard/src/styles/main.css
@ -8,6 +8,10 @@
  @apply border-current;
 }

+body {
+  overflow: hidden;
+}
+
 #root {
  @apply antialiased;
 }
--- a/apps/artboard/src/templates/azurill.tsx
+++ b/apps/artboard/src/templates/azurill.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -98,9 +99,9 @@ const Summary = () => {
        <div className="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />

        <div
-          dangerouslySetInnerHTML={{ __html: section.content }}
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
          style={{ columns: section.columns }}
+          className="wysiwyg"
        />
      </main>
    </section>
@ -224,7 +225,10 @@ const Section = <T,>({
                <div>{children?.(item as T)}</div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/bronzor.tsx
+++ b/apps/artboard/src/templates/bronzor.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -89,9 +90,9 @@ const Summary = () => {
      </div>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg col-span-4"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg col-span-4"
      />
    </section>
  );
@ -205,7 +206,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/chikorita.tsx
+++ b/apps/artboard/src/templates/chikorita.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -89,9 +90,9 @@ const Summary = () => {
      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -209,7 +210,7 @@ const Section = <T,>({

                {summary !== undefined && !isEmptyString(summary) && (
                  <div
-                    dangerouslySetInnerHTML={{ __html: summary }}
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
                    className="wysiwyg group-[.sidebar]:prose-invert"
                  />
                )}
--- a/apps/artboard/src/templates/ditto.tsx
+++ b/apps/artboard/src/templates/ditto.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -109,9 +110,9 @@ const Summary = () => {
      <h4 className="mb-2 text-base font-bold">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -230,7 +231,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/gengar.tsx
+++ b/apps/artboard/src/templates/gengar.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -89,9 +90,9 @@ const Summary = () => {
    <div className="p-custom space-y-4" style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}>
      <section id={section.id}>
        <div
-          dangerouslySetInnerHTML={{ __html: section.content }}
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
          style={{ columns: section.columns }}
+          className="wysiwyg"
        />
      </section>
    </div>
@ -210,7 +211,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/glalie.tsx
+++ b/apps/artboard/src/templates/glalie.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, hexToRgb, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -89,9 +90,9 @@ const Summary = () => {
      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -213,7 +214,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/kakuna.tsx
+++ b/apps/artboard/src/templates/kakuna.tsx
@ -17,6 +17,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -108,9 +109,9 @@ const Summary = () => {
      </h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -221,7 +222,10 @@ const Section = <T,>({
                <div>{children?.(item as T)}</div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/leafish.tsx
+++ b/apps/artboard/src/templates/leafish.tsx
@ -17,6 +17,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -42,9 +43,9 @@ const Header = () => {
          </div>

          <div
-            dangerouslySetInnerHTML={{ __html: section.content }}
-            className="wysiwyg"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
            style={{ columns: section.columns }}
+            className="wysiwyg"
          />
        </div>

@ -216,7 +217,10 @@ const Section = <T,>({
                <div>{children?.(item as T)}</div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/nosepass.tsx
+++ b/apps/artboard/src/templates/nosepass.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -105,9 +106,9 @@ const Summary = () => {
        </div>

        <div
-          dangerouslySetInnerHTML={{ __html: section.content }}
-          className="wysiwyg"
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
          style={{ columns: section.columns }}
+          className="wysiwyg"
        />
      </div>
    </section>
@ -217,7 +218,10 @@ const Section = <T,>({
                    {url !== undefined && section.separateLinks && <Link url={url} />}

                    {summary !== undefined && !isEmptyString(summary) && (
-                      <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                        className="wysiwyg"
+                      />
                    )}

                    {keywords !== undefined && keywords.length > 0 && (
@ -252,7 +256,10 @@ const Section = <T,>({
                    {url !== undefined && section.separateLinks && <Link url={url} />}

                    {summary !== undefined && !isEmptyString(summary) && (
-                      <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                      <div
+                        dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                        className="wysiwyg"
+                      />
                    )}

                    {keywords !== undefined && keywords.length > 0 && (
--- a/apps/artboard/src/templates/onyx.tsx
+++ b/apps/artboard/src/templates/onyx.tsx
@ -17,6 +17,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import React, { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -109,9 +110,9 @@ const Summary = () => {
      <h4 className="font-bold text-primary">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -223,7 +224,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/pikachu.tsx
+++ b/apps/artboard/src/templates/pikachu.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -110,9 +111,9 @@ const Summary = () => {
      <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -238,7 +239,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/artboard/src/templates/rhyhorn.tsx
+++ b/apps/artboard/src/templates/rhyhorn.tsx
@ -18,6 +18,7 @@ import { Education, Experience, Volunteer } from "@reactive-resume/schema";
 import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
 import get from "lodash.get";
 import { Fragment } from "react";
+import sanitizeHtml from "sanitize-html";

 import { BrandIcon } from "../components/brand-icon";
 import { Picture } from "../components/picture";
@ -90,9 +91,9 @@ const Summary = () => {
      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>

      <div
-        dangerouslySetInnerHTML={{ __html: section.content }}
-        className="wysiwyg"
+        dangerouslySetInnerHTML={{ __html: sanitizeHtml(section.content) }}
        style={{ columns: section.columns }}
+        className="wysiwyg"
      />
    </section>
  );
@ -204,7 +205,10 @@ const Section = <T,>({
                </div>

                {summary !== undefined && !isEmptyString(summary) && (
-                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                  <div
+                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(summary) }}
+                    className="wysiwyg"
+                  />
                )}

                {level !== undefined && level > 0 && <Rating level={level} />}
--- a/apps/client/src/components/theme-switch.tsx
+++ b/apps/client/src/components/theme-switch.tsx
@ -7,9 +7,10 @@ import { useMemo } from "react";

 type Props = {
  size?: number;
+  className?: string;
 };

-export const ThemeSwitch = ({ size = 20 }: Props) => {
+export const ThemeSwitch = ({ size = 20, className }: Props) => {
  const { theme, toggleTheme } = useTheme();

  const variants: Variants = useMemo(() => {
@ -21,7 +22,7 @@ export const ThemeSwitch = ({ size = 20 }: Props) => {
  }, [size]);

  return (
-    <Button size="icon" variant="ghost" onClick={toggleTheme}>
+    <Button size="icon" variant="ghost" className={className} onClick={toggleTheme}>
      <div className="cursor-pointer overflow-hidden" style={{ width: size, height: size }}>
        <motion.div animate={theme} variants={variants} className="flex">
          <Sun size={size} className="shrink-0" />
--- a/apps/client/src/pages/builder/page.tsx
+++ b/apps/client/src/pages/builder/page.tsx
@ -18,12 +18,12 @@ export const BuilderPage = () => {
  const title = useResumeStore((state) => state.resume.title);

  const updateResumeInFrame = useCallback(() => {
-    if (!frameRef?.contentWindow) return;
    const message = { type: "SET_RESUME", payload: resume.data };
-    (() => {
-      frameRef.contentWindow.postMessage(message, "*");
-    })();
-  }, [frameRef, resume.data]);
+
+    setImmediate(() => {
+      frameRef?.contentWindow?.postMessage(message, "*");
+    });
+  }, [frameRef?.contentWindow, resume.data]);

  // Send resume data to iframe on initial load
  useEffect(() => {
--- a/apps/client/src/pages/public/page.tsx
+++ b/apps/client/src/pages/public/page.tsx
@ -27,12 +27,12 @@ export const PublicResumePage = () => {
  const format = resume.metadata.page.format as keyof typeof pageSizeMap;

  const updateResumeInFrame = useCallback(() => {
-    if (!frameRef.current?.contentWindow) return;
    const message = { type: "SET_RESUME", payload: resume };
-    (() => {
-      frameRef.current.contentWindow.postMessage(message, "*");
-    })();
-  }, [frameRef, resume]);
+
+    setImmediate(() => {
+      frameRef.current?.contentWindow?.postMessage(message, "*");
+    });
+  }, [frameRef.current, resume]);

  useEffect(() => {
    if (!frameRef.current) return;
@ -77,7 +77,7 @@ export const PublicResumePage = () => {

      <div
        style={{ width: `${pageSizeMap[format].width}mm` }}
-        className="overflow-hidden rounded shadow-xl sm:mx-auto sm:mb-6 sm:mt-16 print:m-0 print:shadow-none"
+        className="relative z-50 overflow-hidden rounded shadow-xl sm:mx-auto sm:mb-6 sm:mt-16 print:m-0 print:shadow-none"
      >
        <iframe
          ref={frameRef}
@ -97,12 +97,10 @@ export const PublicResumePage = () => {
        </Link>
      </div>

-      <div className="fixed bottom-5 right-5 hidden sm:block print:hidden">
-        <div className="flex items-center gap-x-4">
-          <Button variant="outline" className="gap-x-2 rounded-full" onClick={onDownloadPdf}>
-            {loading ? <CircleNotch size={16} className="animate-spin" /> : <FilePdf size={16} />}
-            {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
-            <span>{t`Download PDF`}</span>
+      <div className="fixed bottom-5 right-5 z-0 hidden sm:block print:hidden">
+        <div className="flex flex-col items-center gap-y-2">
+          <Button size="icon" variant="ghost" onClick={onDownloadPdf}>
+            {loading ? <CircleNotch size={20} className="animate-spin" /> : <FilePdf size={20} />}
          </Button>

          <ThemeSwitch />
--- a/apps/client/src/router/index.tsx
+++ b/apps/client/src/router/index.tsx
@ -22,8 +22,7 @@ import { GuestGuard } from "./guards/guest";
 import { authLoader } from "./loaders/auth";

 export const routes = createRoutesFromElements(
-  // eslint-disable-next-line lingui/no-unlocalized-strings
-  <Route element={<Providers />} hydrateFallbackElement={<div>Loading...</div>}>
+  <Route element={<Providers />}>
    <Route element={<HomeLayout />}>
      <Route path="/" element={<HomePage />} />
    </Route>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "@reactive-resume/source",
  "description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
-  "version": "4.4.0",
+  "version": "4.4.1",
  "license": "MIT",
  "private": true,
  "author": {
@ -82,6 +82,7 @@
    "@types/react-dom": "^18.3.5",
    "@types/react-is": "^18.3.1",
    "@types/retry": "^0.12.5",
+    "@types/sanitize-html": "^2.13.0",
    "@types/webfontloader": "^1.6.38",
    "@typescript-eslint/eslint-plugin": "^8.21.0",
    "@typescript-eslint/parser": "^8.21.0",
@ -235,6 +236,7 @@
    "react-zoom-pan-pinch": "^3.6.1",
    "reflect-metadata": "^0.2.2",
    "rxjs": "^7.8.1",
+    "sanitize-html": "^2.14.0",
    "sharp": "^0.33.5",
    "tailwind-merge": "^2.6.0",
    "tslib": "^2.8.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -347,6 +347,9 @@ importers:
      rxjs:
        specifier: ^7.8.1
        version: 7.8.1
+      sanitize-html:
+        specifier: ^2.14.0
+        version: 2.14.0
      sharp:
        specifier: ^0.33.5
        version: 0.33.5
@ -540,6 +543,9 @@ importers:
      '@types/retry':
        specifier: ^0.12.5
        version: 0.12.5
+      '@types/sanitize-html':
+        specifier: ^2.13.0
+        version: 2.13.0
      '@types/webfontloader':
        specifier: ^1.6.38
        version: 1.6.38
@ -4462,6 +4468,9 @@ packages:
  '@types/retry@0.12.5':
    resolution: {integrity: sha512-3xSjTp3v03X/lSQLkczaN9UIEwJMoMCA1+Nb5HfbJEQWogdeQIyVtTvxPXDQjZ5zws8rFQfVfRdz03ARihPJgw==}

+  '@types/sanitize-html@2.13.0':
+    resolution: {integrity: sha512-X31WxbvW9TjIhZZNyNBZ/p5ax4ti7qsNDBDEnH4zAgmEh35YnFD1UiS6z9Cd34kKm0LslFW0KPmTQzu/oGtsqQ==}
+
  '@types/semver@7.5.8':
    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}

@ -8892,6 +8901,9 @@ packages:
    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
    engines: {node: '>=0.10.0'}

+  parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+
  parse5-htmlparser2-tree-adapter@7.0.0:
    resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}

@ -10003,6 +10015,9 @@ packages:
  safer-buffer@2.1.2:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}

+  sanitize-html@2.14.0:
+    resolution: {integrity: sha512-CafX+IUPxZshXqqRaG9ZClSlfPVjSxI0td7n07hk8QO2oO+9JDnlcL8iM8TWeOXOIBFgIOx6zioTzM53AOMn3g==}
+
  sass-loader@12.6.0:
    resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==}
    engines: {node: '>= 12.13.0'}
@ -16235,6 +16250,10 @@ snapshots:

  '@types/retry@0.12.5': {}

+  '@types/sanitize-html@2.13.0':
+    dependencies:
+      htmlparser2: 8.0.2
+
  '@types/semver@7.5.8': {}

  '@types/send@0.17.4':
@ -19496,7 +19515,6 @@ snapshots:
      domhandler: 5.0.3
      domutils: 3.1.0
      entities: 4.5.0
-    optional: true

  htmlparser2@9.1.0:
    dependencies:
@ -21928,6 +21946,8 @@ snapshots:

  parse-passwd@1.0.0: {}

+  parse-srcset@1.0.2: {}
+
  parse5-htmlparser2-tree-adapter@7.0.0:
    dependencies:
      domhandler: 5.0.3
@ -23096,6 +23116,15 @@ snapshots:

  safer-buffer@2.1.2: {}

+  sanitize-html@2.14.0:
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.5.1
+
  sass-loader@12.6.0(sass@1.71.1)(webpack@5.97.1(@swc/core@1.10.7(@swc/helpers@0.5.15))):
    dependencies:
      klona: 2.0.6
--- a/tools/compose/development.yml
+++ b/tools/compose/development.yml
@ -52,16 +52,16 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    restart: unless-stopped
    ports:
      - ${CHROME_PORT:-8080}:3000
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: ${CHROME_TOKEN:-chrome_token}
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "localhost"
+      PROXY_PORT: ${CHROME_PORT:-8080}
+      PROXY_SSL: "false"

 volumes:
  minio_data:
--- a/tools/compose/nginx-proxy-manager.yml
+++ b/tools/compose/nginx-proxy-manager.yml
@ -39,14 +39,14 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    restart: unless-stopped
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "printer.example.com"
+      PROXY_PORT: 443
+      PROXY_SSL: "true"

  app:
    image: amruthpillai/reactive-resume:latest
--- a/tools/compose/simple.yml
+++ b/tools/compose/simple.yml
@ -34,16 +34,16 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    restart: unless-stopped
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "chrome"
+      PROXY_PORT: 3000
+      PROXY_SSL: "false"

  app:
    image: amruthpillai/reactive-resume:latest
--- a/tools/compose/swarm.yml
+++ b/tools/compose/swarm.yml
@ -50,15 +50,15 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    networks:
      - reactive_resume_network
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "printer.example.com"
+      PROXY_PORT: 443
+      PROXY_SSL: "true"
    deploy:
      replicas: 2
      restart_policy:
--- a/tools/compose/traefik-secure.yml
+++ b/tools/compose/traefik-secure.yml
@ -41,14 +41,14 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    restart: unless-stopped
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "printer.example.com"
+      PROXY_PORT: 443
+      PROXY_SSL: "true"
    labels:
      - traefik.enable=true
      - traefik.http.routers.printer.rule=Host(`printer.example.com`)
--- a/tools/compose/traefik.yml
+++ b/tools/compose/traefik.yml
@ -39,14 +39,14 @@ services:

  # Chrome Browser (for printing and previews)
  chrome:
-    image: ghcr.io/browserless/chromium:v2.18.0 # Upgrading to newer versions causes issues
+    image: ghcr.io/browserless/chromium:latest
    restart: unless-stopped
    environment:
-      TIMEOUT: 10000
-      CONCURRENT: 10
+      HEALTH: "true"
      TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: "true"
-      PRE_REQUEST_HEALTH_CHECK: "true"
+      PROXY_HOST: "printer.example.com"
+      PROXY_PORT: 80
+      PROXY_SSL: "false"
    labels:
      - traefik.enable=true
      - traefik.http.routers.printer.rule=Host(`printer.example.com`)