Back to skill

Security audit

React Best Practices

Security checks for vulnerabilities and agentic risk

Overview

This is mostly a React performance guidance skill, but it teaches a few unsafe patterns involving session cookies, inline scripts, caching, and mutable install commands.

Review before installing. The skill is not malicious, but do not blindly apply its examples: avoid logging raw session cookies, add strict XSS/CSP guardrails before using inline scripts, scope cross-request caches by tenant/user/auth context, and pin any npx or GitHub install commands to reviewed versions or commits.

Vulnerability Patterns
  • Insecure DependenciesIntroduces malicious components through unsafe dependency sources
  • Insecure Skill Coding PracticesFinds exploitable flaws such as hardcoded secrets or command injection
  • Skill Instruction HijackingAlters the agent's session goals or safety constraints when the skill loads
  • Agent Memory PoisoningWrites attacker-controlled rules into memory that affect later sessions
  • Remote Payload Retrieval and ExecutionFetches external code whose behavior can change after review
Findings (2)

T09 · Insecure Skill Coding Practices

Error
Location
rules/server-after-nonblocking.md:41
Finding
Raw Session Credential Passed to Logging Infrastructure<![CDATA[ ## Vulnerability Details **File Location**: `rules/server-after-nonblocking.md:41-49` and duplicated in `AGENTS.md:998-1006` **Vulnerability Type**: Sensitive credential exposure through logging **Risk Level**: High ### Vulnerable Code ```tsx // Log after response is sent after(async () => { const userAgent = (await headers()).get('user-agent') || 'unknown' const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous' logUserAction({ sessionCookie, userAgent }) }) ``` ### Technical Analysis The recommended implementation reads the complete value of the `session-id` cookie and passes it to `logUserAction`. A session cookie is normally a bearer credential: possession of a valid value may be sufficient to impersonate the associated user. Logging systems frequently have broader access controls and longer retention periods than authentication systems. They may also forward records to external analytics, observability, archival, or support platforms. Passing the raw session credential into an unspecified logging function therefore creates an unnecessary credential-disclosure path. The behavior is not required to demonstrate the documented use of Next.js `after()`. A non-secret event identifier, authenticated user identifier, or redacted correlation value would provide adequate logging context without exposing the session token. ### Attack Path 1. An application developer adopts the documented “correct” example. 2. The application reads the raw `session-id` cookie during a request. 3. `logUserAction` stores or forwards the session value to a log or analytics system. 4. An attacker obtains access to those records through a compromised logging account, overly broad employee permissions, an exported support bundle, a log injection flaw, or a breached downstream provider. 5. The attacker extracts a session value that has not expired or been revoked. 6. The attacker replays the cookie against the application and impersonates the vi ...[truncated 705 chars]
Remediation
<![CDATA[ ## Remediation Suggestions - Remove the session cookie from all logging and analytics payloads. - Replace it with a non-secret identifier, such as: - An internally generated event or request ID. - A stable user ID that is safe under the application’s privacy policy. - A keyed HMAC-derived pseudonymous identifier when cross-event correlation is necessary. - Do not use an ordinary unkeyed hash of the token as a replacement, because predictable or leaked token values may still be correlated. - Configure centralized log redaction for cookie names, `Authorization` headers, access tokens, refresh tokens, API keys, and session identifiers. - Apply least-privilege access controls and short retention periods to logs. - Document whether logging data is forwarded to third parties and prohibit credentials from entering those systems. - Add automated tests or static-analysis checks that reject sensitive fields in logging calls. A safer example is: ```tsx after(async () => { const userAgent = (await headers()).get('user-agent') || 'unknown' const requestId = crypto.randomUUID() await logUserAction({ requestId, userAgent }) }) ``` ]]>

T08 · Insecure Dependencies

Warning
Location
README.md:28
Finding
Unpinned Third-Party Code Download and Execution Through npx<![CDATA[ ## Vulnerability Details **File Location**: `README.md:28-34`, `SKILL.md:23`, and `rules/rendering-svg-precision.md:27` **Vulnerability Type**: Mutable and unpinned dependency execution **Risk Level**: Medium ### Vulnerable Code From `README.md`: ```bash npx add https://github.com/wpank/ai/tree/main/skills/frontend/react-best-practices ``` ```bash npx clawhub@latest install react-best-practices ``` From `SKILL.md`: ```bash npx clawhub@latest install react-best-practices ``` From `rules/rendering-svg-precision.md`: ```bash npx svgo --precision=1 --multipass icon.svg ``` ### Technical Analysis The documented `npx` commands can download and execute third-party package code with the current user’s privileges. The commands do not resolve dependencies to immutable, reviewed artifacts: - `clawhub@latest` explicitly follows a mutable package tag. - The GitHub URL references the mutable `main` branch rather than an immutable commit. - `npx svgo` does not specify an exact package version. As a result, the code executed when a user follows these instructions can differ from the code that existed when the Skill was audited. Package lifecycle scripts, command-line entry points, transitive dependencies, or altered upstream repository content may execute locally. No evidence was found that the current upstream packages are malicious. The vulnerability is the absence of version and integrity controls, which creates a supply-chain attack opportunity. ### Attack Path 1. An attacker compromises an upstream package maintainer, registry account, release process, transitive dependency, or the referenced GitHub branch. 2. The attacker publishes altered code under the `latest` tag, an unpinned package resolution, or the mutable `main` branch. 3. A user follows the installation or optimization command from the Skill documentation. 4. `npx` retrieves the attacker-controlled version and runs its command-line code or lifecycle behavior. 5. The malicious code execut ...[truncated 767 chars]
Remediation
<![CDATA[ ## Remediation Suggestions - Replace `@latest` and unversioned package references with exact reviewed versions. - Reference GitHub-hosted content by an immutable commit hash rather than a branch. - Use package-manager lockfiles and integrity metadata where applicable. - Verify package provenance, signatures, and checksums before execution. - Prefer locally installed, reviewed development dependencies over ad hoc `npx` downloads. - Use `npx --no-install` when the required binary is expected to be installed locally. - Review lifecycle scripts and transitive dependencies before approving package upgrades. - Execute unavoidable third-party tooling in a restricted container or sandbox without production credentials, SSH agents, sensitive environment variables, or unnecessary filesystem access. - Establish an explicit upgrade process so new upstream versions are reviewed before the documented pin is changed. Examples of safer versioning patterns are: ```bash npx clawhub@<reviewed-exact-version> install react-best-practices npx svgo@<reviewed-exact-version> --precision=1 --multipass icon.svg ``` For GitHub installation, use an immutable reviewed commit: ```bash npx add https://github.com/wpank/ai/tree/<reviewed-commit-hash>/skills/frontend/react-best-practices ``` ]]>
Vulnerability Patterns
  • Data ExfiltrationExternal Transmission, Env Variable Harvesting, File System Enumeration
  • Privilege EscalationExcessive Permissions, Sudo/Root Execution, Credential Access
  • Excessive AgencyUnrestricted Tool Access, Autonomous Decision Making, Scope Creep
  • Output HandlingUnvalidated Output Injection, Cross-Context Output, Unbounded Output
  • Rogue AgentSelf-Modification, Session Persistence
Findings (17)

Unvalidated Output Injection

High
Category
Output Handling
Content
{children}
      </div>
      <script
        dangerouslySetInnerHTML={{
          __html: `
            (function() {
              try {
Confidence
97% confidence
Finding
`dangerouslySetInnerHTML` is a well-known dangerous sink, and here it is used to inject executable JavaScript into a `<script>` tag. Even though the sample currently reads only from `localStorage`, the pattern teaches agents to emit raw inline scripts, which can become an immediate XSS primitive if later modified to include dynamic data or copied into contexts with untrusted input.

Unvalidated Output Injection

High
Category
Output Handling
Content
{children}
      </div>
      <script
        dangerouslySetInnerHTML={{
          __html: `
            (function() {
              try {
Confidence
65% confidence
Finding
Model output is used without validation or sanitization. Unvalidated output injected into downstream contexts (SQL, shell, HTML) enables injection attacks and arbitrary code execution.

Context-Inappropriate Capability

Medium
Confidence
88% confidence
Finding
The manifest frames this skill as performance optimization guidance, but this example introduces collection of `session-id` cookies and user-agent values for logging. Teaching agents to add request-data collection and audit logging goes beyond pure React/Next.js performance advice and adds privacy/security-relevant behavior not implied by the stated purpose.

Missing User Warnings

Medium
Confidence
94% confidence
Finding
The documentation promotes inline script injection for hydration fixes without any warning about XSS, CSP, or safe encoding constraints. Because the skill is intended for agents and LLMs to generate or refactor code automatically, omission of those guardrails materially increases the chance that unsafe script construction will be reproduced in downstream applications.

Context-Inappropriate Capability

Medium
Confidence
91% confidence
Finding
The guidance explicitly recommends injecting inline script via `dangerouslySetInnerHTML` as a general hydration-fix pattern. In an agent-oriented skill, this is risky because it can normalize code generation that bypasses React's safer defaults and can easily become an XSS sink if any future value interpolated into the script is user-controlled or insufficiently encoded.

Rp1

Medium
Category
MCP Rug Pull
Confidence
87% confidence
Finding
The README instructs users to execute a remote package/tool via `npx add` without pinning a specific immutable version or commit. That creates a supply-chain risk: future changes to the referenced package or installer path could cause different code to run than what was originally reviewed.

Rp1

Medium
Category
MCP Rug Pull
Confidence
91% confidence
Finding
Using `npx clawhub@latest install react-best-practices` pulls and executes the latest available code, which may change over time and bypass prior review. If the upstream package is compromised or a malicious release is published, users following the README may execute attacker-controlled code.

Session Persistence

Medium
Category
Rogue Agent
Content
From your project root:

```bash
mkdir -p .cursor/skills
cp -r ~/.ai-skills/skills/frontend/react-best-practices .cursor/skills/react-best-practices
```
Confidence
60% confidence
Finding
Skill establishes unauthorized persistence across sessions via cron jobs, startup scripts, or state files. Session persistence allows an attacker to maintain access beyond the current interaction.

Skill Enumeration

Medium
Category
Agent Snooping
Content
From your project root:

```bash
mkdir -p .claude/skills
cp -r ~/.ai-skills/skills/frontend/react-best-practices .claude/skills/react-best-practices
```
Confidence
85% confidence
Finding
Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.

Skill Enumeration

Medium
Category
Agent Snooping
Content
#### Claude Code (global)

```bash
mkdir -p ~/.claude/skills
cp -r ~/.ai-skills/skills/frontend/react-best-practices ~/.claude/skills/react-best-practices
```
Confidence
85% confidence
Finding
Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.

External Model or Provider Selection

Medium
Category
Excessive Agency
Content
---
name: react-best-practices
model: standard
version: 1.0.0
description: >
  React and Next.js performance optimization guidelines from Vercel Engineering.
Confidence
90% confidence
Finding
Skill selects an external model or provider that may use a different account or billing plan than the operator expects. Undisclosed model switches can cause unexpected cost or quota consumption.

Rp1

Medium
Category
MCP Rug Pull
Confidence
92% confidence
Finding
The installation command uses `npx clawhub@latest install react-best-practices`, which pulls and executes a package at install time with a floating `latest` tag. This creates a supply-chain risk because future package updates could introduce malicious or compromised code that users would execute implicitly.

Missing User Warnings

Medium
Confidence
88% confidence
Finding
The guidance explicitly recommends an inline script via dangerouslySetInnerHTML that reads from client storage and mutates the DOM, but it does not mention the security tradeoffs. While the shown snippet uses a fixed script body rather than interpolating attacker-controlled data, normalizing this pattern can weaken CSP, encourage unsafe inline scripting, and lead developers to extend it unsafely with untrusted values from localStorage or cookies.

Rp1

Medium
Category
MCP Rug Pull
Confidence
70% confidence
Finding
npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.

Rp1

Medium
Category
MCP Rug Pull
Confidence
70% confidence
Finding
npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.

Missing User Warnings

Medium
Confidence
88% confidence
Finding
This markdown file explicitly recommends non-blocking logging, analytics tracking, audit logging, and notifications, and the example collects `user-agent` and a `session-id` cookie. The description does not include any warning about privacy implications, user data handling, or the need to disclose such collection when implementing the pattern.

Missing User Warnings

Medium
Confidence
93% confidence
Finding
The guidance recommends process-local cross-request caching of user records keyed only by `id` and presents it as a general best practice without warning that shared in-memory caches can leak data across tenants, users, auth contexts, or permission changes if the cached object is not scoped correctly. It also omits discussion of staleness and invalidation, which can cause users to receive outdated or unauthorized data after account or authorization changes.

Static analysis

No suspicious patterns detected.