Cross-Site Scripting, commonly known as XSS, occurs when an attacker is able to inject malicious content or JavaScript into a web page that is later viewed by another user.

React automatically escapes values rendered through JSX, which provides protection against many common XSS scenarios.

For example:

const username = “alert(‘XSS’)”;

return

{username}
;

React treats the value as text instead of executing it as JavaScript.

However, developers can still introduce security risks when they intentionally insert raw HTML or use unsafe rendering techniques.

One example is:

If userContent comes from an untrusted source and is not properly sanitized, it can create an XSS vulnerability.

Modern React applications often use many npm packages for UI components, authentication, forms, API communication, state management, and other functionality.

If one of these dependencies contains a known vulnerability, it can potentially affect the application.

Developers should regularly review project dependencies and remove packages that are no longer required.

Anything included in a frontend React application can potentially be inspected by users.

Therefore, sensitive information such as:

-> Database passwords
-> Private API keys
-> Secret tokens
-> Server credentials
-> Encryption keys

should never be stored directly in frontend code.

Environment variables used by a client-side build should also not be considered secret simply because they are stored in an .env file. If their values are bundled into the browser application, users may be able to access them.

Sensitive secrets should remain on the server side.

Authentication verifies the identity of a user, while authorization determines what that user is allowed to access.

A common mistake is to rely entirely on frontend route protection.

For example, hiding an admin page from a normal user does not prevent that user from manually calling an admin API endpoint.

The backend must independently verify authentication and authorization for every sensitive operation.

React applications commonly communicate with backend APIs to retrieve and update data.

If APIs are not properly secured, attackers may attempt to access or manipulate sensitive information.

Security should therefore be implemented at the API level through appropriate measures such as:

-> HTTPS
-> Authentication
-> Authorization
-> Input validation
-> Rate limiting where appropriate
-> Secure error handling
-> Proper CORS configuration

User input should always be considered untrusted.

Applications commonly receive user-controlled data through:

-> Login forms
-> Registration forms
-> Search fields
-> Comments
-> Contact forms
-> Profile information
-> File uploads

This information should be validated and handled securely before being processed, stored, or displayed.

Storing sensitive information in browser-accessible locations can create unnecessary security risks.

Developers should carefully evaluate what data is stored in:

-> Local storage
-> Session storage
-> Cookies
-> Browser state
-> Client-side application state

Only the data that is actually required by the frontend should be exposed to the browser.