I am trying to create web application using React and Node that is secure from Click jacking, I have understood that i need to either set the X-Frame-Options to deny manually or use helmet to prevent other sites loading my web app using iframes. I have set the below config in my index.js of server
const helmet = require("helmet")
app.use(helmet())
When i try to call a get Login API from inside an iframe of a decoy website(basic html page), i am getting a status 200 response and the web app is loaded into the iframe. But i believe the web app should fail to load in the iframe of decoy site. My Login component looks something like this.
function Login(){
useEffect(()=>{
Axios.get(`http://localhost:8888/isLoggedIn`, {
headers:{
"x-access-token": localStorage.getItem("token")
}
}).then((response)=>{
console.log(response)
if(response.data.loggedin){
navigate("/")
}
})
}
As mentioned in the problem, I am getting 200 for isLoggedIn call. When i checked the api call from the decoy site network tab, I see the isLoggedIn call has origin set to "http://localhost:3000", which is actual domain of react app. Below is the decoy site html code.
<body>
<div id="decoy_website">
Decoy Web Site for Secure Login Page
</div>
<iframe id="target_website" src="http://localhost:3000/login">
</iframe>
</body>
Please let me know if i am not using the helmet the correct way, or the additional steps that need to be done to prevent my site from click jacking.
Well, You can prevent clickjacking attack by setting the X-Frame-Options to DENY or SAMEORIGIN, but if you want to use helmet in efficient way you can add the following code to the JavaScript file you use to start your web app or index.js:
this is the right way of using helmet for setting X-Frame-Options
but loading a login page in an iframe tag can cause more vulnerabilities than clickjacking. I don't suggest it in real projects.