Securing Client-Side Storage and CSRF / XSS Mitigation0%
Integration Testing Multi-Page User Journeys

Securing Client-Side Storage and CSRF / XSS Mitigation

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Securing Client-Side Storage and CSRF / XSS Mitigation

Single-page applications are vulnerable to two primary client-side security threats: Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF). Securing enterprise React codebases requires understanding data sanitization, Content Security Policies (CSP), and secure storage boundaries.

1. Cross-Site Scripting (XSS) in React

XSS occurs when an attacker tricks an application into executing malicious JavaScript inside a user's browser. While React's JSX automatically escapes strings (e.g. {userInput} escapes <script> tags to &lt;script&gt;), developers often bypass this protection inadvertently.

Common XSS Vulnerabilities in React

Vulnerability 1: dangerouslySetInnerHTML

TSX
// ❌ Dangerous: Raw user HTML injected directly into DOM
<div dangerouslySetInnerHTML={{ __html: userComment.rawText }} />
 
// ✅ Safe: Always sanitize with DOMPurify before injection
import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userComment.rawText) }} />

Vulnerability 2: Dangerous javascript: URLs in Anchor Tags

TSX
// ❌ Dangerous: If userWebsite is "javascript:alert(document.cookie)", clicking executes script!
<a href={userWebsite}>Visit Profile</a>
 
// ✅ Safe: Validate protocol whitelist
function isSafeUrl(url: string): boolean {
try {
const parsed = new URL(url);
return ["http:", "https:", "mailto:"].includes(parsed.protocol);
} catch {
return false;
}
}
<a href={isSafeUrl(userWebsite) ? userWebsite : "#"}>Visit Profile</a>

2. Cross-Site Request Forgery (CSRF) Mitigation

CSRF occurs when a malicious website instructs a victim's browser to execute an unwanted action on a trusted application where the victim is currently authenticated via cookies.

Output
Victim visits malicious-site.com
Malicious site triggers: <img src="https://bank.com/api/transfer?to=attacker&amt=5000" />
Browser automatically attaches bank.com session cookies!

Mitigation Strategies

  1. 1
    SameSite=Lax or SameSite=Strict Cookie Attribute: Blocks cross-site cookie transmission on third-party requests.
  2. 2
    Double Submit CSRF Token: Server generates a random CSRF token in an accessible cookie, and client Axios interceptors mirror it into a custom header (X-CSRF-Token):
TypeScript
apiClient.interceptors.request.use((config) => {
const csrfToken = getCookie("CSRF-TOKEN");
if (csrfToken && config.headers) {
config.headers["X-CSRF-Token"] = csrfToken;
}
return config;
});

3. Client Storage Comparison

Storage MechanismXSS VulnerabilityPersistenceSize LimitAutomatic Cookie Transmission
In-Memory VariableHighest safety (resets on reload)Session/Tab lifetimeMemory boundNo
httpOnly CookieProtected from JavaScript accessConfigurable~4 KBYes (on HTTP requests)
localStorageVulnerable to any XSSPermanent~5-10 MBNo
sessionStorageVulnerable to any XSSTab lifetime~5 MBNo

4. Content Security Policy (CSP)

A Content Security Policy header sent by the web server acts as the final line of defense against XSS by restricting which domains can execute scripts, connect to WebSockets, or load stylesheets:

HTTP
Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.enterprise.com wss://api.enterprise.com;
Interactive Quiz

Practice Quiz

Question 1
How does React's default JSX syntax protect against Cross-Site Scripting (XSS)?
Question 2
What security library should always be used to sanitize strings before passing to dangerouslySetInnerHTML?
Question 3
Why is an <a href={userInput}> tag susceptible to XSS even in standard React?
Question 4
How does the SameSite=Strict cookie attribute protect against CSRF attacks?
Question 5
What is the primary function of a Content Security Policy (CSP) HTTP response header?
Next Lesson

Integration Testing Multi-Page User Journeys

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Role-Based Access Control (RBAC) and Permission MatricesIntegration Testing Multi-Page User Journeys

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext