Secure Coding Guideline, ReactJS

This document describes the secure coding guidelines for ReactJS. Some of the guidelines are generic, whereas others are specific to ReactJS.

ReactJS Framework Guidance

• Input validation – It should handle validations on the presentation and application layers for user inputs to prevent injection attacks rather than implementing complex custom validations.

  Ex - Validating e-mail addresses using the Validator.js library

    var validator = require('validator'); 
  
    var isValidEmail = validator.isEmail('foo@bar.com');

Output encoding — Data passing from the backend to the UI should be encoded or sanitized properly from malicious payloads. If it's not encoded properly, potential security threats should occur while loading the UI.

• While rendering the user name on UI, the hacker will execute and inject the script.
  So, to prevent this, a proper encoding library should be used.

  Example – using the node-esapi library

  Encoding output in the context of HTML:

    var esapi = require('node-esapi'); 
  
    var esapiEncoder = esapi.encoder(); 
  
    var htmlOutput = esapiEncoder.encodeForHTML('<div> User Name <script type="javascript"> alert("Your site hacked!") </script> </div>'); 

  The result of htmlOutput will be encoded appropriately to escape the malicious script tags:

    <div> User Name ! <script type="javascript"> alert(" Your site hacked !"&#

• Regular Expressions – if some common regular expressions aren’t properly written, they can degrade CPU performance and raise performance issues in your applications.

  Example:

    var re = /^((abc)*)+$/; 
  
    console.log(re.exec('abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabca'));

  After running this in the local development machine, it took approximately 40 seconds, as can be seen:

     $ time node re.js 
     null 
  
     node re.js  41.88s user 0.00s system 99% cpu 41.883 total

  So to avoid this, some Safe Regular Expression libraries can be used like Safe – Regex

     var saferegex = require('safe-regex'); 
  
     var emailRegex = /^([a-zA-Z0-9])(([\-.]|[_]+)?([a-zA-Z0-9]+))*(@){1}[a-z0-9]+[.]{1}(([a-z]{2,3})|([a-z]{2,3}[.]{1}[a-z]{2,3}))$/; 
  
     console.log(saferegex(emailRegex));

• JavaScript's Strict Mode - Strict mode was introduced in ECMAScript 5.1 to enable a restricted version of JavaScript for enhanced security and error management.

  If a strict mode has been followed, then compilation time will enforce its rules.

  Example:

    if(‘100’ == 100) { } // condition will be true without strict mode 
    if(‘100’ === 100) { } // condition will be false in strict mode 

• Cryptography Practices - cryptographic functions like MD5 and SHA can be used to prevent server breaches or data leakage through SQL Injection or other attacks.

  Preventing XSS attacks

  Always sanitize the users' content that comes from forms.

  Always prefer to serialize instead of JSON.stringify.

  Use dangerouslySetInnerHTML only when absolutely necessary.

• Do unit tests for all your components, and try to cover all the possible XSS attacks that some users could do.

• Always encrypt the passwords with sha1 and md5 (together), and also add a salt value (for example, if the password is abc123, then your salt can be encrypted like this: sha1(md5('$4lT3xt_abc123')).

• If you use cookies to store sensitive information (personal information and passwords mainly), you can save the cookie with Base64 to obfuscate the data.

• Protect your APIs (using security tokens) unless you need a public API.