我正在尝试使用React和Node创建Web应用程序，这是安全的点击劫持，我已经明白，我需要设置X-Frame-Options手动拒绝或使用 Helm ，以防止其他网站使用iframe加载我的Web应用程序.我已经在我的index.js中设置了下面的配置服务器
const helmet = require("helmet")
app.use(helmet())当我试图从一个诱饵网站的iframe（基本的html页面）内部调用get Login API时，我得到了一个status 200响应，Web应用程序被加载到iframe中。但我相信Web应用程序应该无法加载到诱饵网站的iframe中。我的Login组件看起来像这样。
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>请让我知道，如果我没有使用 Helm 的正确方式，或需要做的额外步骤，以防止我的网站从点击劫持。
1条答案
按热度按时间sczxawaw1#
好吧，你可以通过设置X-Frame-Options为DENY或SAMEORIGIN来防止clickjacking攻击，但是如果你想以有效的方式使用helmet，你可以将以下代码添加到你用来启动web应用或index.js的JavaScript文件中：
这是使用** Helm 设置X-Frame-Options**的正确方法
但是在iframe标签中加载登录页面会比点击劫持导致更多的漏洞。我不建议在真实的项目中使用它。