ReactJs - Common Security Threats & Vulnerabilities

1. Cross Site Request Forgery

Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. CSRF attacks specifically target state-changing requests, not theft of data, since the attacker has no way to see the response to the forged request.

Mitigation:

import React, { useState } from 'react';

const PhoneForm = () => {

  const [phone, setPhone] = useState('');

  const onChange = ({ target }) => setPhone(target.value);

  const onSubmit = () => {

    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    fetch('https://www.sparkpay.com/api/phone', {

      method: 'PUT',

      credentials: 'include',

      headers: {

        'Content-Type': 'application/json',

        'X-CSRF-TOKEN': csrfToken,

      },

      body: JSON.stringify({

        phone: phone,

      }),

    });

  };

2. Direct DOM Manipulation XSS

DOM Based XSS is an XSS attack wherein the attack payload is executed as a result of modifying the DOM “environment” in the victim’s browser used by the original client-side script so that the client-side code runs in an “unexpected” manner. That is, the page itself (the HTTP response that is) does not change, but the client-side code contained in the page executes differently due to the malicious modifications that have occurred in the DOM environment.

Mitigation

To effectively mitigate against Document Object Model (DOM) based cross-site scripting vulnerabilities, developers must avoid using the direct DOM manipulations, utilizing React's interpolation instead.

If the direct DOM manipulation cannot be avoided, the developer has to make sure that all the untrusted data is sanitized before injecting it into the DOM.

For example, if client-side JavaScript is used to manipulate the content, structure, or style of a document's DOM element with user-supplied data, such input strings must be sanitized (encoded or escaped) for safe insertion into a document's DOM. 

Additionally, DOM objects that may be influenced by the user (attacker) should be carefully reviewed and escaped, including (but not limited to):

document.URL

document.URLUnencoded

document.location (and child properties)

document.referrer

window.location (and child properties)

3. Components with Known Vulnerabilities

Some vulnerable components (e.g., framework libraries) can be identified and exploited with automated tools, expanding the threat agent pool beyond targeted attackers to include chaotic actors.

Mitigation

To effectively mitigate against component-based vulnerabilities, developers must regularly audit software components and their dependencies, making sure the third-party libraries and software dependencies are always up-to-date.

To check installed npm dependencies for vulnerabilities, developers may use the npm audit command, which scans the project for vulnerabilities and automatically installs any compatible updates to vulnerable dependencies.

4. Untrusted HTML Rendering XSS

Stored or Persistent Cross-site Scripting (XSS) occurs when the user-supplied input is stored on a web application and then rendered within a web page. Typical entry points are blog comments and user profiles. An attacker typically exploits this vulnerability by injecting XSS payloads on popular pages of a web application or by passing a link to a victim, tricking them into viewing the page that contains the stored XSS payload. When the victim visits the page, the payload is executed client-side by the victim's web browser.

Mitigation


In order to effectively mitigate against stored Cross-site Scripting attacks, developers must ensure all user-supplied data is either HTML encoded or sanitized before being rendered to the web page.

React automatically escapes all untrusted data, converting it to plain text, a value that's safe to insert into the DOM.

However, In specific situations, it might be necessary to disable the escaping mechanism and render the value as HTML. A developer can bypass security by using the dangerouslySetInnerHTML attribute, which renders the value as HTML.

These situations should be very rare, and extraordinary care must be taken to avoid creating an XSS security bug, especially when the data comes from an untrusted source!

Let's see how the above best practices can be applied to our vulnerable code example to prevent Cross-Site Scripting attacks.