Chính sách bảo mật nội dung (CSP) là một tính năng bảo mật quan trọng trong các ứng dụng web hiện đại. Bảo vệ ứng dụng của bạn khỏi cross-site scripting (XSS) và các cuộc tấn công chèn mã khác bằng cách chỉ định nguồn nội dung mà trình duyệt có thể tải. Bài viết này cung cấp hướng dẫn chi tiết và trực quan về cách triển khai CSP trong ứng dụng Node.js Express của bạn.
1. Tìm hiểu Chính sách bảo mật nội dung (CSP)
Chính sách bảo mật nội dung là gì?
CSP là một tính năng bảo mật xác định nguồn nội dung mà trình duyệt có thể tải. Điều này bao gồm bảng định kiểu, tập lệnh, hình ảnh, v.v. Bằng cách chỉ định nguồn, bạn có thể ngăn nội dung độc hại hoặc trái phép chạy.
Tại sao nên sử dụng CSP trong ứng dụng của bạn?
CSP hữu ích cho:
- Ngăn chặn các cuộc tấn công XSS
- giảm phạm vi tấn công
- Bảo vệ dữ liệu người dùng nhạy cảm
- Đảm bảo tính toàn vẹn của ứng dụng
2. Thiết lập ứng dụng Node.js Express
Đầu tiên, hãy thiết lập một ứng dụng Node.js Express cơ bản. Tạo một thư mục mới và khởi tạo một dự án npm mới.
1 2 3 4 | $ <span class="token function">mkdir</span> csp-nodejs $ <span class="token builtin class-name">cd</span> csp-nodejs $ <span class="token function">npm</span> init -y |
Tiếp theo, cài đặt Express và các phụ thuộc cần thiết khác.
1 2 | $ <span class="token function">npm</span> <span class="token function">install</span> express helmet |
Tạo tệp app.js và thiết lập máy chủ Express cơ bản.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'express'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> app <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">req <span class="token punctuation">,</span> res</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> res <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token string">'こんにちは、世界！'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> app <span class="token punctuation">.</span> <span class="token function">listen</span> <span class="token punctuation">(</span> <span class="token number">3000</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'ポート3000でサーバーがリッスンしています'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Bây giờ chúng ta đã thiết lập một ứng dụng Express cơ bản, hãy chuyển sang triển khai CSP.
3. Triển khai CSP bằng phần mềm trung gian Mũ bảo hiểm
Sử dụng phần mềm trung gian Mũ bảo hiểm để đặt tiêu đề CSP. Mũ bảo hiểm là tập hợp các chức năng phần mềm trung gian bảo mật bảo vệ ứng dụng của bạn bằng cách đặt các tiêu đề HTTP khác nhau trong Express.
Bước 1: Nhập khẩu mũ bảo hiểm
Nhập gói Mũ bảo hiểm vào tệp app.js của bạn.
1 2 | <span class="token keyword">const</span> helmet <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'helmet'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Bước 2: Định cấu hình Phần mềm trung gian CSP Mũ bảo hiểm
Tạo đối tượng cài đặt CSP chứa chính sách mong muốn.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">const</span> cspConfig <span class="token operator">=</span> <span class="token punctuation">{</span> directives <span class="token operator">:</span> <span class="token punctuation">{</span> defaultSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> scriptSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">,</span> <span class="token string">"ajax.googleapis.com"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> styleSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">,</span> <span class="token string">"maxcdn.bootstrapcdn.com"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> imgSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">,</span> <span class="token string">"img.example.com"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> connectSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">,</span> <span class="token string">"api.example.com"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> fontSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'self'"</span> <span class="token punctuation">,</span> <span class="token string">"fonts.gstatic.com"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> objectSrc <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"'none'"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> upgradeInsecureRequests <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Ví dụ này chỉ định các nguồn cho các loại nội dung khác nhau, chẳng hạn như tập lệnh, kiểu và hình ảnh. Sửa đổi đối tượng cấu hình theo yêu cầu của ứng dụng của bạn.
Bước 3: Áp dụng Phần mềm trung gian CSP Mũ bảo hiểm
Áp dụng phần mềm trung gian CSP cho ứng dụng Express của bạn.
1 2 | app <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> helmet <span class="token punctuation">.</span> <span class="token function">contentSecurityPolicy</span> <span class="token punctuation">(</span> cspConfig <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
4. Kiểm tra việc triển khai CSP
Bây giờ bạn đã triển khai CSP trong ứng dụng Node.js Express của mình, việc kiểm tra là rất quan trọng để đảm bảo rằng nó hoạt động như mong đợi.
- Bắt đầu ứng dụng của bạn.
$ node app.js - Mở trình duyệt và truy cập
http://localhost:3000. - Mở công cụ dành cho nhà phát triển của trình duyệt của bạn và kiểm tra tab
ネットワーク. Bạn sẽ thấy tiêu đềContent-Security-Policychứa chính sách đã chỉ định. - Kiểm tra các loại nội dung khác nhau bằng cách tải tài nguyên từ các nguồn được ủy quyền và trái phép. Ví dụ: nó cố tải tập lệnh và hình ảnh từ các nguồn không được chỉ định trong cài đặt CSP. Bạn sẽ thấy lỗi trong bảng điều khiển của trình duyệt cho biết rằng tài nguyên đã bị chặn do vi phạm CSP.
- Theo dõi nhật ký máy chủ để biết các báo cáo vi phạm CSP. Nếu ứng dụng của bạn có điểm cuối báo cáo, hãy kiểm tra nhật ký của bạn để đảm bảo các vi phạm được báo cáo chính xác.
5. Xử lý vi phạm CSP
CSP được cung cấp khả năng báo cáo để theo dõi và phân tích các vi phạm chính sách. Bạn có thể định cấu hình điểm cuối báo cáo để nhận báo cáo về vi phạm CSP.
Bước 1: Thiết lập điểm cuối báo cáo
Tạo một lộ trình mới trong tệp app.js của bạn để xử lý báo cáo vi phạm CSP.
1 2 3 4 5 | app <span class="token punctuation">.</span> <span class="token function">post</span> <span class="token punctuation">(</span> <span class="token string">'/csp-report'</span> <span class="token punctuation">,</span> express <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">req <span class="token punctuation">,</span> res</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'CSP違反の報告:'</span> <span class="token punctuation">,</span> req <span class="token punctuation">.</span> body <span class="token punctuation">)</span> <span class="token punctuation">;</span> res <span class="token punctuation">.</span> <span class="token function">status</span> <span class="token punctuation">(</span> <span class="token number">204</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">end</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Tuyến đường này ghi lại báo cáo vi phạm CSP nhận được và trả về phản hồi 204 No Content .
Bước 2: Thêm Điểm cuối Báo cáo vào Cài đặt CSP
Cập nhật đối tượng cài đặt CSP của bạn để bao gồm chỉ thị reportUri .
1 2 3 4 5 | <span class="token keyword">const</span> cspConfig <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// ...既存のディレクティブ...</span> reportUri <span class="token operator">:</span> <span class="token string">'/csp-report'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Ứng dụng hiện gửi báo cáo vi phạm CSP đến điểm cuối /csp-report .
bản tóm tắt
Triển khai Chính sách bảo mật nội dung trong ứng dụng Node.js Express của bạn là một biện pháp bảo mật quan trọng để bảo vệ ứng dụng của bạn khỏi các cuộc tấn công khác nhau. Phần mềm trung gian Helmet bảo hiểm giúp dễ dàng đặt tiêu đề CSP, xác định nguồn được phép cho các loại nội dung khác nhau và giám sát thông qua điểm cuối báo cáo vi phạm. Kiểm tra kỹ lưỡng việc triển khai của bạn và cập nhật cài đặt CSP nếu cần để đảm bảo tính bảo mật và tính toàn vẹn của ứng dụng của bạn.
cuối cùng
Tôi luôn mắc nợ. Tôi hy vọng bạn thích bài viết này và học được một cái gì đó mới.
Hẹn gặp lại các bạn trong bài viết tiếp theo! Nếu bạn thích bài viết này, hãy nhấn “THÍCH” và đăng ký để ủng hộ tôi.
Cảm ơn rất nhiều.