Trong các ứng dụng web hiện đại, frontend không chỉ đóng vai trò hiển thị dữ liệu mà còn là một phần quan trọng trong việc đảm bảo an toàn cho toàn hệ thống. Khi kiến trúc ngày càng chuyển dịch sang SPA, micro-frontend và client-heavy apps, bề mặt tấn công (attack surface) ở phía client cũng mở rộng đáng kể.

Bài viết này sẽ đi qua những lỗ hổng bảo mật phổ biến nhất mà frontend engineer cần hiểu rõ: từ XSS, CSRF cho đến các vấn đề ít được chú ý hơn như clickjacking, CORS misconfiguration, token storage và supply chain attacks.

1. Cross-Site Scripting (XSS)

XSS là một trong những lỗ hổng phổ biến và nguy hiểm nhất, cho phép attacker thực thi JavaScript trên trình duyệt của người dùng.

Các dạng XSS

• Stored XSS: payload được lưu trong database và ảnh hưởng đến nhiều user
• Reflected XSS: payload nằm trong request và được phản hồi ngay lập tức
• DOM-based XSS: xảy ra hoàn toàn phía client do xử lý DOM không an toàn

Nguyên nhân chính

• Render trực tiếp input từ user vào DOM
• Sử dụng các API nguy hiểm như innerHTML, document.write
• Không sanitize dữ liệu

Phòng tránh

• Escape output (React, Vue mặc định hỗ trợ)
• Tránh sử dụng dangerouslySetInnerHTML nếu không cần thiết
• Sanitize HTML bằng thư viện như DOMPurify
• Thiết lập Content Security Policy (CSP) để hạn chế nguồn script

2. Cross-Site Request Forgery (CSRF)

CSRF khai thác việc browser tự động gửi cookie để thực hiện các request trái phép.

Điều kiện xảy ra

• User đã authenticated
• Server dựa vào cookie để xác thực
• Không có cơ chế xác minh request (token)

Phòng tránh

• CSRF token (synchronizer token pattern)
• SameSite cookie (Strict hoặc Lax)
• Không dùng GET cho các hành động thay đổi state
• Xác thực origin hoặc referer header

3. Clickjacking

Clickjacking xảy ra khi attacker nhúng ứng dụng của bạn vào iframe và lừa user click vào các element mà họ không nhận thức được.

Ví dụ Một nút "Delete Account" bị che bằng một layer invisible và user nghĩ rằng họ đang click vào một button khác.

Phòng tránh

Sử dụng header: X-Frame-Options: DENY hoặc: Content-Security-Policy: frame-ancestors 'none';

4. Cross-Origin Resource Sharing (CORS) Misconfiguration

CORS là cơ chế kiểm soát việc resource được truy cập từ domain khác. Tuy nhiên, cấu hình sai có thể dẫn đến việc lộ dữ liệu nhạy cảm.

Sai lầm phổ biến

Cho phép tất cả origin:Access-Control-Allow-Origin: * Kết hợp với: Access-Control-Allow-Credentials: true

→ Đây là cấu hình cực kỳ nguy hiểm

Best practice

• Chỉ whitelist các domain tin cậy
• Không dùng wildcard khi credentials được bật

5. Token Storage và Authentication Risks

Frontend thường xử lý access token, refresh token - nếu không cẩn thận sẽ dẫn đến account takeover.

Các lựa chọn lưu trữ localStorage / sessionStorage

• Dễ sử dụng
• Nhưng dễ bị XSS đánh cắp

HttpOnly Cookie

• Không truy cập được từ JavaScript
• An toàn hơn trước XSS
• Nhưng cần kết hợp CSRF protection

Khuyến nghị

• Ưu tiên HttpOnly cookie cho authentication
• Nếu dùng localStorage → phải đảm bảo XSS protection rất chặt

6. Open Redirect

Open redirect xảy ra khi ứng dụng cho phép redirect dựa trên input của user mà không validate. window.location = query.redirect;

Attacker có thể lợi dụng để dẫn user tới phishing site.

Phòng tránh

• Validate URL trước khi redirect
• Chỉ cho phép redirect nội bộ (internal routes)

7. Sensitive Data Exposure

Frontend thường vô tình làm lộ thông tin nhạy cảm.

Ví dụ

• Hardcode API keys trong code
• Log token ra console
• Lưu thông tin nhạy cảm trong Redux store

Phòng tránh

• Không expose secret ở frontend (mọi thứ client đều có thể bị đọc)
• Dùng environment variables đúng cách (build-time, không phải runtime secrets)
• Mask hoặc không log dữ liệu nhạy cảm

8. Dependency & Supply Chain Attacks

Frontend hiện đại phụ thuộc rất nhiều vào npm packages. Một package bị compromise có thể ảnh hưởng toàn bộ ứng dụng.

Ví dụ thực tế

• Một package nhỏ bị inject malware
• Script chạy trong build hoặc runtime

Phòng tránh

• Audit dependencies (npm audit)
• Lock version (package-lock.json, yarn.lock)
• Tránh dùng package không rõ nguồn gốc
• Sử dụng tools như Snyk

9. Security Headers

Một số HTTP headers quan trọng mà frontend engineer nên hiểu:

• Content-Security-Policy: kiểm soát nguồn resource
• X-Frame-Options: chống clickjacking
• X-Content-Type-Options: chống MIME sniffing
• Strict-Transport-Security (HSTS): bắt buộc HTTPS

10. Frontend Security Checklist

Một checklist nhanh cho production:

• Không render raw HTML từ user input
• Sanitize dữ liệu khi cần render HTML
• Sử dụng CSP
• Không lưu token nhạy cảm ở nơi dễ bị truy cập
• Kiểm soát redirect
• Cấu hình CORS đúng cách
• Audit dependencies thường xuyên
• Không expose secrets ở client

Kết luận

Frontend security không còn là “nice-to-have” mà là một phần thiết yếu của hệ thống. Khi frontend ngày càng xử lý nhiều logic hơn, trách nhiệm về bảo mật cũng tăng lên tương ứng.

Một frontend engineer giỏi không chỉ biết tối ưu performance hay UX, mà còn phải hiểu cách ứng dụng của mình có thể bị tấn công - và chủ động ngăn chặn từ sớm.