frameguard

library0.1.1jsnpmunverified

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).

auth-security web-framework

npm install frameguard

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FRAMEGUARD

frameguard

auth-securityjavascriptv0.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

frameguard

✓ import frameguard from 'frameguard';

✗ const frameguard = require('frameguard').default;

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');`

frameguard

✓ const frameguard = require('frameguard');

✗ import frameguard from 'frameguard';

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.

FrameguardOptions

✓ import type { FrameguardOptions } from 'frameguard';

✗ import { FrameguardOptions } from 'frameguard';

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.

Demonstrates applying `frameguard` middleware to an Express.js application with different `X-Frame-Options` actions: `deny` and `sameorigin`, and the default behavior.

import express from 'express'; import frameguard from 'frameguard'; const app = express(); const port = 3000; // Option 1: Prevent all framing (most secure default) app.use('/deny', frameguard({ action: 'deny' })); // Option 2: Allow framing only from the same origin app.use('/sameorigin', frameguard({ action: 'sameorigin' })); // Option 3: Default to sameorigin (if no action specified) app.use('/default', frameguard()); app.get('/deny', (req, res) => { res.send('This page cannot be framed.'); }); app.get('/sameorigin', (req, res) => { res.send('This page can only be framed by same origin.'); }); app.get('/default', (req, res) => { res.send('This page defaults to same origin framing.'); }); app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); console.log('Try visiting http://localhost:3000/deny in a frame from another origin.'); });

Debug

Known issues

gotchaThe `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.

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'] } }));`

affects: >=1.0.0

breakingThe `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.

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.

affects: >=1.0.0

breakingWhen 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.

fix

Ensure `frameguard` is installed (`npm install frameguard`) and then explicitly import and apply it: `import frameguard from 'frameguard'; app.use(frameguard());`

affects: >=5.0.0 of Helmet

gotchaThe 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.

fix

If your application should never be framed, explicitly set `action: 'deny'` (e.g., `app.use(frameguard({ action: 'deny' }));`) for maximum protection against clickjacking.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: frameguard is not a function

Attempting to call `require('frameguard')()` directly without resolving the middleware function, or incorrect ESM default import.

fix

For CommonJS, use `const frameguard = require('frameguard'); app.use(frameguard());`. For ESM, use `import frameguard from 'frameguard'; app.use(frameguard());`.

Refused to display 'http://example.com/page' in a frame because it set 'X-Frame-Options' to 'DENY'.

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.

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.

Header 'X-Frame-Options' not found in response headers.

The `frameguard` middleware was not correctly applied to the Express app or was overridden by another middleware.

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.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

16 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/helmetjs/helmet ↗

packagehttps://www.npmjs.com/package/frameguard ↗

homepagehttps://helmetjs.github.io ↗