I have an application with a front-end in Angular served by an S3 bucket, and a server in Express js. To avoid clickjacking I am trying to take all possible actions so: "frame-buster" techniques for the client side and anti-clickjacking header for the server.
For the latter I have tried all the solutions indicated online. That is, I set the "X-Frame-Options" to "DENY" as I do not need any iframes in my application and set the "frame-ancestors" directive with the following code:
const app = express();
const helmet = require("helmet");
app.use(helmet.frameguard({ action: "DENY" }));
app.use(
helmet.contentSecurityPolicy({
directives: {
frameSrc: ["none"],
frameAncestors: ["none"],
},
})
);
I then used this html file to test my application:
<!DOCTYPE html>
<html>
<head>
<title>Iframe test</title>
</head>
<body>
<input type="text" id="inputSite" style="width:400px"/>
<input type="button" value="Open"
onclick="document.getElementById('iframe').src=document.getElementById('inputSite').value"
/>
<br/>
<iframe id="iframe" style="width:100%; height:800px;" ></iframe>
</body>
</html>
And these are the first http requests sent by the app: [1]: https://i.stack.imgur.com/kaAOJ.png [2]: https://i.stack.imgur.com/I12Rj.png [3]: https://i.stack.imgur.com/p6HTQ.png
Does anyone know what this behaviour is due to and how I can solve it?
Thank you very much, have a nice day