Đào tạo doanh nghiệpVibe Coding Sang Production: Kiến Trúc Bền Vững, Bảo Mật Hardening, CI/CD Gatekeeper & Docker Chống Sập Cho AI Apps
3/9

Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0335phút ước tínhThực chiến · Chuyên sâ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

  1. 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).
  2. 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''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.
  1. 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 addEventListener hoặc bắt sự kiện ủy quyền (Event Delegation).
  1. 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).
  2. 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.
example.py
# 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.
example.py
// 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:  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

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'.

🏢 BẠN MUỐN TRIỂN KHAI CHO CẢ PHÒNG BAN / DOANH NGHIỆP?
Đề Xuất Công Ty Tài Trợ & Đào Tạo In-House Trọn Gói

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.

⚖️ Bản quyền sở hữu trí tuệ: © 2026 AI Tinh Gọn (aitinhgon.vn) · Giấy phép Creative Commons CC BY-NC-ND 4.0. Cho phép tự học cá nhân, nghiêm cấm thương mại hóa hoặc bán lại. Giáo trình mở →

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.