X-FRAME-OPTIONS 设置为拒绝，但仍会在点击劫持者中打开 iframe答案

【问题标题】：X-FRAME-OPTIONS set to deny but still opening iframes in clickjackersX-FRAME-OPTIONS 设置为拒绝，但仍会在点击劫持者中打开 iframe
【发布时间】：2021-05-14 21:11:24
【问题描述】：

我正在努力避免应用程序的点击劫持。因此，我将 x-frame-options 标头设置为拒绝，但它仍在打开 iframe 和任何点击劫持测试站点。

app.all('*', (req, res, next) => {
console.log('Before processing - ', req.url, req.method);
res.header('Access-Control-Allow-Credentials', true);
res.header('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0');
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Strict-Transport-Security', 'maxAge=100000');
res.header('X-Frame-Options', 'DENY');
res.header('Content-Security-Policy', "frame-ancestors 'none'");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Cookies, cookies, x-access-token, Origin, Content-Type,    Accept');
return next();
});

【问题讨论】：

您的代码看起来不错。你是怎么测试的？
我在两个不同的网站上进行测试 http://web.clickjacker.io 和 https://www.lookout.net/test/clickjack.html
您是否检查了“网络”选项卡中的请求以查看响应中是否实际设置了 X-Frame-Options: DENY 标头？
是的，它在响应标头中，但 http://web.clickjacker.io 显示为 Missing Header
很奇怪。其他点击劫持测试网站是否报告相同的错误？

标签： node.js content-security-policy x-frame-options

【解决方案1】：

抱歉打扰，但所有工作都按预期进行，请参阅https://repl.it/@egranty/Test-for-Anita。
按下绿色启动按钮后，NodeJS sanbox 启动。测试页可以在单独的选项卡中打开并插入到https://www.lookout.net/test/clickjack.html 或https://clickjacker.io/test?url=https://test-for-anita--egranty.repl.co/。

这是 Chrome 中的结果：

请注意，如果同时发布X-Frame-Options 和Content-Security-Policy: frame-ancestors，则最后一个会覆盖现代浏览器中的X-Frame-Options except Safari。

这就是为什么浏览器控制台会在frame-ancestors 'none' 中显示锁定，而不是在X-Frame-Options 中显示锁定。

所以，你有一个工作 NodeJS 代码，一个工作点击劫持测试工具，正如我们所看到的，X-FRAME-OPTIONS / CSP frame-ancestors 绝对禁止嵌入页面。
可能是某些浏览器插件干扰或需要清除浏览器缓存。但我认为你的nodeJS安装坏了，你需要重新安装它。

【讨论】：

我发现我在服务器中设置了标头，但是那些点击劫持网站正在向前端调用 get 请求，而前端没有该标头。当我直接尝试在 iframe 中调用获取服务器的请求 URL 时，它阻止了我显示无效的令牌 JSON。现在，我正在研究如何在 React 应用程序中设置标题。
在无服务器 SPA 中只有一种方法 - 使用元标记交付 CSP。您可以使用react-static-plugin-csp-meta-tags 插件。请注意，元标记内的 frame-ancestors 指令 is not supported。因此你必须使用额外的元标记<meta http-equiv="X-Frame-Options" content="DENY">。

【解决方案2】：

尝试使用 npm 包 helmet 设置您的 X-Frame-Options 标头。在您的应用程序中运行npm install helmet --save。并在您的服务器文件中进行以下更改：

const express = require("express");
const helmet = require("helmet");

const app = express();

app.use(helmet());

现在将X-Frame-Options设置为DENY，添加：

app.use(helmet.frameguard({ action: 'deny' }));

更多详情，请参阅https://helmetjs.github.io/docs/frameguard/。此设置拒绝所有 <iframe> 内容。

【讨论】：