Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-23 05:01:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

sanitize all user inputs, fix #2172

Browse Source
This commit is contained in:
Amruth Pillai
2025-01-24 23:53:45 +01:00
parent 308a8e3ae3
commit c7ae0e94d7
29 changed files with 190 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/artboard/src/constants/helmet.ts Normal file
View File

@ -0,0 +1,5 @@
import { HelmetData } from "react-helmet-async";
export const helmetData = new HelmetData({});
export const helmetContext = helmetData.context;

8
apps/artboard/src/pages/artboard.tsx
View File

@ -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 />

13
apps/artboard/src/providers/index.tsx
View File

@ -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>
);
};

2
apps/artboard/src/router/index.tsx
View File

@ -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 />} />

4
apps/artboard/src/styles/main.css
View File

@ -8,6 +8,10 @@
@apply border-current;
}
body {
overflow: hidden;
}
#root {
@apply antialiased;
}

10
apps/artboard/src/templates/azurill.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/bronzor.tsx
View File

@ -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} />}

7
apps/artboard/src/templates/chikorita.tsx
View File

@ -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"
/>
)}

10
apps/artboard/src/templates/ditto.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/gengar.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/glalie.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/kakuna.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/leafish.tsx
View File

@ -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} />}

15
apps/artboard/src/templates/nosepass.tsx
View File

@ -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 && (

10
apps/artboard/src/templates/onyx.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/pikachu.tsx
View File

@ -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} />}

10
apps/artboard/src/templates/rhyhorn.tsx
View File

@ -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} />}