我正在尝试使用 React 和 Node 创建 Web 应用程序，它可以防止点击劫持，我知道我需要将 X-Frame-Options 设置为手动拒绝或使用头盔来防止其他站点使用 iframe 加载我的 Web 应用程序.我在服务器的 index.js 中设置了以下配置
const helmet = require("helmet")
app.use(helmet())
当我尝试从诱饵网站（基本 html 页面）的 iframe 内部调用获取登录 API 时，我收到状态 200 响应，并且 Web 应用程序已加载到 iframe 中。但我相信网络应用程序应该无法加载到诱饵网站的 iframe 中。我的登录组件看起来像这样。
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("/")
}
})
}
如问题中所述，我收到 isLoggedIn 调用的 200。 当我从诱饵站点网络选项卡检查 api 调用时，我看到 isLoggedIn 调用的来源设置为“http://localhost:3000”，这是 React 应用程序的实际域。 下面是诱饵网站的html代码。
<body>
<div id="decoy_website">
Decoy Web Site for Secure Login Page
</div>
<iframe id="target_website" src="http://localhost:3000/login">
</iframe>
</body>
如果我没有以正确的方式使用头盔，或者需要采取额外的步骤来防止我的网站点击劫持，请告诉我。
好吧，您可以通过将 X-Frame-Options 设置为 DENY 或 SAMEORIGIN 来防止 clickjacking 攻击，但是如果您想以有效的方式使用 helmet，您可以将以下代码添加到 JavaScript用于启动网络应用程序或 index.js 的文件：
const express = require('express');
const helmet = require('helmet');
const app = express();
// setting the X-Frame-Options header to SAMEORIGIN
app.use(helmet.frameguard({ action: 'sameorigin' })); // OR you can set it to DENY
这是使用helmet设置X-Frame-Options
的正确方法但是在 iframe 标记中加载登录页面可能导致比点击劫持更多的漏洞。我不建议在实际项目中使用它。