Security

Client-side security is the practice of protecting browser-based JavaScript apps from attacks like cross-site scripting (XSS) and cross-site request forgery (CSRF) by sanitizing input, handling tokens safely, and layering defenses.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

While this online editor runs real JavaScript, some security examples require a browser environment. Download Node.js to run JavaScript on your computer, use your browser's Developer Console (Press F12) to test code snippets, or create a .html file with <script> tags and open it in your browser.

Master XSS prevention, CSRF protection, input sanitization, secure token handling, and defense-in-depth architecture.

What You'll Learn

The browser is exposed territory . Anyone can inject HTML, override JavaScript, modify requests, steal tokens, and manipulate the DOM. The only safe approach is to treat all user-controlled input as hostile .

XSS occurs when malicious script executes inside your page. Even one tiny mistake can compromise your entire application.

Escaping converts dangerous characters into safe HTML entities. This is essential when you must display user content.

DOM XSS happens when JavaScript reads user input (from URLs, forms, storage) and inserts it into the page without sanitization. This is extremely common in React, Vue, and Angular apps.

CSRF forces a victim's browser to make authenticated requests without their knowledge. If your app uses cookies for authentication, you're vulnerable.

Any time user input appears in HTML, URLs, DOM, or attributes — it must be sanitized.

Use DOMPurify for production HTML sanitization. It handles SVG attacks, mutation XSS, and edge cases that simple regex cannot.

Even when developers escape <script> tags, attackers exploit less obvious injection points.

Token theft is the ultimate goal of most XSS attacks. Never store sensitive tokens in localStorage — XSS can steal them.

CSP is a browser-level defense that restricts what scripts can run. Even if an attacker injects a script, CSP can block it from executing.

No single mechanism protects a modern app. You need layered security — if one layer fails, others prevent disaster.

Practice quiz

What does XSS stand for?

  • Extended Style Sheets
  • XML Server Security
  • Cross-Site Scripting
  • Cross-Server Sync

Answer: Cross-Site Scripting. XSS is Cross-Site Scripting, where malicious script executes inside your page.

Which is the safe way to display untrusted user input?

  • element.textContent = input
  • element.innerHTML = input
  • eval(input)
  • document.write(input)

Answer: element.textContent = input. textContent renders input as plain text, not executable HTML.

What does HTML escaping do?

  • Removes all text
  • Encrypts the page
  • Deletes scripts from disk
  • Converts dangerous characters like < and > into safe HTML entities

Answer: Converts dangerous characters like < and > into safe HTML entities. Escaping turns characters like < > & " into entities so they can't form active markup.

What is CSRF?

  • A faster fetch API
  • Forcing a victim's browser to make authenticated requests without their knowledge
  • A CSS framework
  • A caching strategy

Answer: Forcing a victim's browser to make authenticated requests without their knowledge. Cross-Site Request Forgery tricks the browser into sending authenticated requests.

Which is a recommended CSRF defense in the lesson?

  • CSRF tokens and SameSite cookies
  • Store tokens in the URL
  • Use eval for validation
  • Disable HTTPS

Answer: CSRF tokens and SameSite cookies. CSRF tokens, SameSite cookies, and Origin validation defend against CSRF.

Why should you NOT store sensitive tokens in localStorage?

  • It is too slow
  • It has no space
  • XSS can read it
  • It is deprecated

Answer: XSS can read it. localStorage is readable by JavaScript, so an XSS attack can steal the token.

When validating a URL from user input, which protocols should be allowed?

  • javascript: and data:
  • http: and https: only
  • any protocol
  • file: only

Answer: http: and https: only. Only allow http/https; reject javascript: and data: which can execute code.

What is Content Security Policy (CSP)?

  • A linter rule
  • A password manager
  • A bundler plugin
  • A browser-level defense restricting which scripts can run

Answer: A browser-level defense restricting which scripts can run. CSP is set via HTTP header and restricts script sources, blocking injected scripts.

Which dangerous function should you never call with user input?

  • JSON.parse()
  • eval()
  • Array.map()
  • String.trim()

Answer: eval(). eval() executes arbitrary code and must never run untrusted input.

What does defense-in-depth mean for a secure app?

  • One strong firewall is enough
  • Only validate on the server
  • Layer multiple security mechanisms so others hold if one fails
  • Encrypt the CSS

Answer: Layer multiple security mechanisms so others hold if one fails. Layered security (validation, sanitization, CSP, tokens) means one failure doesn't doom the app.