Back to Freecodecamp

Mitigate the Risk of Clickjacking with helmet.frameguard()

curriculum/challenges/english/blocks/information-security-with-helmetjs/587d8247367417b2b2512c38.md

latest1.6 KB
Original Source

--description--

As a reminder, this project is being built upon the following starter project cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.

Your page could be put in a <frame> or <iframe> without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained by executing your page in a malicious context, by means of iframing. In that context, a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.

We don’t need our app to be framed.

--instructions--

Use helmet.frameguard() passing with the configuration object {action: 'deny'}.

--hints--

helmet.frameguard() middleware should be mounted correctly

js
const response = await fetch(code + '/_api/app-info');
if (!response.ok) {
  throw Error(await response.text());
}
const data = await response.json();
assert.include(
  data.appStack,
  'frameguard',
  'helmet.frameguard() middleware is not mounted correctly'
);

helmet.frameguard() 'action' should be set to 'DENY'

js
const response = await fetch(code + '/_api/app-info');
if (!response.ok) {
  throw Error(await response.text());
}
const data = await response.json();
assert.property(data.headers, 'x-frame-options');
assert.equal(data.headers['x-frame-options'], 'DENY');