Moderate Vulnerability: PostCSS XSS Exposure via Vulnerable Dependency in Next.js

[MasterProvider]

Summary

Is this issue only happening on my end, or does it affect other users as well?

"dependencies": {
    "@next/third-parties": "^16.2.6",
    "next": "^16.2.6",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
  },
  "devDependencies": {
    "eslint": "^9",
    "eslint-config-next": "^16.2.6"
  }

# npm audit report

postcss  <8.5.10
Severity: moderate
PostCSS has XSS via Unescaped </style> in its CSS Stringify Output - https://github.com/advisories/GHSA-qx2v-qp2m-jg93
fix available via `npm audit fix --force`
Will install next@9.3.3, which is a breaking change
node_modules/postcss
  next  9.3.4-canary.0 - 16.3.0-canary.5
  Depends on vulnerable versions of postcss
  node_modules/next

2 moderate severity vulnerabilities

Additional information

No response

Example

No response

[Parisan8626]

Just so you know there's a known issue that affects pretty much everyone using Next.js between versions 9.3.4-canary.0 and 16.3.0-canary.5. The real problem is in PostCSS (<8.5.10), which sneaks in as a transitive dependency.

Just upgrade to Next.js 14.2.5 or higher. The fix is already being included in the next canary releases.

Whatever you do, don't run npm audit fix --force — seriously, don't. It'll downgrade your Next.js to version 9.3.3 and most likely break your app.

No panic though. This one's considered moderate and only messes with CSS processing during build time.

[bazhanius]

this temporary rule in package.json should help:

"overrides": {
    "postcss": "^8.5.10"
  }

[wanhei1]

This is a known issue affecting Next.js users. Here's a comprehensive summary:

The Problem

The PostCSS vulnerability (CVE) is in a transitive dependency. Even if you don't use PostCSS directly, Next.js uses it internally for CSS processing.

Immediate Fix

Add this to your package.json:

{
  "overrides": {
    "postcss": "^8.5.10"
  }
}

Then run:

npm install
npm audit  # Verify the vulnerability is resolved

For Yarn users

{
  "resolutions": {
    "postcss": "^8.5.10"
  }
}

For pnpm users

{
  "pnpm": {
    "overrides": {
      "postcss": "^8.5.10"
    }
  }
}

Verify the fix

# Check if the vulnerability persists
npm audit --audit-level=moderate

# Verify postcss version
npm ls postcss

Long-term

The Next.js team is aware of this. Watch for the next patch release which should update the PostCSS dependency automatically.

Note: This is a dev-time vulnerability (PostCSS runs during build), so production runtime risk is lower. But it's still important to patch for CI/CD security.

[Ortenzio]

There have been a few patch releases to 16.2 since this issue was raised. Will it be addressed in that minor version, or only in 16.3?

[pratik1258m]

This affects other users as well when a dependency tree includes a vulnerable version of a transitive dependency (in this case, postcss via next). Running npm audit fix --force is not recommended here because it attempts to solve it by downgrading next to a very old version (9.3.x), which will break your Next.js 16 application.

To resolve this issue, you can force the package manager to resolve postcss to a safe version (version 8.5.10 or higher) using dependency overrides in your package.json.

Depending on the package manager you use, add the following to your package.json:

1. If using npm

Add the overrides field:

"overrides": {
  "postcss": "^8.5.10"
}

2. If using pnpm

Add the pnpm.overrides field:

"pnpm": {
  "overrides": {
    "postcss": "^8.5.10"
  }
}

3. If using Yarn

Add the resolutions field:

"resolutions": {
  "postcss": "^8.5.10"
}

---

Next Steps:

After adding the override to your package.json:

1. Delete your lockfile (package-lock.json, pnpm-lock.yaml, or yarn.lock).
2. Delete the node_modules directory: rm -rf node_modules.
3. Run the install command again (e.g., npm install, pnpm install, or yarn install).
4. Run npm audit (or equivalent) to verify that the vulnerability is gone.