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

Frameguard

Looking for a changelog?

The X-Frame-Options HTTP header restricts who can put your site in a frame which can help mitigate things like clickjacking attacks. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM, defaulting to SAMEORIGIN. 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. If you want to allow it from a specific URL, you can allow that with ALLOW-FROM and a URL.

Usage:

var 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

// Allow from a specific host:
app.use(frameguard({
  action: 'allow-from',
  domain: 'http://example.com'
}))

This has pretty good (but not 100%) browser support: IE8+, Opera 10.50+, Safari 4+, Chrome 4.1+, and Firefox 3.6.9+. The ALLOW-FROM header option is not supported in most browsers. Those browsers will ignore the entire header, and the frame will be displayed.