Best practices to make React applications more secure

// 1. Protect Against XSS (Cross-Site Scripting)

// Bad - Vulnerable to XSS
const DangerousComponent = ({ userInput }) => {
  return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

// Good - Safe from XSS
const SafeComponent = ({ userInput }) => {
  return <div>{userInput}</div> // React automatically escapes content
}

// 2. Secure Data Fetching
import { useState, useEffect } from 'react'

const SecureDataFetching = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data', {
          credentials: 'same-origin', // Include cookies for same-origin requests
          headers: {
            'Content-Type': 'application/json',
            // Include CSRF token if your backend requires it
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content,
          },
        })

        if (!response.ok) {
          throw new Error('Network response was not ok')
        }

        const jsonData = await response.json()
        // Validate data before setting state
        if (validateData(jsonData)) {
          setData(jsonData)
        }
      } catch (error) {
        console.error('Error fetching data:', error)
        // Handle error appropriately
      }
    }

    fetchData()
  }, [])

  return <div>{/* Render data securely */}</div>
}

// 3. Secure Forms
const SecureForm = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })

  const handleSubmit = async (e) => {
    e.preventDefault()

    // Validate input before sending
    if (!validateInput(formData)) {
      return
    }

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // Include CSRF token
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content,
        },
        body: JSON.stringify(formData),
        credentials: 'same-origin',
      })

      // Handle response
    } catch (error) {
      // Handle error
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.username}
        onChange={(e) =>
          setFormData((prev) => ({
            ...prev,
            username: e.target.value.trim(),
          }))
        }
        // Prevent autocomplete if necessary
        autoComplete="off"
      />
      <input
        type="password"
        value={formData.password}
        onChange={(e) =>
          setFormData((prev) => ({
            ...prev,
            password: e.target.value,
          }))
        }
      />
      <button type="submit">Submit</button>
    </form>
  )
}

// 4. Protected Routes Component
const ProtectedRoute = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await fetch('/api/check-auth', {
          credentials: 'same-origin',
        })

        if (response.ok) {
          setIsAuthenticated(true)
        }
      } catch (error) {
        console.error('Auth check failed:', error)
      } finally {
        setIsLoading(false)
      }
    }

    checkAuth()
  }, [])

  if (isLoading) {
    return <div>Loading...</div>
  }

  return isAuthenticated ? children : <Navigate to="/login" />
}

// 5. Secure Local Storage Usage
const SecureStorage = {
  // Encrypt before storing sensitive data
  setItem: (key, value) => {
    try {
      const encryptedValue = encrypt(JSON.stringify(value)) // Implement encryption
      localStorage.setItem(key, encryptedValue)
    } catch (error) {
      console.error('Storage error:', error)
    }
  },

  // Decrypt when retrieving
  getItem: (key) => {
    try {
      const encryptedValue = localStorage.getItem(key)
      if (!encryptedValue) return null
      return JSON.parse(decrypt(encryptedValue)) // Implement decryption
    } catch (error) {
      console.error('Retrieval error:', error)
      return null
    }
  },
}