XSS validator returns 400 for valid rich-text JSON payload in POST body

[kouts]

Environment

- Operating System: Linux
- Node Version:     v24.14.0
- Nuxt Version:     4.2.1
- CLI Version:      3.30.0
- Nitro Version:    2.12.9
- Package Manager:  yarn@1.22.19
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -

Nuxt Security Version

v2.6.0

Default setup used?

Yes, the bug happens even if the security option is not customized

Security options

defineNuxtConfig({
  security: {
    xssValidator: {
      methods: ['POST'],
    },
  },
})

Reproduction

https://github.com/kouts/nuxt-security/tree/xss_issue_reproduction

Description

• xssValidator rejects a POST JSON payload that contains rich-text-like HTML, even when payload is expected application content.
• In the reproduction branch, test test/xssValidator.richTextFalsePositive.test.ts sends:
  • POST /api/rich-text
  • body: {"description":"<p style=\"text-align:center\">hello</p>"}
• Expected: 200 OK (payload accepted by endpoint; app-level sanitization can handle content).
• Actual: 400 Bad Request from middleware.
• Root behavior appears to come from validating JSON.stringify(body) as a whole string and failing on any transformed output.

Additional context

I found this while adding a new tRPC route in my Nuxt app that accepts content from a WYSIWYG editor. The route payload includes rich-text HTML (for example: {"description":"<p style="text-align:center">hello</p>"}).

With nuxt-security XSS validator enabled, the request is rejected with 400 Bad Request, even though this is expected editor content that I sanitize in the app layer before storing/rendering.

As a temporary workaround, I had to manually exclude the affected tRPC endpoints from xssValidator in route rules and handle sanitization myself in the route logic. I opened this issue because the middleware behavior is unexpectedly blocking valid rich-text JSON payloads and forced route-level exclusions in a normal editor + API flow.

Logs

❯ test/xssValidator.richTextFalsePositive.test.ts (1 test | 1 failed)
× allows a rich-text-like JSON payload sent to POST endpoints

AssertionError: expected 400 to be 200 // Object.is equality
- Expected: 200
+ Received: 400

[Baroshem]

Hey @kouts thanks for reporting this issue. And also for spending the time to create a reproduction.

The thing is, this rich text you added in the reproduction is not accepted by the underlying xss package which you can check out here https://jsxss.com/en/try.html.

Maybe this would be an opportunity to introduce a new XSS sanitization middleware with https://github.com/kkomelin/isomorphic-dompurify?

Would you be interested in contributing? I can provide all help needed :)

[kouts]

Hey @Baroshem thanks for taking a look at this issue, I opened a PR with a simpler fix that keeps xss instead of swapping it out: #736

The issue was that the middleware was comparing the sanitized output to the original input and rejecting on any difference at all. So a harmless rich text like e.g. <p style="text-align:center"> got blocked just because the inline style was stripped, even though there is nothing malicious about it.

The fix checks for actual dangerous patterns using own xss package hooks: unrecognized tags, event handlers like onclick, and dangerous protocols like javascript:. It no longer checks "did anything change?". Rich text passes through fine and real XSS is still caught.

I also noticed the middleware had a check for statusMessage: "Bad Request" that would skip validation. Not sure why it was there, but since that field is user controlled it was a straight bypass. Fixed that too.

Let me know what you think 🙏