feat(security): add XSS sanitization and security headers by kelvinkipruto · Pull Request #1455 · CodeForAfrica/ui

kelvinkipruto · 2026-04-15T11:07:31Z

Description

Sanitize user-provided embed HTML with xss library
Add Content-Security-Policy and other security headers
Normalize CORS/CSRF origins and set default allowed origin
Update HelplineCard, RowCard, and ActionBanner components to use sanitized embed code

Fixes # (issue)

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Screenshots

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation

- Sanitize user-provided embed HTML with xss library - Add Content-Security-Policy and other security headers - Normalize CORS/CSRF origins and set default allowed origin - Update HelplineCard, RowCard, and ActionBanner components to use sanitized embed code

kilemensi · 2026-04-15T14:14:01Z

It's cool to sanitize @kelvinkipruto if it's not a lot of work. Remember, we're not getting content from end users i.e. the web like reddit. We're rendering content from a CMS managed and reviewed by trusted content editors.

kelvinkipruto · 2026-04-21T06:49:43Z

@codex @claude Review

kilemensi · 2026-04-21T06:51:35Z

Remember, we're not getting content from end users i.e. the web like reddit. We're rendering content from a CMS managed and reviewed by trusted content editors.

My question still remains @kelvinkipruto , why go through all of this if the content comes from our CMS which we have full control of? The content doesn't come from the wild web out there.

The xss library is no longer needed as we rely on CSP headers for security. This removes the dependency, the sanitizeEmbedHtml utility, and updates components to use raw embed code. Also makes HSTS header opt-in via environment variable to support HTTP-only preview deployments.

kelvinkipruto · 2026-04-21T08:55:03Z

@claude @codex review

refactor(security): update CSP comment for clarity chore(deps): remove unused xss dependency and update lockfile

kelvinkipruto · 2026-04-21T10:10:10Z

@codex @claude Review

kilemensi

LGTM

May be we should links/description (one line) for each security setting we're doing so that it's easier to know why the settings are the way they are?

kilemensi · 2026-04-21T13:39:51Z

      maxWidth={false}
      onClose={onClose}
-      open={Boolean(embedCode && open)}
+      open={Boolean(hasEmbed && open)}


Isn't this used inside HelplineCard and we've already checked embedCode, etc. there?

kilemensi · 2026-04-21T13:42:14Z

+    `script-src ${scriptSrc.join(" ")}`,
+    "style-src 'self' 'unsafe-inline' https:",


Aren't script-src and style-src just the same value?

kilemensi · 2026-04-21T13:46:44Z

+    // we are ready to harden `script-src` further.
+    `script-src ${scriptSrc.join(" ")}`,
+    "style-src 'self' 'unsafe-inline' https:",
+  ].join("; ");


Why not just use

` ...; ...; `

on the whole thing instead of

[ '...', '...', ].join('; ')

?

kilemensi · 2026-04-21T13:48:25Z

+}
+
+function isExplicitlyEnabled(value) {
+  return ["1", "true", "yes"].includes(value?.trim()?.toLowerCase());


Lets just use true/false... that's what all other env vars use.

kilemensi · 2026-04-21T13:49:01Z

+    },
+  ];
+
+  if (nodeEnv === "production" && enableHsts) {


Don't you have isProduction already at the top?

kilemensi · 2026-04-21T13:58:39Z


 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const defaultAllowedOrigin = site.url.replace(/\/+$/, "");


Suggested change

const defaultAllowedOrigin = site.url.replace(/\/+$/, "");

const serverUrl = normalizeOrigins(site.url);

I think serverUrl is much clearer than defaultAllowedOrigin

Use the created normalizeOrigin to trim trailing / (should it be normalize or normalise)?

kilemensi · 2026-04-21T14:03:27Z

-  process.env.PAYLOAD_CSRF?.split(",")
-    .map((d) => d.trim())
-    .filter(Boolean) ?? [];
+const cors = normalizeOrigins(process.env.PAYLOAD_CORS);


May be:

Suggested change

const cors = normalizeOrigins(process.env.PAYLOAD_CORS);

const cors = normalizeOrigins(process.env.PAYLOAD_CORS?.trim() || serverUrl);

So that there is no need to check for if the return array is empty later on?

kilemensi · 2026-04-21T14:06:07Z

Please update the title / description as we're no longer doing XSS @kelvinkipruto

kelvinkipruto added 2 commits April 16, 2026 10:10

Update tests

0cf03fd

Update Snapshots

cc43b3b

kelvinkipruto marked this pull request as ready for review April 17, 2026 12:44

kelvinkipruto added 3 commits April 17, 2026 15:45

Merge branch 'main' into ft/security-fixes

46815c4

Merge branch 'main' into ft/security-fixes

1f9097b

Merge branch 'main' into ft/security-fixes

a99adb6

kelvinkipruto requested review from kilemensi and koechkevin April 21, 2026 06:49

This comment was marked as resolved.

Sign in to view

fix(helpline): treat whitespace-only embed code as empty

50c959d

refactor(security): update CSP comment for clarity chore(deps): remove unused xss dependency and update lockfile

This comment was marked as resolved.

Sign in to view

kilemensi approved these changes Apr 21, 2026

View reviewed changes

koechkevin approved these changes Apr 22, 2026

View reviewed changes

		`script-src ${scriptSrc.join(" ")}`,
		"style-src 'self' 'unsafe-inline' https:",

	const defaultAllowedOrigin = site.url.replace(/\/+$/, "");
	const serverUrl = normalizeOrigins(site.url);

	const cors = normalizeOrigins(process.env.PAYLOAD_CORS);
	const cors = normalizeOrigins(process.env.PAYLOAD_CORS?.trim() \|\| serverUrl);

Conversation

kelvinkipruto commented Apr 15, 2026

Description

Type of change

Screenshots

Checklist:

Uh oh!

kilemensi commented Apr 15, 2026

Uh oh!

kelvinkipruto commented Apr 21, 2026

Uh oh!

This comment was marked as resolved.

kilemensi commented Apr 21, 2026

Uh oh!

This comment was marked as resolved.

Uh oh!

kelvinkipruto commented Apr 21, 2026

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

kelvinkipruto commented Apr 21, 2026

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

kilemensi left a comment

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kilemensi commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants