Skip to content

fix(module): remove inline script in SPA mode for strict CSP#6577

Merged
benjamincanac merged 1 commit into
nuxt:v4from
ReCoN-96:fix/spa-colors-plugin-csp
Jun 16, 2026
Merged

fix(module): remove inline script in SPA mode for strict CSP#6577
benjamincanac merged 1 commit into
nuxt:v4from
ReCoN-96:fix/spa-colors-plugin-csp

Conversation

@ReCoN-96

@ReCoN-96 ReCoN-96 commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Replace the temporary style cleanup script with a dom:rendered hook to comply with script-src 'self' without unsafe-inline.

Summary

  • Remove the inline <script> injected by the colors plugin in Vue SPA mode (@nuxt/ui/vite + @nuxt/ui/vue-plugin), which violated strict CSP policies (script-src 'self' without unsafe-inline)
  • Clean up the temporary anti-FOUC <style data-nuxt-ui-colors> via Unhead's dom:rendered hook instead
  • Export injectHead from the Vue SPA stub so the plugin can access the head instance

Linked issues

Resolves #4976
Related to #3394 (CSP / inline styles) but does not address style-src nonce support.

Type of change

  • Bug fix

Test plan

  • Run pnpm run dev:vue and verify style#nuxt-ui-colors is present in <head>
  • Verify [data-nuxt-ui-colors] is removed after page load
  • Add a strict CSP meta (script-src 'self') in the Vue playground and confirm no CSP violation in the console
  • Confirm Nuxt SSR behavior is unchanged (SPA block does not run when serverRendered is true)

fix(colors): remove inline script in Vue SPA mode for strict CSP
9943239 
Replace the temporary style cleanup script with a dom:rendered hook
to comply with script-src 'self' without unsafe-inline.
@ReCoN-96
ReCoN-96 requested a review from benjamincanac as a code owner June 9, 2026 16:24
@github-actions github-actions Bot added the v4 #4488 label Jun 9, 2026
@coderabbitai

coderabbitai Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR refactors the Nuxt UI colors plugin to eliminate Content Security Policy violations in browser extensions. The change replaces an inline script-based removal mechanism with a hook-based approach. The @unhead/vue stubs now export injectHead, which the colors plugin imports to register a one-time dom:rendered hook. A new helper function removeTemporaryColorsStyle() queries and removes the temporary colors element marked with [data-nuxt-ui-colors] after DOM rendering completes in SPA mode.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description check ✅ Passed The description comprehensively relates to the changeset, explaining the removal of inline scripts, the dom:rendered hook replacement, and the injectHead export with linked issue references.
Linked Issues check ✅ Passed The PR addresses the requirements from #4976 by removing the CSP-violating inline script and implementing a dom:rendered hook-based cleanup approach compatible with strict CSP policies.
Out of Scope Changes check ✅ Passed All changes directly support the stated objectives: colors.ts implements the hook-based cleanup, and base.ts exports injectHead to enable this functionality with no extraneous modifications.
Title check ✅ Passed The title accurately summarizes the main change: removing an inline script in SPA mode to comply with strict CSP policies. This directly matches the changeset which removes the inline script cleanup from the colors plugin and replaces it with a hook-based approach.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-new Bot commented Jun 9, 2026

Copy link
Copy Markdown 
npm i https://pkg.pr.new/@nuxt/ui@6577

commit: 9943239

@benjamincanac benjamincanac changed the title fix(colors): remove inline script in Vue SPA mode for strict CSP fix(module): remove inline script in SPA mode for strict CSP Jun 16, 2026
@benjamincanac
benjamincanac merged commit 7225e9f into nuxt:v4 Jun 16, 2026
20 checks passed
@innocenzi innocenzi mentioned this pull request Jun 26, 2026
Closed
@benjamincanac benjamincanac mentioned this pull request Jun 29, 2026
Merged
8 tasks
@cngJo cngJo mentioned this pull request Jul 6, 2026
Closed
This was referenced Jul 21, 2026
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@benjamincanac benjamincanac benjamincanac approved these changes

Assignees

No one assigned

Labels

v4 #4488

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

use color mode in chrome extension will throw CSP error

2 participants

@ReCoN-96 @benjamincanac