时间戳

首页 > 解决方案 > 我们可以防止来自客户端渲染的 React JS 应用程序的点击劫持吗？

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

问题描述

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

标签： reactjsclient-sidecontent-security-policyx-frame-optionsclickjacking

解决方案

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>

推荐阅读