[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"blog-checklists/react-security-checklist":3},{"id":4,"title":5,"body":6,"category":204,"date":205,"dateModified":205,"description":206,"draft":207,"extension":208,"faq":209,"featured":207,"headerVariant":214,"image":215,"keywords":215,"meta":216,"navigation":217,"ogDescription":218,"ogTitle":215,"path":219,"readTime":215,"schemaOrg":220,"schemaType":221,"seo":222,"sitemap":223,"stem":224,"tags":225,"twitterCard":227,"__hash__":228},"blog/blog/checklists/react-security-checklist.md","React Security Checklist: 20-Item Guide for XSS, Forms & State",{"type":7,"value":8,"toc":198},"minimark",[9,16,24,27,52,70,83,100,119,137,142,145,167,186],[10,11,12],"tldr",{},[13,14,15],"p",{},"This 20-item checklist covers critical React security configurations: XSS prevention, form security, state management, dependencies, and API calls. 5 critical items must be fixed before launch, 8 important items within the first week, and 7 recommended items when you can.",[13,17,18,19,23],{},"React does a solid job of escaping output by default, so developers tend to assume they are safe. They mostly are, right up until someone reaches for ",[20,21,22],"code",{},"dangerouslySetInnerHTML"," or stuffs a token into localStorage. Run through these items to make sure your React app is not quietly exposing things it should not be.",[25,26],"print-button",{},[28,29,31,36,40,44,48],"checklist-section",{"title":30},"Quick Checklist (5 Critical Items)",[32,33],"checklist-item",{"description":34,"label":35},"React's escape is intentional - don't bypass with user data","No dangerouslySetInnerHTML with user content",[32,37],{"description":38,"label":39},"Client validation is for UX, not security","Server-side validation for all forms",[32,41],{"description":42,"label":43},"State persists and can leak via React DevTools","No tokens/secrets in React state",[32,45],{"description":46,"label":47},"XSS can access localStorage - use HttpOnly cookies","No sensitive data in localStorage",[32,49],{"description":50,"label":51},"Never send data over HTTP","HTTPS for all API calls",[28,53,56,59,63,67],{"title":54,"count":55},"XSS Prevention","4",[32,57],{"description":58,"label":35},"React's escape is intentional - don't bypass with user data. How to prevent XSS",[32,60],{"description":61,"label":62},"Use DOMPurify to sanitize any HTML you must render. How to sanitize HTML","HTML sanitized if dangerouslySetInnerHTML needed",[32,64],{"description":65,"label":66},"javascript: URLs can execute code - validate protocols. How to validate URLs","No user content in href without validation",[13,68,69],{},"::checklist-item{label=\"External links use rel=\"noopener noreferrer\"\" description=\"Prevents window.opener access from external pages. How to secure external links\"}\n::",[28,71,73,76,80],{"title":72,"count":55},"Form Security",[32,74],{"description":75,"label":39},"Client validation is for UX, not security. How to validate on server",[32,77],{"description":78,"label":79},"Use anti-CSRF tokens or SameSite cookies. How to prevent CSRF","CSRF protection on form submissions",[13,81,82],{},"::checklist-item{label=\"Autocomplete attributes set correctly\" description=\"autocomplete=\"off\" for sensitive fields if needed. How to configure autocomplete\"}\n::\n::checklist-item{label=\"Password fields use type=\"password\"\" description=\"Don't use type=\"text\" for passwords. How to secure password fields\"}\n::",[28,84,86,89,93,96],{"title":85,"count":55},"State Management",[32,87],{"description":88,"label":43},"State persists and can leak via React DevTools. How to secure React state",[32,90],{"description":91,"label":92},"Reset state/stores when user logs out. How to clear state on logout","Sensitive data cleared on logout",[32,94],{"description":95,"label":47},"XSS can access localStorage - use HttpOnly cookies. How to store tokens securely",[32,97],{"description":98,"label":99},"Check persist configurations for sensitive data. How to secure state persistence","Redux/Zustand not persisting secrets",[28,101,103,107,111,115],{"title":102,"count":55},"Dependencies",[32,104],{"description":105,"label":106},"Check for known vulnerabilities in dependencies. How to audit npm packages","npm audit run regularly",[32,108],{"description":109,"label":110},"Update packages with security patches. How to update dependencies","Dependencies updated for security",[32,112],{"description":113,"label":114},"Remove packages you're not using. How to remove unused packages","No unused dependencies",[32,116],{"description":117,"label":118},"package-lock.json ensures consistent installs. How to use lock files","Lock file committed",[28,120,122,125,129,133],{"title":121,"count":55},"API Calls",[32,123],{"description":124,"label":51},"Never send data over HTTP. How to enforce HTTPS",[32,126],{"description":127,"label":128},"Use headers, not query params for tokens. How to secure API calls","Auth tokens not in URLs",[32,130],{"description":131,"label":132},"Catch errors and show user-friendly messages. How to handle API errors","Errors don't expose internals",[32,134],{"description":135,"label":136},"Cancel requests when component unmounts. How to use AbortController","Abort controllers for unmounted components",[138,139,141],"h2",{"id":140},"react-security-best-practices","React Security Best Practices",[13,143,144],{},"React's default escaping prevents most XSS attacks, making it safer than vanilla JavaScript. However, certain patterns like dangerouslySetInnerHTML, user-provided URLs in href, and storing secrets in state can introduce vulnerabilities.",[146,147,148,155,161],"faq-section",{},[149,150,152],"faq-item",{"question":151},"Is React safe from XSS attacks?",[13,153,154],{},"React escapes content by default, preventing most XSS attacks. However, using dangerouslySetInnerHTML bypasses this protection. If you must render user HTML, sanitize it with DOMPurify first. Also validate user-provided URLs before using them in href attributes.",[149,156,158],{"question":157},"Should I store tokens in React state?",[13,159,160],{},"Avoid storing sensitive tokens in React state or localStorage. State can be accessed via React DevTools, and localStorage is accessible to any XSS attack. Use HttpOnly cookies for sensitive tokens instead - they can't be accessed by JavaScript.",[149,162,164],{"question":163},"How do I prevent CSRF in React?",[13,165,166],{},"Use SameSite cookies (Strict or Lax) for session management. If you need additional protection, implement anti-CSRF tokens: generate a token on the server, store it in a cookie, and include it in form submissions or request headers.",[168,169,170,176,181],"related-articles",{},[171,172],"related-card",{"description":173,"href":174,"title":175},"Complete guide to React security","/blog/best-practices/react","React Security Guide",[171,177],{"description":178,"href":179,"title":180},"Full-stack React security","/blog/checklists/nextjs-security-checklist","Next.js Security Checklist",[171,182],{"description":183,"href":184,"title":185},"Understanding cross-site scripting","/blog/vulnerabilities/xss","XSS Explained",[187,188,191,195],"cta-box",{"href":189,"label":190},"/","Start Free Scan",[138,192,194],{"id":193},"scan-your-react-project","Scan Your React Project",[13,196,197],{},"Our scanner checks for XSS vulnerabilities, insecure patterns, and dependency issues.",{"title":199,"searchDepth":200,"depth":200,"links":201},"",2,[202,203],{"id":140,"depth":200,"text":141},{"id":193,"depth":200,"text":194},"checklists","2026-02-03","Complete React security checklist. XSS prevention, dangerouslySetInnerHTML, form handling, state management, and dependency security.",false,"md",[210,212],{"question":151,"answer":211},"React escapes content by default, preventing most XSS attacks. However, using dangerouslySetInnerHTML bypasses this protection. If you must render user HTML, sanitize it with DOMPurify first.",{"question":157,"answer":213},"Avoid storing sensitive tokens in React state or localStorage. State can be accessed via React DevTools, and localStorage is accessible to any XSS attack. Use HttpOnly cookies for sensitive tokens instead.","green",null,{},true,"Complete React security checklist. XSS, forms, state, dependencies.","/blog/checklists/react-security-checklist","[object Object]","HowTo",{"title":5,"description":206},{"loc":219},"blog/checklists/react-security-checklist",[226],"Security Checklist","summary_large_image","SP0RfBxnvOV4Aqvo0pOZOd6Nye1pMPD0wtGAQLbybqQ",1775843930854]