Securing React: 4 Tips for Resilient Applications

By Shareef Salman
Security Auditor & Engineer

I know what you’re wondering: why would I read a blog about React security? In fact, why would I even bother to secure my React app? Isn’t protection on the frontend just a nice-to-have?

Actually, it’s far more than that. You should secure both sides — front- and backend. That’s because some attacks — like Reflected Cross-Site Scripting (XSS) attacks — can only occur on the frontend. Besides, it’s just plain prudent to secure both sides. This way, your system will be comprehensively secured. If you happen to miss a vulnerability on one side, it may be covered on the other.

With that in mind, here are my top four tips to making both ends of your React app secure.

4 Security Tips for React Applications

1. Validate and Sanitize inputs

Validate and sanitize all inputs to prevent injection attacks such as XSS attacks and Prototype Pollution. You can use third-party packages to do this (e.g. DomPurify and Formik).

Inputs can be input fields, URLs, data coming from an API request, and even an external event the app is listening to.

There’s widespread misconception that React is completely secure against XSS attacks. While React does automatically escape values shown on the UI to protect against XSS attacks, there are many other ways malicious scripts can be executed in React apps. Examples include the anchor tag href attribute, dangerouslySetInnerHTML attribute, and JavaScript functions such as innerHTML.

All of these attributes and functions do execute scripts without escaping the content.

2. Implement Content Security Policy (CSP)

According to MDN, the HTTP Content-Security-Policy response header allows website administrators to control the resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks. A good and strict policy helps prevent various types of attacks, such as XSS, and data injection attacks.

You can enable CSP by returning Content-Security-Policy header with the response from the server. Alternatively, you can use the <meta> tag on the front-end side.

3. Consider Server-Side Rendering (SSR)

The use of SSR enhances the overall system security by offering less code exposure to the user. In client-side rendered websites, the code is sent to the client’s browser, which is responsible for executing the code and building the HTML page. In contrast, SSR websites build the code on the server side and then send the pre-rendered HTML (along with the necessary JavaScript code) for the browser to read.

The reduced amount of code that SSR sends helps minimize the risk of vulnerabilities. In addition, SSR offers enhanced data security and adherence to compliance standards

Client-side rendering often involves populating data fields through JSON strings, extracting information directly from backend systems. Frequently, backend queries retrieve excess data, potentially transmitting sensitive or confidential information that should remain undisclosed.

While these fields are included within the JSON payload, they remain unrendered on the page, complicating their identification. Nonetheless, this constitutes a privacy breach with significant compliance ramifications.

Server-side rendering ensures that data retrieved from relational databases or NoSQL data stores remains isolated from the frontend and inaccessible to the client, except for the data that is shown in the UI. This safeguards data privacy and maintains compliance standards.

4. Security of Dependencies

Securing dependencies can require significant time and effort — but the investment is entirely worthwhile. Dependencies play a major role in the security of an application and, inversely, insecure dependencies could expose the app to a variety of attacks of varying severity.

Before introducing a new dependency into a project, security should be comprehensively review and assessed, along with its transitive dependencies’ code. First, the dependency should be audited and the audit report should be available publicly.

Additionally, it’s considered best practice to lock the version in the package.json file. Without this step, new bugs and vulnerabilities can be introduced into the project by running npm install or npm update commands.

The utilization of tools or services that offer dependency scanning and vulnerability analysis provides an additional safeguard. These tools can integrate into your CI/CD pipeline to automatically check for vulnerabilities.

Finally, it’s paramount that dependencies are actively maintained. If not, this may be an indication that dependency owners no longer have the time or interest in maintaining them. In such cases, the owner may pass the package to another developer for maintenance, and the new maintainer may not have the best intentions. A good real life example of such an incident is the event-stream package incident.

Thus, it’s important that a reliable and capable team is responsible for oversight and maintenance of all project dependencies. In the event that a dependency is no longer maintained appropriately, it should be replaced.

Importance of Security Audits

The four aforementioned tips can help secure React apps against a wide range of possible attacks. However, building in accordance with security best practices and industry standards is only part of the equation. When it comes to something as serious as safeguarding your project and reducing the likelihood of security breaches, seeking the services of an independent auditing team is paramount.

Security auditors have the objectivity and expertise to assess and detect a wide range of app vulnerabilities, including cross-site scripting (XSS), cross-site request forgery (CSRF), injection flaws, and weaknesses in authentication and authorization procedures. If you are serious about securing your code, we’re here to help!

At Thesis Defense, we pride ourselves on our expertise. Our team of security auditors have many years of experience carrying out audits on decentralized systems across a number of technologies including smart contracts, wallets, bridges, consensus mechanisms, and cryptographic protocols and within a variety of ecosystems including Bitcoin, Ethereum, Solana, Polygon, Cosmos, Avalanche, Zcash, Stacks, Mina and more.

To learn more about our services and get a free quote, schedule a call or email us @ defense@thesis.co. For more information about Thesis Defense, visit us on our website, blog and X (Twitter).