React Security Audit: Free Online Scanner for XSS and Security Risks

React is designed with security in mind — its JSX syntax automatically escapes values, preventing most XSS attacks. But React applications are not immune to security vulnerabilities. From dangerouslySetInnerHTML to exposed API keys, from missing security headers to vulnerable dependencies, there are many ways a React app can be compromised.

The React Security Checker by Jayax.dev scans your React application for 12+ security vulnerabilities specific to the React ecosystem.

---

Common React Security Vulnerabilities

Where React Security Breaks Down

React's built-in protections cover many XSS scenarios, but developers frequently bypass them:

| Vulnerability | Cause | Prevalence | |---------------|-------|------------| | XSS via dangerouslySetInnerHTML | Rendering untrusted HTML | Very common | | Exposed API keys in client bundle | Hardcoded secrets | Common | | Missing security headers | No server-side configuration | Very common | | Source map exposure | Debug info in production | Common | | Insecure third-party scripts | Unvetted npm packages | Common | | Prototype pollution | Deep merge of untrusted data | Moderate | | Open redirect | Unvalidated redirect URLs | Moderate | | CSRF on API calls | Missing anti-CSRF tokens | Common |

React-Specific XSS Patterns

While React escapes JSX expressions ({}), XSS can still occur through:

1. dangerouslySetInnerHTML — renders raw HTML without sanitization
2. href attributes with javascript: protocol — <a href={userInput}>
3. Dynamic eval() or Function() calls — executing user-supplied strings
4. URL-based injection — window.location.hash used unsafely
5. Third-party library vulnerabilities — outdated packages with known CVEs

---

What the React Security Checker Scans

1. Client-Side Security

Source Map Exposure

• What it checks: Whether .js.map files are accessible in production
• Why it matters: Source maps expose your complete source code, including API endpoints, business logic, and comments
• How to fix: Disable source maps in production builds. For Create React App: set GENERATE_SOURCEMAP=false. For Vite: set build.sourcemap: false

API Key Leakage

• What it checks: For exposed API keys in the JavaScript bundle
• Why it matters: Hardcoded API keys (Google Maps, Stripe, Firebase, etc.) can be extracted and abused
• How to fix: Move all API calls to a backend proxy. Use environment variables that are only accessible server-side

Bundle Analysis

• What it checks: For outdated or vulnerable JavaScript libraries in the bundle
• Why it matters: Known CVEs in dependencies like jQuery, Lodash, or Axios can be exploited
• How to fix: Run npm audit regularly. Update dependencies. Use Snyk or Socket.dev for monitoring

Content Security Policy

• What it checks: Whether CSP headers restrict script execution
• Why it matters: CSP is your last line of defense against XSS — it prevents inline scripts from unknown sources
• How to fix: Configure CSP headers on your hosting/server:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;

2. Security Headers

All standard security headers are checked:

• Strict-Transport-Security — HTTPS enforcement
• X-Frame-Options — clickjacking protection
• X-Content-Type-Options — MIME sniffing prevention
• Referrer-Policy — referrer information control
• Permissions-Policy — browser feature restrictions

3. React-Specific Patterns

dangerouslySetInnerHTML Usage Detection

• What it checks: Signs of raw HTML rendering in the page source
• Why it matters: Any user-controlled data rendered through this prop is an XSS vector
• How to fix: Use DOMPurify to sanitize HTML before rendering:

import DOMPurify from 'dompurify';

function SafeHTML({ html }) {
  return (
    <div dangerouslySetInnerHTML={{ 
      __html: DOMPurify.sanitize(html) 
    }} />
  );
}

React Version Detection

• What it checks: Which React version is being used
• Why it matters: Older React versions have known vulnerabilities (e.g., React 16.x has different security characteristics than 18.x)
• How to fix: Keep React updated to the latest stable version

Development Build Detection

• What it checks: Whether the React development build is being served
• Why it matters: Dev builds include extra warnings, are significantly larger, and may expose internal state
• How to fix: Always deploy production builds: npm run build (CRA) or vite build (Vite)

4. Infrastructure Security

SSL/TLS Configuration

• What it checks: Certificate validity and HTTPS enforcement
• Why it matters: React SPAs often communicate with APIs — all traffic must be encrypted
• How to fix: Use HTTPS everywhere. Configure HSTS headers

CORS Configuration

• What it checks: Whether API CORS headers are overly permissive
• Why it matters: Access-Control-Allow-Origin: * allows any website to call your API
• How to fix: Only allow specific trusted origins in your API CORS configuration

Subresource Integrity (SRI)

• What it checks: Whether external scripts have SRI hashes
• Why it matters: Without SRI, a compromised CDN can serve malicious scripts
• How to fix: Add integrity and crossorigin attributes:

<script src="https://cdn.example.com/lib.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"></script>

---

How to Use the React Security Checker

1. Go to jayax.dev/tools/react-security-checker
2. Enter your React application URL
3. Click "Scan"
4. Review results across all categories
5. Apply recommended fixes
6. Re-scan to verify

---

React Security Best Practices

Code-Level Protections

// ❌ DANGEROUS: Never do this
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ SAFE: Sanitize first
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

// ❌ DANGEROUS: Never use user input in href
<a href={userInput}>Click here</a>

// ✅ SAFE: Validate URLs
<a href={isValidUrl(userInput) ? userInput : '#'}>Click here</a>

// ❌ DANGEROUS: Never eval user input
eval(userInput);

// ✅ SAFE: Never eval anything, use proper parsers
JSON.parse(userInput);

Environment Variable Security

# ❌ DANGEROUS: These are exposed in the client bundle
REACT_APP_API_KEY=sk_live_abc123
REACT_APP_SECRET=mysecret

# ✅ SAFE: Only non-sensitive values
REACT_APP_API_URL=https://api.example.com
REACT_APP_PUBLIC_ANALYTICS_ID=UA-12345

Dependency Security

# Regular security audits
npm audit
npm audit fix

# Check for known vulnerabilities
npx npm-check-updates
npx snyk test

# Review package.json for suspicious packages

---

FAQ — React Security Checker

Does React's built-in XSS protection make this scanner unnecessary?

No. While React's JSX escaping handles most XSS cases, real-world React applications frequently use dangerouslySetInnerHTML, external scripts, URL parameters, and API responses that can bypass React's protections. The scanner catches these edge cases.

Can this tool scan React Native apps?

No. The React Security Checker is designed for web applications built with React. React Native apps run on mobile devices and have different security considerations.

Does it work with Create React App, Vite, and Next.js?

Yes. The scanner works with any React deployment, regardless of the build tool. For Next.js-specific checks, we recommend also using our Next.js Security Checker.

How do I protect API keys in a React SPA?

Never put API keys in your React code. Instead:

1. Create a backend API proxy that adds the key server-side
2. Use environment variables only on the server (not REACT_APP_* or VITE_*)
3. Implement rate limiting and usage monitoring on your API

What about authentication security in React?

Common React authentication mistakes include:

• Storing tokens in localStorage (vulnerable to XSS)
• Not validating JWT expiry
• Not implementing token refresh securely
• Missing CSRF protection on login forms

Use httpOnly cookies for session tokens and implement proper CSRF protection.

---

Secure Your React Application Now

Run a free security scan and identify vulnerabilities before they're exploited.

→ Scan Your React App Now

---

Related Articles:

• WordPress Security Checker Guide
• Laravel Security Audit Guide
• Next.js Security Scanner Guide
• Website Security Checker Guide
• Essential Web Development Security Tools

---

Find and fix React security vulnerabilities in 60 seconds with the free React Security Checker by Jayax.dev.