我们可以防止来自客户端渲染的 React JS 应用程序的点击劫持吗？答案

【问题标题】：Can we prevent clickjacking from Client Side rendered React JS Application?我们可以防止来自客户端渲染的 React JS 应用程序的点击劫持吗？
【发布时间】：2024-01-10 03:14:01
【问题描述】：

我有一个客户端反应应用程序。我想阻止我的网站在其 iframe 中被任何其他网站打开。我看到使用标题中设置的 X-Frame-Options 是一个选项。但这可以从客户端应用程序中完成吗？还是只需要从服务器端完成？将点击劫持应用到客户端 React 应用程序的任何最佳方法都将对我的应用程序有所帮助。

【问题讨论】：

是的，X-Frame-Optios 和 Content Security-Policy HTTP 响应标头只能在服务器端发布。请注意，Content Security-Policy 元标记中不支持 frame-ancestors 指令。
你能弄清楚吗？我在试图找到同一个问题的答案时来到这里
@HimaChhag 一样！你想清楚了吗？哈哈
是的，我确实想通了。我将发布我的解决方案@user15575918

标签： reactjs client-side content-security-policy x-frame-options clickjacking

【解决方案1】：

const UnsecuredPageWarning = styled.h1`
      color: red;
    `;
 
const Link = styled.a`
  text-decoration: none;
  color: red;
`;

const UnsecuredPage: FunctionComponent = (): ReactElement => (
  <div>
    <UnsecuredPageWarning>If you see this page, Webb App link you have clicked on is under Clickjacking security attack.</UnsecuredPageWarning>
    <h2>Please inform team with the reference of the application from where you clicked this link.</h2>
    <h2>Click <Link href={window.self.location.href} title='Web Application' target='blank'>here</Link> to access WebApp safely.</h2>
  </div>
);
 
// Won't render the application if WebApp is under Clickjacking attack
if(window.self === window.top) {
  ReactDOM.render(<WrappedApp />, document.getElementsByClassName('app')[0]);
} else{
  ReactDOM.render(<UnsecuredPage />, document.getElementsByClassName('app')[0]);
}

还在网页中用下面的html测试了上面的代码

<html>
  <head>
    <title>Clickjack test page</title>
  </head>
  <body>
    <iframe src="http://localhost:3000/login" width="900" height="300"></iframe>
  </body>
</html>

【讨论】：