script-element cloned on client

[dirksierd]

Version

nuxt-security: 2.0.0-rc.9 nuxt: 3.13.1

Reproduction Link

https://nuxt-jsonld-test.pages.dev repo: https://github.com/dirksierd/nuxt-jsonld-test

Steps to reproduce

1. Create a basic Nuxt-app.
2. Add security module
3. Add a application/json+ld-element to the app.vue-component (with useHead)

What is Expected?

I'd expect one (1) json+ld-element.

What is actually happening?

I see one json+ld-element in the head-tag, with a nonce. I see another one without the nonce (after load).

So the gist is this: I have a json+ld element, with useHead. Without nuxt-security this works fine, but as soon as I add nuxt-security, and the element gets a nonce, in the client I see the element cloned (without the nonce). The server response is fine, but the client seems to clone it.

As soon as I, then, debug the application using a validator, the elements get duplicated too. https://validator.schema.org/#url=https%3A%2F%2Fnuxt-jsonld-test.pages.dev

[vejja]

Hey @dirksierd What is the issue that you are facing? Is there anything broken in your application?

[dirksierd]

Here's an initial screenshot of the response from the server: you'll see one ld+json-script element.

As soon as the client completes rendering I have two ld+json-script elements, see the next screenshot.

This results in duplicate entries for crawlers using these ld+json-blocks. As demonstrated in the Schema Validator: https://validator.schema.org/#url=https%3A%2F%2Fnuxt-jsonld-test.pages.dev

---

This is my issue… it seems the application/json+ld-elements are cloned, and that's not what I want. It doesn't happen without nuxt-security.

Update: the app in the repo-link in my first post is a minimal reproduction, by the way.

[vejja]

Ok understood, thanks To me it looks like useHead is having an issue when trying to deduplicate tags after hydration.

Would you mind trying the following strategies:

• add a deduping key entry to your script : see https://unhead.unjs.io/usage/guides/handling-duplicates#providing-a-key
• alternatively, if you will never have to hydrate the json+ld element on the client side, mark it as server-side only : https://unhead.unjs.io/usage/composables/use-server-head

And let me know if it works?

[dirksierd]

adding the key worked, great!

[Baroshem]

Thanks @vejja for handling it! 💚