frameguard

What is frameguard?

The frameguard npm package is used to help secure your web applications by setting the X-Frame-Options header. This header is used to control whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed>, or <object>. This can help prevent clickjacking attacks.

What are frameguard's main functionalities?

Deny

This feature sets the X-Frame-Options header to 'DENY', which means the page cannot be displayed in a frame, regardless of the site attempting to do so.

const frameguard = require('frameguard');
const express = require('express');
const app = express();

app.use(frameguard({ action: 'deny' }));

app.get('/', (req, res) => {
  res.send('X-Frame-Options set to DENY');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

SameOrigin

This feature sets the X-Frame-Options header to 'SAMEORIGIN', which means the page can only be displayed in a frame on the same origin as the page itself.

const frameguard = require('frameguard');
const express = require('express');
const app = express();

app.use(frameguard({ action: 'sameorigin' }));

app.get('/', (req, res) => {
  res.send('X-Frame-Options set to SAMEORIGIN');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

AllowFrom

This feature sets the X-Frame-Options header to 'ALLOW-FROM https://example.com', which means the page can only be displayed in a frame on the specified origin.

const frameguard = require('frameguard');
const express = require('express');
const app = express();

app.use(frameguard({ action: 'allow-from', domain: 'https://example.com' }));

app.get('/', (req, res) => {
  res.send('X-Frame-Options set to ALLOW-FROM https://example.com');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Other packages similar to frameguard

helmet

Helmet is a collection of 15 smaller middleware functions that set various HTTP headers to help secure your Express.js apps. It includes frameguard as one of its middleware functions, making it a more comprehensive security solution compared to using frameguard alone.

x-frame-options

The x-frame-options package is a simple middleware for setting the X-Frame-Options header. It offers similar functionality to frameguard but is more lightweight and focused solely on the X-Frame-Options header.

README

X-Frame-Options middleware

The X-Frame-Options HTTP header restricts who can put your site in a frame which can help mitigate things like clickjacking attacks. The header has two modes: DENY and SAMEORIGIN.

This header is superseded by the frame-ancestors Content Security Policy directive but is still useful on old browsers.

If your app does not need to be framed (and most don't) you can use DENY. If your site can be in frames from the same origin, you can set it to SAMEORIGIN.

Usage:

const frameguard = require("frameguard");

// Don't allow me to be in ANY frames:
app.use(frameguard({ action: "deny" }));

// Only let me be framed by people of the same origin:
app.use(frameguard({ action: "sameorigin" }));
app.use(frameguard()); // defaults to sameorigin

A legacy action, ALLOW-FROM, is not supported by this middleware. Read more here.

Changelog

4.0.0 - 2020-08-02

See the Helmet 4 upgrade guide for help upgrading from Helmet 3.

Added

• helmet.contentSecurityPolicy:
  • If no default-src directive is supplied, an error is thrown
  • Directive lists can be any iterable, not just arrays

Changed

• This package no longer has dependencies. This should have no effect on end users, other than speeding up installation time.
• helmet.contentSecurityPolicy:
  • There is now a default set of directives if none are supplied
  • Duplicate keys now throw an error. See helmetjs/csp#73
  • This middleware is more lenient, allowing more directive names or values
• helmet.xssFilter now disables the buggy XSS filter by default. See #230

Removed

• Dropped support for old Node versions. Node 10+ is now required
• helmet.featurePolicy. If you still need it, use the feature-policy package on npm.
• helmet.hpkp. If you still need it, use the hpkp package on npm.
• helmet.noCache. If you still need it, use the nocache package on npm.
• helmet.contentSecurityPolicy:
  • Removed browser sniffing (including the browserSniff and disableAndroid parameters). See helmetjs/csp#97
  • Removed conditional support. This includes directive functions and support for a function as the reportOnly. Read this if you need help.
  • Removed a lot of checks—you should be checking your CSP with a different tool
  • Removed support for legacy headers (and therefore the setAllHeaders parameter). Read this if you need help.
  • Removed the loose option
  • Removed support for functions as directive values. You must supply an iterable of strings
• helmet.frameguard:
  • Dropped support for the ALLOW-FROM action. Read more here.
• helmet.hidePoweredBy no longer accepts arguments. See this article to see how to replicate the removed behavior. See #224.
• helmet.hsts:
  • Dropped support for includeSubdomains with a lowercase D. See #231
  • Dropped support for setIf. Read this if you need help. See #232
• helmet.xssFilter no longer accepts options. Read "How to disable blocking with X-XSS-Protection" and "How to enable the report directive with X-XSS-Protection" if you need the legacy behavior.