chore: added DOMPurify to prevent xss

[Dhruwang]

What does this PR do?

Fixes 1657

How should this be tested?

Test editors

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Jan 23, 2024 4:56pm
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Jan 23, 2024 4:56pm

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/formbricks-com/components/dummyUI/HtmlBody.tsx

While the use of DOMPurify is a good step towards ensuring the security of the application, it would be beneficial to configure it to use a safe subset of HTML to further enhance security. This can be done by passing a configuration object to the sanitize function.
Create Issue
See the diff
Checkout the fix

    const clean = DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'] });

git fetch origin && git checkout -b ReviewBot/The-c-o6oaeat origin/ReviewBot/The-c-o6oaeat

packages/surveys/src/components/general/HtmlBody.tsx

While the current implementation is correct, it could be optimized by avoiding the dynamic import of DOMPurify in the useEffect hook. Dynamic imports are useful for code splitting and lazy loading, but in this case, it might be unnecessary and could lead to performance issues due to the additional network request. Consider importing DOMPurify at the top of the file instead.
Create Issue
See the diff
Checkout the fix

    import DOMPurify from 'dompurify';

git fetch origin && git checkout -b ReviewBot/The-c-ckcfpca origin/ReviewBot/The-c-ckcfpca

[review-agent-prime]

The DOMPurify.sanitize function has been configured to only allow a safe subset of HTML tags. This enhances the security of the application by preventing the execution of potentially harmful HTML code.

Suggested change

	dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlString) }}></label>
	dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'] }) }}

[review-agent-prime]

The dynamic import of DOMPurify in the useEffect hook has been replaced with a static import at the top of the file. This change optimizes the code by avoiding unnecessary network requests, improving performance.

Suggested change

	import { useEffect, useState } from "react";
	interface HtmlBodyProps {
	htmlString: string | undefined;
	questionId: string;
	}
	export default function HtmlBody({ htmlString, questionId }: HtmlBodyProps) {
	const [safeHtml, setSafeHtml] = useState("");
	useEffect(() => {
	if (htmlString) {
	import("dompurify").then((DOMPurify) => {
	setSafeHtml(DOMPurify.sanitize(htmlString));
	});
	}
	}, [htmlString]);
	export default function HtmlBody({ htmlString, questionId }: { htmlString?: string; questionId: string }) {
	if (!htmlString) return null;
	return (
	<label
	htmlFor={questionId}
	className="fb-htmlbody" // styles are in global.css
	dangerouslySetInnerHTML={{ __html: cleanHtml(htmlString) }}></label>
	dangerouslySetInnerHTML={{ __html: safeHtml }}></label>
	);
	}
	import DOMPurify from 'dompurify';
	import { useEffect, useState } from "react";
	interface HtmlBodyProps {
	htmlString: string | undefined;
	questionId: string;
	}
	export default function HtmlBody({ htmlString, questionId }: HtmlBodyProps) {
	const [safeHtml, setSafeHtml] = useState("");
	useEffect(() => {
	if (htmlString) {
	setSafeHtml(DOMPurify.sanitize(htmlString));
	}
	}, [htmlString]);
	if (!htmlString) return null;
	return (
	<label
	htmlFor={questionId}
	className="fb-htmlbody" // styles are in global.css
	dangerouslySetInnerHTML={{ __html: safeHtml }}></label>
	);
	}

[mattinannt]

@Dhruwang thank you very much for this security fix :-) just one comment:

[mattinannt]

can we use a useMemo instead?

const safeHtml = useMemo(() => DOMPurify.sanitize(htmlString), [htmlString])

[mattinannt]

@Dhruwang Did the build succeed in your testing?
I just updated the PR, merged the latest changes and fixed the merge conflicts and ran into this build error:

@formbricks/surveys:build: error during build:
@formbricks/surveys:build: Error: [vite]: Rollup failed to resolve import "dompurify" from "/Users/matthiasnannt/Developer/formbricks/packages/surveys/src/components/general/HtmlBody.tsx".
@formbricks/surveys:build: This is most likely unintended because it can break your application at runtime.
@formbricks/surveys:build: If you do want to externalize this module explicitly add it to
@formbricks/surveys:build: `build.rollupOptions.external`

Can you please take a look :-) Ideally DomPurify will be included into the bundle files of @formbricks/surveys as we will soon move on to sideload the complete package in formbricks-js

[mattinannt]

@Dhruwang thank you for making the changes 😊💪