Can we prevent clickjacking from Client Side rendered React JS Application?

user_5928700 0
Viewed 2880

I have a client-side react application. I want to prevent my website to be opened by any other website in its iframe. I see using the X-Frame-Options set in the header is an option. But can that be done from the client application? Or it needs to be done from the server-side only? Any best methods to apply clickjacking to the client-side react application will be helpful for my application.

clickjacking x-frame-options content-security-policy reactjs client-side
1 Answers
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]);
}

Also tested the above code with the below html in WebPage

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