Skip to content

SSR nonce injection error: element.replace is not a function with non-string HTML elements #564

@lawren

Description

@lawren

Version

nuxt-security: v2.1.2
nuxt: v3.14.1592

Steps to reproduce

  1. Set up a Nuxt application with Nuxt Security enabled and a Content Security Policy (CSP) that includes a nonce for scripts, styles, and links.
  2. Add PrimeVue to the project and use a component like or any other PrimeVue component.
  3. Run the application in SSR mode (npm run dev or equivalent).

What is Expected?

The application should render properly in SSR mode, with nonce attributes applied to all script, style, and link tags without errors.

What is actually happening?

An error occurs during the rendering process:

element.replace is not a function

This happens because nuxt-security’s cspSsrNonce.ts script assumes all elements in html[section] are strings, but some elements injected by PrimeVue (or other third-party libraries) may not be strings, causing the replace method to fail.

An argument could be made that this should be fixed on PrimeVue's side, but I figured extra type security doesn't hurt here, and it seems the quickest path to getting everything working again.

See related issue reported on PrimeVue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions