Content-Security-Policy là gì?

Content-Security-Policy (CSP) là một HTTP response header giúp ngăn chặn cross-site scripting (XSS), clickjacking và các cuộc tấn công tiêm mã khác. Nó hoạt động bằng cách chỉ định những nguồn nội dung nào được phép tải trên trang web của bạn.

Không có CSP

Trạng Thái Dễ Bị Tấn Công

Trình duyệt tải tài nguyên từ bất kỳ nguồn gốc nào
Trang web bị lộ trước việc tiêm script độc hại
Không kiểm soát được các nguồn nội dung
Rủi ro tấn công XSS cao hơn

Có CSP

Trạng Thái Được Bảo Vệ

Kiểm soát nghiêm ngặt các miền được phép
Tự động chặn các script không được phép
Quyền tài nguyên chi tiết
Lớp bảo mật phòng thủ sâu

Tại Sao Sử Dụng CSP Header?

Bảo Vệ XSS

Chặn các script không được phép thực thi trên các trang của bạn, ngăn chặn kẻ tấn công tiêm mã độc hại thông qua các lỗ hổng.

Ngăn Chặn Trộm Dữ Liệu

Kiểm soát nơi trang của bạn có thể gửi dữ liệu thông qua kết nối fetch, XHR hoặc WebSocket, ngăn chặn việc rò rỉ dữ liệu.

Phòng Chống Clickjacking

Sử dụng chỉ thị frame-ancestors để ngăn chặn trang web của bạn bị nhúng trong các iframe độc hại cho các cuộc tấn công clickjacking.

Ngăn Chặn Nội Dung Hỗn Hợp

Bắt buộc HTTPS cho tất cả tài nguyên với upgrade-insecure-requests, loại bỏ các lỗ hổng nội dung hỗn hợp.

Công Cụ Này Giúp Như Thế Nào

Viết CSP headers theo cách thủ công dễ xảy ra lỗi và yêu cầu ghi nhớ tên chỉ thị và cú pháp nguồn. Trình tạo trực quan này cho phép bạn bật/tắt chỉ thị, nhấp vào các giá trị nguồn và ngay lập tức xem header được tạo ở định dạng bạn cần — cho dù đó là HTTP thô, Apache, Nginx hay PHP.

Lợi ích tiết kiệm thời gian: Cấu hình các chính sách bảo mật phức tạp trong vài phút thay vì hàng giờ, với xác thực theo thời gian thực và chuyển đổi định dạng tích hợp sẵn.

Table of Contents

1. Content-Security-Policy là gì?
2. Cách Sử Dụng Trình Tạo CSP Header
3. Tính Năng
4. Các Câu Hỏi Thường Gặp

Cách Sử Dụng Trình Tạo CSP Header

Chọn Điểm Bắt Đầu

Chọn một mẫu cài sẵn để bắt đầu với cấu hình phổ biến hoặc bắt đầu với Trống để xây dựng từ đầu. Các mẫu cài sẵn có sẵn bao gồm Nghiêm ngặt, Trang Web Cơ bản, SPA + API, WordPress, Thương mại điện tử và các cấu hình nặng CDN.

Cấu Hình Chỉ Thị

Bật hoặc tắt chỉ thị bằng cách nhấp vào hộp kiểm hoặc hàng tiêu đề của nó. Khi một chỉ thị được bật, bạn có thể:

Nhấp vào nút nguồn nhanh ('self', 'none', 'unsafe-inline', v.v.) để thêm các giá trị phổ biến
Nhập một miền tùy chỉnh (ví dụ: cdn.example.com, *.googleapis.com) và nhấp Thêm
Nhấp vào nút nguồn một lần nữa để xóa nó
Nhấp vào nút × trên các thẻ miền tùy chỉnh để xóa chúng

Xem Xét Cảnh Báo

Công cụ tự động phân tích chính sách của bạn và hiển thị các cảnh báo bảo mật. Cảnh báo đỏ chỉ ra các rủi ro bảo mật đáng kể, cảnh báo vàng gợi ý cải tiến và thông báo xanh cung cấp thông tin hữu ích.

Chọn Định Dạng Đầu Ra

Chọn định dạng đầu ra phù hợp với máy chủ web của bạn:

Raw - Giá trị HTTP header thô
Apache - Cho các tệp .htaccess hoặc tệp cấu hình Apache
Nginx - Cho các khối máy chủ nginx.conf
Meta Tag - Cho các thẻ HTML <meta> (lưu ý: Report-Only không được hỗ trợ)
PHP - Cho các lệnh gọi hàm PHP header()

Sao Chép và Triển Khai

Nhấp vào nút Sao Chép để sao chép header được tạo vào clipboard của bạn. Hãy cân nhắc bật chế độ Report-Only trước tiên để kiểm tra chính sách của bạn mà không chặn bất kỳ tài nguyên nào.

Thực hành tốt nhất: Luôn kiểm tra với chế độ Report-Only trong môi trường sản xuất trước khi thực thi chính sách để xác định các vấn đề tiềm ẩn mà không làm hỏng chức năng.

Tính Năng

Trình Tạo Chỉ Thị Trực Quan

Mỗi chỉ thị CSP được hiển thị dưới dạng một hàng tương tác với công tắc bật/tắt. Bật một chỉ thị để tiết lộ bảng điều khiển cấu hình nguồn của nó với các nút thêm nhanh và nhập miền tùy chỉnh. Các chỉ thị được tổ chức thành bốn danh mục: Fetch, Document, Navigation và Other.

Trình tạo chỉ thị tương tác với công tắc bật/tắt và nút thêm nguồn nhanh

16 Chỉ Thị Được Hỗ Trợ

Chỉ Thị Fetch

Kiểm soát nơi các loại tài nguyên khác nhau có thể được tải từ:

default-src - Fallback cho tất cả các chỉ thị fetch
script-src - Nguồn JavaScript
style-src - Bảng tính CSS
img-src - Hình ảnh và favicon
connect-src - Kết nối Fetch, XHR, WebSocket
font-src - Web fonts
object-src - Plugin (Flash, Java applets)
media-src - Audio và video
frame-src - Bối cảnh duyệt lồng nhau (iframe)
worker-src - Web Workers và Service Workers
manifest-src - Web app manifests

Chỉ Thị Document & Navigation

Kiểm soát hành vi tài liệu và điều hướng:

base-uri - Hạn chế các URL có thể xuất hiện trong phần tử <base>
form-action - Các điểm cuối hợp lệ cho việc gửi biểu mẫu
frame-ancestors - Các cha hợp lệ có thể nhúng trang này (bảo vệ clickjacking)

Quan trọng: frame-ancestors không thể được đặt thông qua meta tag — nó yêu cầu một HTTP header.

Chỉ Thị Khác

Các cải tiến bảo mật bổ sung:

upgrade-insecure-requests - Tự động nâng cấp HTTP lên HTTPS
block-all-mixed-content - Chặn tất cả nội dung hỗn hợp (không dùng nữa, sử dụng upgrade-insecure-requests)
report-uri - Điểm cuối để gửi báo cáo vi phạm (không dùng nữa, sử dụng report-to)

Mẫu Cài Sẵn

Nghiêm Ngặt

Cấu hình bảo mật tối đa với các nguồn được phép tối thiểu. Tốt nhất cho các ứng dụng bảo mật cao.

Trang Web Cơ Bản

Chính sách cân bằng cho các trang web tiêu chuẩn với tài nguyên tự lưu trữ và CDN phổ biến.

SPA + API

Được tối ưu hóa cho Single Page Applications với các backend API và tải mô-đun động.

WordPress

Được cấu hình sẵn cho các trang WordPress với các yêu cầu plugin và chủ đề phổ biến.

Thương Mại Điện Tử

Bao gồm tích hợp Stripe, PayPal và cổng thanh toán cho các cửa hàng trực tuyến.

CDN Nặng

Được cấu hình cho các trang web sử dụng Google Analytics, fonts và nhiều nhà cung cấp CDN.

Quản Lý Nguồn Thông Minh

Công cụ xử lý logic giá trị nguồn tự động để ngăn chặn lỗi cấu hình:

Loại Trừ Lẫn Nhau

Chọn 'none' tự động xóa tất cả các nguồn khác vì chúng loại trừ lẫn nhau.

Thay Thế Tự Động

Thêm bất kỳ nguồn nào khi 'none' hoạt động tự động xóa 'none' trước tiên.

Ngăn Chặn Trùng Lặp

Các nguồn trùng lặp được tự động phát hiện và ngăn chặn không được thêm.

Phân Tích Bảo Mật

Cảnh báo theo thời gian thực cảnh báo bạn về các vấn đề bảo mật tiềm ẩn trong cấu hình CSP của bạn:

Cảnh báo quan trọng: Sử dụng 'unsafe-inline' hoặc 'unsafe-eval' trong script-src làm suy yếu đáng kể bảo vệ XSS.

Khuyến nghị bảo mật: Các chỉ thị object-src hoặc base-uri bị thiếu có thể để lại các lỗ hổng mở.

Ghi chú thực hành tốt nhất: Sử dụng ký tự đại diện (ví dụ: https://*) làm suy yếu bảo vệ CSP bằng cách cho phép tất cả các miền.

Nhiều Định Dạng Đầu Ra

Định Dạng	Trường Hợp Sử Dụng	Hỗ Trợ Report-Only
Raw HTTP	Giá trị header thô cho bất kỳ máy chủ nào	Có
Apache	Tệp .htaccess hoặc httpd.conf	Có
Nginx	Khối máy chủ nginx.conf	Có
Meta Tag	Phần tử HTML <meta>	Không
PHP	Hàm PHP header()	Có

Hạn chế meta tag: Khi sử dụng định dạng Meta Tag với chế độ Report-Only hoạt động, một ghi chú được hiển thị vì các meta tag không thể sử dụng Content-Security-Policy-Report-Only.

Dữ Liệu Của Bạn Vẫn Riêng Tư

Tất cả xử lý diễn ra trong trình duyệt của bạn mà không có giao tiếp máy chủ:

Không Có Yêu Cầu Máy Chủ

Cấu hình chính sách của bạn không bao giờ rời khỏi thiết bị của bạn. Tất cả việc tạo và xác thực diễn ra cục bộ bằng JavaScript.

Không Theo Dõi

Chúng tôi không thu thập hoặc lưu trữ bất kỳ dữ liệu sử dụng, chi tiết cấu hình hoặc phân tích về các chính sách CSP của bạn.

Các Câu Hỏi Thường Gặp

Sự khác biệt giữa Content-Security-Policy và Content-Security-Policy-Report-Only là gì?

Content-Security-Policy thực thi chính sách và chặn các tài nguyên vi phạm nó. Content-Security-Policy-Report-Only chỉ báo cáo các vi phạm mà không chặn bất cứ điều gì.

Quy trình được khuyến nghị: Sử dụng chế độ Report-Only trước tiên để kiểm tra chính sách của bạn và xác định các vấn đề trước khi thực thi nó trong môi trường sản xuất.

Cách tiếp cận hai giai đoạn này ngăn chặn việc vô tình phá vỡ chức năng trong khi cho phép bạn giám sát báo cáo vi phạm và tinh chỉnh chính sách của bạn một cách an toàn.

Tại sao tôi nên luôn bao gồm object-src 'none'?

Chỉ thị object-src kiểm soát các plugin như Flash và Java applets. Các plugin này có thể thực thi mã tùy ý và bỏ qua các bảo vệ CSP khác.

Đặt object-src thành 'none' chặn tất cả nội dung plugin, được khuyến nghị vì:

Các trang web hiện đại hiếm khi cần plugin
Flash và Java applets không dùng nữa và không an toàn
Plugin có thể vượt qua các hạn chế script-src của CSP
Hầu hết các trình duyệt đang loại bỏ hỗ trợ plugin

'unsafe-inline' thực sự nguy hiểm như vậy sao?

Có. Khi bạn cho phép 'unsafe-inline' trong script-src, bất kỳ script nội tuyến nào trên trang của bạn đều có thể thực thi — bao gồm các script được tiêm bởi kẻ tấn công thông qua các lỗ hổng XSS. Điều này làm suy yếu đáng kể bảo vệ CSP.

Với 'unsafe-inline'

Dễ Bị Tấn Công

Tất cả các script nội tuyến thực thi
Các script được tiêm chạy tự do
Bảo vệ XSS bị suy yếu

Với nonces/hashes

Được Bảo Vệ

Chỉ các script được phép danh sách trắng chạy
Các script được tiêm bị chặn
Bảo vệ XSS mạnh mẽ

Các giải pháp tốt hơn: Sử dụng nonces hoặc hashes thay thế, cho phép các script nội tuyến cụ thể trong khi chặn các script được tiêm.

default-src làm gì?

default-src hoạt động như một fallback cho tất cả các chỉ thị fetch không được đặt rõ ràng. Ví dụ, nếu bạn đặt default-src 'self' nhưng không đặt img-src, hình ảnh sẽ chỉ tải từ miền của bạn.

Nguyên tắc chính: Bất kỳ chỉ thị nào bạn đặt rõ ràng sẽ ghi đè default-src cho loại tài nguyên đó.

Ví dụ:

CSP với fallback default-src

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' cdn.example.com;
  img-src *;

/* Result:
 * - Scripts: 'self' + cdn.example.com (explicit)
 * - Images: * (explicit)
 * - Styles: 'self' (falls back to default-src)
 * - Fonts: 'self' (falls back to default-src)
 */

Tôi có thể sử dụng định dạng meta tag cho tất cả các tính năng CSP không?

Không. Cách tiếp cận meta tag HTML có những hạn chế đáng kể:

Không thể sử dụng chế độ Report-Only
Không thể đặt chỉ thị frame-ancestors
Không thể sử dụng report-uri hoặc report-to
Không thể sử dụng chỉ thị sandbox

Khuyến nghị: Để có đầy đủ chức năng CSP, hãy sử dụng HTTP headers được cấu hình trên máy chủ web của bạn (Apache, Nginx, v.v.).

Meta tags hữu ích cho việc kiểm tra nhanh hoặc khi bạn không có quyền truy cập cấu hình máy chủ, nhưng HTTP headers cung cấp các khả năng CSP hoàn chỉnh.

'strict-dynamic' là gì và khi nào tôi nên sử dụng nó?

'strict-dynamic' cho trình duyệt biết rằng nó nên tin tưởng các script được tải bởi các script đã được tin tưởng. Điều này hữu ích cho các ứng dụng hiện đại tải động các mô-đun JavaScript.

Lợi Ích

Đơn giản hóa CSP cho các ứng dụng động

Hoạt động với các module bundlers
Hỗ trợ dynamic imports
Giảm độ phức tạp chính sách

Cách Hoạt Động

Mô hình lan truyền tin tưởng

Danh sách cho phép dựa trên host bị bỏ qua
Hoạt động với các chính sách dựa trên nonce
Các script tải các script đáng tin cậy khác

Tốt nhất cho: Single Page Applications (SPAs), các ứng dụng React/Vue/Angular và các trang web sử dụng Webpack hoặc các bundler tương tự.