Some methods about front-end page testing and resisting clickjacking attack

Clickjacking is an attack that tricks users into thinking they are clicking on another thing when they actually click on it. Another name for it, User Interface (UI) Fixes, better describes what's going on. Users think they are using the normal UI of the web page, but there is actually a hidden UI in control; in other words, the UI has been fixed. The hidden UI does different things when the user clicks on something they think is safe.

The attack is possible because HTML frames (iframes) are able to frame web pages within other web pages. If the web page allows itself to be displayed within a frame, an attacker can overlay the original web page with a hidden transparency layer and use their own JavaScript and UI elements. The attacker then tricks the user into visiting a malicious page that looks like a site the user knows and trusts. There is no indication that there is a hidden UI on the original site. The user clicks a link or button, expecting the origin site to perform a specific action, and then the attacker's script runs. But the attacker's script can also do what is expected, making it appear that nothing went wrong.

We can use the following tool website to detect whether our website is vulnerable to clickjacking attacks.

https://clickjacker.io/

Just put your own website url, fill in the input box, you can detect:

The websites I developed locally and run on localhost cannot be scanned by this tool website, of course, so I publish them to Alibaba Cloud and access them through the latter's public IP address.

First, use pm2 list view the server process running on the Alibaba Cloud server:

Use pm2 stop all stop all processes:

Setting X-Frame-Options in meta element is useless! For example, meta http-equiv="X-Frame-Options" content="deny" has no effect.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

X-Frame-Options only work by setting HTTP headers, as shown in the example below.

const frameguard = require('frameguard');
app.use(frameguard({ action: 'SAMEORIGIN' }));

The effect of the above code is as follows:

Scan using the tool website mentioned at the beginning of this article:

The above code works and the output is now:

it is safe from clickjacking attack.

Another instruction: CSP: frame-ancestors , also does not support the definition in the meta element:

var express = require('express');
var app = express();

app.use(function(req, res, next) {
    res.setHeader("Content-Security-Policy", "script-src 'self'");
    return next();
});

https://stackoverflow.com/questions/21048252/nodejs-where-exactly-can-i-put-the-content-security-policy

The effect of the above code makes the inspection of the tool website show the green light again: