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 cho các ứng dụng web hiện đại. Chúng giúp 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 cho phép bạn chỉ định các nguồn nội dung mà trình duyệt có thể tải. Trong bài viết này, chúng ta sẽ thảo luận cách triển khai CSP trong ứng dụng Node.js Express một cách chi tiết và trực quan.
1. Hiểu chính sách bảo mật nội dung
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 cho phép bạn xác định nguồn nội dung mà trình duyệt có thể tải. Điều này có thể bao gồm bảng định kiểu, tập lệnh, hình ảnh, v.v. Bằng cách chỉ định các nguồn, bạn có thể ngăn nội dung độc hại và trái phép được thực thi trên trang web của mình.
Tại sao nên sử dụng CSP trong ứng dụng của bạn?
CSP giúp:
- Ngăn chặn các cuộc tấn công XSS
- Giảm bề mặt 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 của bạn
2. Thiết lập Ứng dụng Node.js Express
Để bắt đầu, hãy thiết lập một ứng dụng Node.js Express cơ bản. Đầu tiê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à bất kỳ phụ thuộc cần thiết nào 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">'Hello, world!'</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">'Server listening on port 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
Chúng tôi sẽ 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 dành cho Express, đặt các tiêu đề HTTP khác nhau để giúp bảo mật ứng dụng của bạn.
Bước 1: Nhập khẩu mũ bảo hiểm
Trong tệp app.js của bạn, hãy nhập gói Mũ bảo hiểm:
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 một đối tượng cấu hình CSP với các chính sách mong muốn của bạ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> |
Trong ví dụ này, chúng tôi đã chỉ định nguồn cho các loại nội dung khác nhau như tập lệnh, kiểu, hình ảnh, v.v. Sửa đổi đối tượng cấu hình cho phù hợp với 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 triển khai CSP của bạn
Bây giờ chúng tôi đã triển khai CSP trong ứng dụng Node.js Express của mình, điều cần thiết là kiểm tra nó để đảm bảo 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 của bạn 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 và kiểm tra tab
Network. Bạn sẽ thấy tiêu đềContent-Security-Policyvới các chính sách được 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 phép và không được phép. Ví dụ: thử tải tập lệnh hoặc hình ảnh từ một nguồn không được chỉ định trong cấu hình CSP của bạn. Bạn sẽ thấy lỗi trong bảng điều khiển của trình duyệt, cho biết tài nguyên đã bị chặn do vi phạm CSP của bạn.
- Theo dõi nhật ký máy chủ của bạn để biết bất kỳ báo cáo vi phạm CSP nào. 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ý để đảm bảo rằng các vi phạm đang được báo cáo như dự kiến.
5. Xử lý vi phạm CSP
CSP cung cấp tính năng báo cáo cho phép bạn 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 tuyến mới trong tệp app.js của bạn để xử lý các 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 violation report:'</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ấu hình CSP của bạn
Cập nhật đối tượng cấu hình 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">// ...existing directives...</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> |
Bây giờ, ứng dụng của bạn sẽ gửi báo cáo vi phạm CSP đến điểm cuối /csp-report .
Phần kết luận
Triển khai Chính sách bảo mật nội dung trong ứng dụng Node.js Express là một biện pháp bảo mật cần thiết để bảo vệ ứng dụng của bạn khỏi các cuộc tấn công khác nhau. Sử dụng phần mềm trung gian Mũ bảo hiểm, bạn có thể dễ dàng thiết lập tiêu đề CSP, xác định nguồn được phép cho các loại nội dung khác nhau và theo dõi vi phạm thông qua điểm cuối báo cáo. Đảm bảo kiểm tra kỹ lưỡng việc triển khai của bạn và cập nhật cấu hình 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.
Và cuối cùng
Như mọi khi, tôi hy vọng bạn thích bài viết này và có một cái gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!
Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn.