{"id":17100,"library":"frameguard","title":"Frameguard: X-Frame-Options Middleware","description":"Frameguard is an Express.js middleware designed to enhance web application security by setting the `X-Frame-Options` HTTP header. This header primarily helps mitigate clickjacking attacks by restricting whether a browser can render a page in an `<frame>`, `<iframe>`, `<embed>`, or `<object>` tag. The current stable version is 4.0.0, and its release cadence is generally tied to the broader Helmet.js project, of which it is a part, receiving updates alongside Helmet's release cycle. While the `X-Frame-Options` header is largely superseded by the more robust `frame-ancestors` Content Security Policy (CSP) directive in modern browsers, Frameguard remains valuable for providing a layer of protection against clickjacking in older browser environments that may not fully support CSP. It differentiates itself by offering a simple, focused implementation for the most common and secure directives: `DENY` (preventing any framing) and `SAMEORIGIN` (allowing framing only from the same origin).","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"git://github.com/helmetjs/helmet","tags":["javascript","express","security","x-frame-options","clickjack","typescript"],"install":[{"cmd":"npm install frameguard","lang":"bash","label":"npm"},{"cmd":"yarn add frameguard","lang":"bash","label":"yarn"},{"cmd":"pnpm add frameguard","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While v4 primarily shows CommonJS examples in README, for TypeScript or modern ESM projects, default import is typical. For CJS, use `const frameguard = require('frameguard');`","wrong":"const frameguard = require('frameguard').default;","symbol":"frameguard","correct":"import frameguard from 'frameguard';"},{"note":"For CommonJS environments (typical for Node.js < v12 or projects not configured for ESM), use `require`. Directly importing in ESM will fail if the package is not dual-module.","wrong":"import frameguard from 'frameguard';","symbol":"frameguard","correct":"const frameguard = require('frameguard');"},{"note":"TypeScript type imports use `import type` to ensure they are stripped from the JavaScript output, preventing runtime errors if the type is not also an exported value.","wrong":"import { FrameguardOptions } from 'frameguard';","symbol":"FrameguardOptions","correct":"import type { FrameguardOptions } from 'frameguard';"}],"quickstart":{"code":"import express from 'express';\nimport frameguard from 'frameguard';\n\nconst app = express();\nconst port = 3000;\n\n// Option 1: Prevent all framing (most secure default)\napp.use('/deny', frameguard({ action: 'deny' }));\n\n// Option 2: Allow framing only from the same origin\napp.use('/sameorigin', frameguard({ action: 'sameorigin' }));\n\n// Option 3: Default to sameorigin (if no action specified)\napp.use('/default', frameguard());\n\napp.get('/deny', (req, res) => {\n  res.send('This page cannot be framed.');\n});\n\napp.get('/sameorigin', (req, res) => {\n  res.send('This page can only be framed by same origin.');\n});\n\napp.get('/default', (req, res) => {\n  res.send('This page defaults to same origin framing.');\n});\n\napp.listen(port, () => {\n  console.log(`Server listening at http://localhost:${port}`);\n  console.log('Try visiting http://localhost:3000/deny in a frame from another origin.');\n});","lang":"typescript","description":"Demonstrates applying `frameguard` middleware to an Express.js application with different `X-Frame-Options` actions: `deny` and `sameorigin`, and the default behavior."},"warnings":[{"fix":"Consider implementing a Content Security Policy with the `frame-ancestors` directive for modern browser protection. Example: `app.use(helmet.contentSecurityPolicy({ directives: { frameAncestors: [\"'self'\", 'https://trusted.com'] } }));`","message":"The `X-Frame-Options` header is largely superseded by the more modern and flexible `Content-Security-Policy: frame-ancestors` directive. While `frameguard` is useful for older browsers, for comprehensive security, `frame-ancestors` should be preferred or used in conjunction.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If `ALLOW-FROM` functionality is required, you must manually set the `X-Frame-Options` header or use a `Content-Security-Policy` with `frame-ancestors` for more granular control over framing sources.","message":"The `ALLOW-FROM` directive for `X-Frame-Options` is not supported by this middleware. Attempting to use it will result in an invalid header or no header being set, compromising expected security.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `frameguard` is installed (`npm install frameguard`) and then explicitly import and apply it: `import frameguard from 'frameguard'; app.use(frameguard());`","message":"When migrating from Helmet v4 to v5, `frameguard` is no longer included by default as a Helmet middleware. You must explicitly import and use `frameguard` as a standalone middleware.","severity":"breaking","affected_versions":">=5.0.0 of Helmet"},{"fix":"If your application should never be framed, explicitly set `action: 'deny'` (e.g., `app.use(frameguard({ action: 'deny' }));`) for maximum protection against clickjacking.","message":"The default action for `frameguard()` when no `action` option is provided is `sameorigin`. This means pages will be frameable by content from the same origin, which might not be the most secure default for all applications.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"For CommonJS, use `const frameguard = require('frameguard'); app.use(frameguard());`. For ESM, use `import frameguard from 'frameguard'; app.use(frameguard());`.","cause":"Attempting to call `require('frameguard')()` directly without resolving the middleware function, or incorrect ESM default import.","error":"TypeError: frameguard is not a function"},{"fix":"If you need to allow framing from the same origin, change the action to `sameorigin`: `app.use(frameguard({ action: 'sameorigin' }));`. If framing from other origins is required, consider using `Content-Security-Policy: frame-ancestors` instead.","cause":"This is not an error from the middleware but a browser security message indicating `DENY` is working as intended, potentially blocking a legitimate use case.","error":"Refused to display 'http://example.com/page' in a frame because it set 'X-Frame-Options' to 'DENY'."},{"fix":"Ensure `app.use(frameguard(...))` is called before any routes that require the header. Check for other security middleware that might be removing or conflicting with the `X-Frame-Options` header.","cause":"The `frameguard` middleware was not correctly applied to the Express app or was overridden by another middleware.","error":"Header 'X-Frame-Options' not found in response headers."}],"ecosystem":"npm","meta_description":null}