Scribd
Upload
36 views

how to prevent clickjacking in react js-掘金

The document discusses three methods to prevent clickjacking attacks in React JS applications: 1) Using the X-Frame-Options HTTP header to only allow embedding from the same origin, 2) Using a Content Security Policy to restrict iframe embedding to none, and 3) Using React's anti-shake component to shake the page on click to detect clickjacking.

Uploaded by

Shams
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views

how to prevent clickjacking in react js-掘金

The document discusses three methods to prevent clickjacking attacks in React JS applications: 1) Using the X-Frame-Options HTTP header to only allow embedding from the same origin, 2) Using a Content Security Policy to restrict iframe embedding to none, and 3) Using React's anti-shake component to shake the page on click to detect clickjacking.

Uploaded by

Shams
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

front h Log in

page

how to prevent clickjacking in react js

Clickjacking is an attack method in which the attacker disguises the target website under a transparent
iframe, and places another website or malicious code on top of the iframe, causing the user to click on
the iframe without knowing it. Content that appears innocuous, but actually triggers malicious actions.
In React.js, you can prevent clickjacking attacks by:

1. Use X-Frame-Options: By setting the HTTP response header X-Frame-Options, you can prevent your
website from being embedded in other websites, thereby preventing clickjacking attacks. For
example:

app.use((req, res, next) => {


res.setHeader('X-Frame-Options', 'SAMEORIGIN');
next(); 4});

The above code will set X-Frame-Options to SAMEORIGIN, which means that only websites under
the same domain name can embed your website.

2. Use CSP: A Content Security Policy (CSP) is a security policy that specifies which origins can
load resources. By setting CSP, you can limit the origin of the iframe that can be loaded in the
page, thereby preventing clickjacking attacks. For example:

app.use((req, res, next) => {


res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
next(); 4});

The above code will set frame-ancestors to none, which means that all origins are prohibited from
loading the iframe.
front page
3. Use React's anti-shake component: React has an anti-shake component (React Shake), which
can

clicking. For example:

1 import Shake from 'react-shake';


2
3
4 <Shake h={10} v={10} r={3}>
5 <button>Click me</button>
</Shake>

The Shake component in the above code shakes the page when the user clicks the button.

Through the above measures, you can effectively prevent clickjacking attacks. Please note that in
practical applications, you need to choose the appropriate method to protect your website according to
the specific situation.

4 years ago 204 1 Comment

4 years ago 83 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…
front
freecodecamp … 4 years ago 83 like
page

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…

freecodecamp… 4 years ago 95 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…

freecodecamp… 4 years ago 75 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…

freecodecamp… 4 years ago 67 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…

freecodecamp… 4 years ago 78 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…

freecodecamp… 4 years ago 49 like Comment

How to render modals in React


Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the
basics of React, you will kn…
freecodecamp… 4 years ago 49 like
page

2 years ago 1087 9 Comment

You might also like