Skip to content

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

Open
ReCoN-96 wants to merge 1 commit into
nuxt:v4from
ReCoN-96:fix/spa-colors-plugin-csp
Open

fix(colors): remove inline script in Vue SPA mode for strict CSP#6577
ReCoN-96 wants to merge 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

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

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 89f1938c-2eb5-4dfa-b9f8-a6dc975f0c2a

📥 Commits

Reviewing files that changed from the base of the PR and between 8c43397 and 9943239.

📒 Files selected for processing (2)
  • src/runtime/plugins/colors.ts
  • src/runtime/vue/stubs/base.ts
📝 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
Title check ✅ Passed The title clearly and specifically describes the main change: fixing CSP violations by removing an inline script from the colors plugin in Vue SPA mode.
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.

✏️ 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@benjamincanac benjamincanac Awaiting requested review from benjamincanac benjamincanac is a code owner

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

1 participant

@ReCoN-96