1. What does front-end security protect against?

There is only one core goal:

Prevent user-controllable data from being executed as "code"

The nature of the attack is usually:

• Injection
• Override (Auth/Permissions)
• information leakage
• supply chain attack

2. Must-test and must-understand front-end security issues

1️⃣ XSS (cross-site scripting attack) ⭐⭐⭐⭐⭐

essence

User input → executed by the browser as JS

Type

Type	Description
Storage type	Malicious scripts stored in database
Reflective	URL parameters are executed directly
DOM type	JS operating DOM results in

Example

<div id="app"></div>
<script>
  const name = location.search.slice(6)
  document.getElementById('app').innerHTML = name
</script>

Visit:

?name=<img src=x onerror=alert(1)>

Defense Plan (Key Points)

✅ Never trust user input

1️⃣ Output encoding (most important)

element.textContent = userInput

2️⃣ Avoid innerHTML / v-html / dangerouslySetInnerHTML

3️⃣ Rich text → Whitelist filtering

• DOMPurify
• sanitize-html

4️⃣ CSP (Content Security Policy)

Content-Security-Policy:
  default-src 'self';
  script-src 'self';

5️⃣ Cookie settings

Set-Cookie: token=xxx; HttpOnly; Secure

2️⃣ CSRF (Cross-site request forgery) ⭐⭐⭐⭐⭐

essence

Use your browser to automatically carry cookies

Example

<img src="https://bank.com/transfer?to=hacker&money=10000">

defense plan

1️⃣ CSRF Token (mainstream)

headers: {
  'X-CSRF-TOKEN': token
}

2️⃣ SameSite Cookie

Set-Cookie: session=xxx; SameSite=Lax

3️⃣ Verify Referer / Origin

3️⃣ Clickjacking

essence

iframe transparent coverage to induce clicks

defense

X-Frame-Options: DENY

or

Content-Security-Policy: frame-ancestors 'none';

4️⃣ Front-end authentication & unauthorized access issues ⭐⭐⭐⭐

Common mistakes

if (user.role === 'admin') {
  showAdminButton()
}

⚠️ Front-end judgment ≠ Security

correct principle

• Frontend: Display Control
• Backend: Permission verification

5️⃣ Token / JWT Security ⭐⭐⭐⭐

Common risks

• Save localStorage → Easy to XSS theft
• JWT never expires

Recommended plan

Scenario	Suggestions
Login status	HttpOnly Cookie
Access Token	Short term
Refresh Token	HttpOnly

6️⃣ What can front-end encryption prevent?⭐⭐⭐

❌ Cannot stop someone who controls the endpoint from:

• Debugging and reading plaintext at runtime
• Intercepting data at encryption and decryption boundaries
• Reverse engineering and extracting keys embedded in the frontend

✅ With correct algorithms and key management, can protect:

• Data confidentiality, reducing direct plaintext exposure
• Data in transit through HTTPS encryption, integrity protection, and authentication

Common:

• HTTPS
• AES / RSA are cryptographic algorithms, not obfuscation; security depends on modes, parameters, and key management. Keys embedded in the frontend cannot be kept secret from someone who controls that endpoint. Web Crypto.

7️⃣ Supply chain security (new focus of modern front-end) ⭐⭐⭐⭐

risk

• npm package is poisoned
• Dependency version drift

defense

• package-lock.json / pnpm-lock.yaml
• npm audit
• fixed version
• Private npm repository

3. Framework layer security (Vue/React)

Vue

• Default is automatically escaped
• v-html = High Risk
• Command parameter injection (:href="userInput")

React

• JSX safe by default
• dangerouslySetInnerHTML = Dangerous
• Event binding is safe (strings will not be executed)

4. Safety Checklist in real projects ✅

• ✔ Don’t use eval / new Function
• ✔ All APIs use HTTPS
• ✔ Do not store Token in localStorage (or strictly prevent XSS)
• ✔ Secondary confirmation of important operations
• ✔ All interface backends perform authentication
• ✔ Rich text must be sanitized
• ✔ CSP + HttpOnly Cookie

5. Frequently asked questions in interviews (you will definitely encounter them)

• ❓ What is the difference between XSS and CSRF?

Standard answer template:

• XSS injects malicious scripts into the page and attacks the user;

• CSRF uses the user login state to initiate illegal requests and attacks the server.

• ❓ Why can’t the front end perform security verification?

One sentence:

• The front-end code is completely tamperable and can only be used as an experience optimization and cannot be used as a security boundary.