Shulou(Shulou.com)06/03 Report--

This article mainly explains "10 tutorials on how to use React Security". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "10 tutorials on how to use React Security".

Default xss protection for data binding (Data Binding)

Dangerous URL

Render html

Direct access to dom

Server rendering

Detect vulnerabilities in dependencies

JSON State

Detect vulnerable versions of React

Linter tool

Dangerous library code

1. Default xss protection for data binding (Data Binding)

Using the default {} for data binding, React automatically escapes values to prevent XSS attacks. Note, however, that this protection is only useful when rendering textContent, not when rendering HTML attributes.

Use the data binding syntax {} to put the data in the component.

Do this:

{data}

Avoid dynamic HTML attributes values that are not validated by custom.

Don't do this:

...

2. Dangerous URL

URL can introduce dynamic scripts through the _ javascript: protocol. So you need to verify that your connection is http: or https: to prevent script injection of _ javascript:url. Use the native URL parsing method for URL verification to determine whether the protocol is on your whitelist.

Do this:

Function validateURL (url) {const parsed = new URL (url) return ['https:',' http:']. Steps (parsed.protocol)} Click here!

Don't do this:

Click here!

3. Render html

React can render html code directly into the dom node through dangerouslySetInnerHTML. But anything inserted in this way must be sterilized beforehand.

Before putting any value into the dangerouslySetInnerHTML property, you need to sterilize it with dompurify.

Use dompurify for processing when inserting html

Import purify from "dompurify"

4. Directly access dom

You should avoid accessing DOM and then inject content directly into the DOM node. If you must insert HTML, sterilize it with dompurify and then use the dangerouslySetInnerHTML attribute.

Do this:

Import purify from "dompurify"

Do not use refs and findDomNode () to access rendered DOM elements, and then inject content with innerHTML-like methods or attributes.

Don't do this:

This.myRef.current [XSS _ clean] = attackerControlledValue

5. Server rendering

When using methods like ReactDOMServer.renderToString () and ReactDOMServer.renderToStaticMarkup (), data binding automatically provides the ability to escape content.

Avoid connecting other (unverified) strings to the output of renderToStaticMarkup () before sending the string to the client browser for hydration.

Do not connect unsterilized data to the output of renderToStaticMarkup () to prevent XSS

App.get ("/", function (req, res) {return res.send (ReactDOMServer.renderToStaticMarkup (React.createElement ("H2", null, "Hello World!") + otherData);})

6. Detect vulnerabilities in dependencies

Some versions of some third-party components may contain security issues. Check your dependencies and update to a better version in a timely manner.

Use a tool like snyk CLI [1] for vulnerability checking.

Snyk CLI can also integrate with the code management system and then automatically fix vulnerabilities:

$npx snyk test

7 、 JSON state

It is a common practice to send JSON data along with the React page after SSR. Be sure to use harmless equivalent character transfer

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.