CSC Design System Skills & Best Practices
CS

Security

Stop injection, secret leaks, and unsafe uploads in a government-facing application.

Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.

OWASP Top Ten

What this describes

Rules

NX-SEC-001 prohibited
Do not inject record HTML

Render strings as React children.

NX-SEC-002 required
Keep secrets out of the client and the repo

No API keys in components, rules, or examples.

NX-SEC-003 required
Validate uploads on the server

The file input accept hint is not the allow-list.

NX-SEC-004 conditional
Send people only to known relative paths

A redirect built from a query string must stay on this site.

Applies when: A route reads a next or return parameter.
Correct
return <p>{record.title}</p>;
Incorrect
return <div dangerouslySetInnerHTML={{ __html: record.title }} />;

A title that contains markup becomes HTML.

Checklist

  • No dangerouslySetInnerHTML for records.
  • No real tokens in the diff.
  • Upload rejection is a sentence, not only a red border.

AI instructions

You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Security.
Stop injection, secret leaks, and unsafe uploads in a government-facing application.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-SEC-001 [prohibited] Do not inject record HTML. Render strings as React children.
- NX-SEC-002 [required] Keep secrets out of the client and the repo. No API keys in components, rules, or examples.
- NX-SEC-003 [required] Validate uploads on the server. The file input accept hint is not the allow-list.
- NX-SEC-004 [conditional] Send people only to known relative paths. A redirect built from a query string must stay on this site.
CORRECT:
return <p>{record.title}</p>;
INCORRECT:
return <div dangerouslySetInnerHTML={{ __html: record.title }} />;
A title that contains markup becomes HTML.
CHECK:
- [ ] No dangerouslySetInnerHTML for records.
- [ ] No real tokens in the diff.
- [ ] Upload rejection is a sentence, not only a red border.
SOURCE: OWASP Top Ten https://owasp.org/www-project-top-ten/
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.