fix: skip security headers when devtools is active

[RYGRIT]

🔗 Linked issue

🧭 Context

Strict CSP and frame restrictions (such as X-Frame-Options) interfere with Nuxt DevTools' resource injection and iframe UI. This change ensures an improved developer experience without compromising security in the production environment.

📚 Description

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 30, 2026 0:50am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 30, 2026 0:50am
npmx-lunaria	Ignored		Mar 30, 2026 0:50am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

A runtime-mode guard has been added to modules/security-headers.ts that determines whether execution occurs within Nuxt DevTools dev runtime by evaluating Nuxt dev/devtools settings and the TEST environment variable. When this runtime mode is detected, the module's setup function returns early, bypassing all security header configuration including CSP meta injection and catch-all route rules header additions. Security header logic remains active in non-dev or test environments.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the context, problem, and solution: it addresses CSP and frame restriction interference with Nuxt DevTools by skipping security headers during dev runtime, which aligns with the changeset in security-headers.ts.

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 207422fc-b94f-41a9-a915-47432109451b

📥 Commits

Reviewing files that changed from the base of the PR and between b3da028 and f02eb39.

📒 Files selected for processing (1)

• modules/security-headers.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

In Nuxt module setup, what is the exact type/shape of nuxt.options.devtools (boolean vs object), and what is the recommended way to check whether DevTools is enabled when object-form config is used?

💡 Result:

In a Nuxt module's setup function, nuxt.options.devtools is an object (not a boolean). It has the shape of the DevTools module options, where the primary property to check for enabling DevTools is enabled: boolean (defaults to true). The recommended way to check whether DevTools is enabled (when object-form config is used) is: !!nuxt.options.devtools?.enabled. This handles cases where devtools might be undefined (if not explicitly set) or an object without enabled explicitly defined (falls back to default true). Examples from official docs and module source: - devtools: { enabled: true } or devtools: { enabled: false } - Full options: devtools: { enabled: true, vscode: {}, ... } Nuxt DevTools docs explicitly state "To configure Nuxt DevTools, you can pass the devtools options" and show object form with enabled. No sources show devtools as a top-level boolean in current versions (boolean shorthand was discussed in old issues but deprecated).

Citations:

• 1: https://nuxt.com/modules/devtools
• 2: https://devtools.nuxtjs.org/guide
• 3: https://www.npmjs.com/package/@nuxt/devtools
• 4: https://nuxt.com/docs/3.x/api/nuxt-config
• 5: https://devtools.nuxtjs.org/guide/getting-started
• 6: https://devtools.nuxt.com/guide/getting-started
• 7: https://devtools.nuxt.com/guide
• 8: devtools type error in nuxt config file after run the server nuxt/nuxt#21035
• 9: https://tessl.io/registry/tessl/npm-nuxt--devtools/2.6.0/files/docs/module-configuration.md

---

Line 23–24: DevTools enabled check is incomplete; does not verify the enabled property.

The current check nuxt.options.devtools !== false will be true even when devtools.enabled is explicitly false, because nuxt.options.devtools is an object. This causes security headers to be incorrectly skipped when DevTools is disabled via configuration.

Suggested fix

-    const isDevtoolsRuntime =
-      nuxt.options.dev && nuxt.options.devtools !== false && !process.env.TEST
+    const isDevtoolsRuntime =
+      nuxt.options.dev && !!nuxt.options.devtools?.enabled && !process.env.TEST