Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.
3. Bảo Mật & Xác Thực Nâng Cao: Sanitize Input, Security Headers Chuẩn A+, Content-Security-Policy & Rate Limiting
Thiết lập các lớp bảo vệ tầng ứng dụng: Ép kiểm tra dữ liệu đầu vào bằng Schema Validator, cấu hình Content-Security-Policy (CSP) đặc quyền tối thiểu loại bỏ 'unsafe-inline', kích hoạt 6 Security Headers OWASP A+ và siết Rate Limiting.
🛡️ 5 Trụ Cột Hardening Ứng Dụng Web Cho Builder
- Schema Validation & Sanitization: Bắt buộc xác thực kiểu dữ liệu và độ dài tối thiểu tại mọi endpoint (chặn SQLi, NoSQLi và Stored XSS).
- Cấu hình Content-Security-Policy (CSP) Chuẩn Quân Sự:
- Dùng chính sách đặc quyền tối thiểu:
default-src 'none';. Mặc định chặn mọi tài nguyên trừ khi được khai báo đích danh. - Nói KHÔNG với
'unsafe-inline'và'unsafe-eval': Hai chỉ thị này làm mất 80% sức mạnh của CSP và khiến Mozilla Observatory trừ ngay 20 điểm.
- Kiến Trúc Event Delegation (Tách Rời Hoàn Toàn HTML & JS):
- Xóa bỏ triệt để các thuộc tính
onclick="...",onload="..."trong mã HTML. - Đưa toàn bộ logic bắt sự kiện vào file JavaScript bên ngoài qua
addEventListenerhoặc bắt sự kiện ủy quyền (Event Delegation).
- Role-Based Access Control (RBAC): Luôn kiểm tra quyền hạn ở tầng Backend API (không chỉ ẩn nút bấm ở giao diện).
- Rate Limiting chống Spam/DDoS: Giới hạn tần suất gọi API đăng nhập, gửi form tư vấn (5 req/phút) để bảo vệ server.
# CẤU HÌNH CONTENT-SECURITY-POLICY CHUẨN A+ TRONG FLASK / FASTAPI
from flask import Flask, Response
app = Flask(__name__)
CSP_POLICY = (
"default-src 'none'; " # Mặc định chặn tất cả
"script-src 'self' https://challenges.cloudflare.com; " # Chỉ chạy JS nội bộ & Cloudflare Turnstile
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; "
"font-src 'self' https://fonts.gstatic.com data:; "
"img-src 'self' data: https: blob:; "
"connect-src 'self' https:; "
"frame-src 'self' https://challenges.cloudflare.com; "
"form-action 'self'; " # Chỉ cho phép submit form về chính domain (+10 điểm Mozilla)
"base-uri 'self'; "
"frame-ancestors 'self';" # Chống Clickjacking thay thế X-Frame-Options
)
@app.after_request
def set_security_headers(response: Response):
response.headers['Content-Security-Policy'] = CSP_POLICY
response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains; preload'
response.headers['X-Content-Type-Options'] = 'nosniff'
response.headers['X-Frame-Options'] = 'SAMEORIGIN'
response.headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'
response.headers['Permissions-Policy'] = 'camera=(), microphone=(), geolocation=(), payment=()'
return response
💡 Khắc Phục Án Phạt Subresource Integrity (SRI) Của Thư Viện Bên Thứ Ba
Khi nhúng thư viện JavaScript từ CDN ngoài (như SDK phân tích, chatbot, Google Translate), các công cụ đánh giá an ninh mạng như Mozilla Observatory sẽ phạt trừ điểm (-5 đến -20) nếu thẻ script không có thuộc tính integrity="sha384-...".
Tuy nhiên, các dịch vụ như Google Translate liên tục cập nhật mã nguồn động, khiến hash SRI bị thay đổi liên tục và làm script bị trình duyệt chặn đứng.
#### 🚀 Giải Pháp Kỹ Thuật: On-Demand Lazy Loading (Tải Khi Người Dùng Yêu Cầu)
- HTML Tĩnh 100% Same-Origin: Không chèn bất kỳ thẻ
<script src="https://...">nào của bên thứ ba vào mã HTML tĩnh ban đầu. Nhờ đó, mã HTML đạt 100% tài nguyên nội bộ, hoàn toàn miễn nhiễm với án phạt SRI! - Nạp Động Qua JavaScript: Khi người dùng hover vào nút ngôn ngữ hoặc bấm chuyển tiếng Anh, một hàm JavaScript sẽ tạo thẻ
<script>và nhúng vào DOM trong thời gian thực.
// ON-DEMAND LAZY LOADER CHO THƯ VIỆN BÊN THỨ 3 (static/i18n.js)
let translateScriptLoaded = false;
function loadGoogleTranslateOnDemand() {
if (translateScriptLoaded) return;
translateScriptLoaded = true;
const script = document.createElement('script');
script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
script.async = true;
document.body.appendChild(script);
}
// Chỉ nạp khi người dùng tương tác: rê chuột, focus hoặc bấm nút chuyển ngôn ngữ
const langBtn = document.querySelector('[data-lang-toggle]');
if (langBtn) {
langBtn.addEventListener('mouseenter', loadGoogleTranslateOnDemand, { once: true });
langBtn.addEventListener('focus', loadGoogleTranslateOnDemand, { once: true });
langBtn.addEventListener('click', loadGoogleTranslateOnDemand, { once: true });
}
Thực hành và tự đánh giá
Rà soát toàn bộ mã HTML trong dự án web của bạn: Xóa bỏ toàn bộ các thuộc tính onclick, onload nội dòng, chuyển sang file JavaScript với addEventListener, và kích hoạt header Content-Security-Policy chặn 'unsafe-inline'.
AI Tinh Gọn hỗ trợ khảo sát hiện trạng, kèm 1-1 on-premise bảo mật dữ liệu, setup hạ tầng riêng và xuất hóa đơn VAT hợp pháp cho doanh nghiệp.
Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.