Giới thiệu
Xác thực và làm sạch đầu vào của người dùng là một phần quan trọng trong quá trình phát triển web. Điều này ngăn chặn các lỗ hổng bảo mật như SQL injection và cross-site scripting (XSS) đồng thời đảm bảo rằng dữ liệu do người dùng nhập là chính xác và nhất quán. Trong bài viết này, chúng ta sẽ khám phá các kỹ thuật khác nhau để xác thực và làm sạch đầu vào của người dùng trong các ứng dụng Node.js Express bằng cách sử dụng các thư viện phổ biến express-validator và sanitize-html.
Tại sao phải Xác thực và Vệ sinh Đầu vào của Người dùng?
điều tra
Xác thực là quá trình kiểm tra xem đầu vào của người dùng có đáp ứng các tiêu chí nhất định hay không (loại dữ liệu, độ dài, định dạng, v.v.). Xác thực là vì những lý do sau:
- Tính toàn vẹn của dữ liệu: Quá trình xác thực đảm bảo rằng đầu vào của người dùng tuân theo định dạng dự kiến, tạo điều kiện thuận lợi cho việc xử lý và lưu trữ dữ liệu.
- Trải nghiệm người dùng: Bằng cách cung cấp phản hồi cho người dùng về thông tin nhập sai, người dùng có thể sửa lỗi và có trải nghiệm mượt mà hơn.
- Bảo mật: Xác thực giúp ngăn chặn các lỗ hổng bảo mật bằng cách từ chối đầu vào độc hại trước khi nó đạt đến một phần quan trọng trong bảo mật ứng dụng của bạn.
vệ sinh
Sanitization là quá trình làm sạch đầu vào của người dùng bằng cách xóa hoặc sửa đổi dữ liệu có thể gây hại. Điều này rất quan trọng để ngăn chặn các lỗ hổng bảo mật như các cuộc tấn công XSS đưa mã độc hại vào các ứng dụng web.
Thông tin cơ bản về Express và phần mềm trung gian
Trước khi chúng tôi bắt đầu xác thực và làm sạch, trước tiên hãy thiết lập một ứng dụng Express cơ bản và hiểu vai trò của phần mềm trung gian.
Cài đặt nhanh
Đầu tiên, tạo một thư mục mới cho dự án của bạn và khởi tạo nó với npm:
1 2 3 4 | <span class="token function">mkdir</span> node-validation <span class="token builtin class-name">cd</span> node-validation <span class="token function">npm</span> init -y |
Sau đó cài đặt Express:
1 2 | <span class="token function">npm</span> <span class="token function">install</span> express |
Tạo một tệp mới “app.js” và định cấu hình ứng dụng 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> |
phần mềm trung gian
Trong Express, phần mềm trung gian là một chức năng có quyền truy cập vào đối tượng yêu cầu, đối tượng phản hồi và chức năng tiếp theo trong chu kỳ phản hồi yêu cầu. Phần mềm trung gian có thể thực thi mã và sửa đổi các đối tượng yêu cầu và phản hồi.
Để xác thực và làm sạch đầu vào của người dùng, chúng tôi sử dụng phần mềm trung gian do thư viện express-validator và sanitize-html cung cấp.
Xác thực đầu vào với trình xác nhận nhanh
express-validator là một thư viện phổ biến để xác thực và làm sạch đầu vào của người dùng trong các ứng dụng Express . Hãy cài đặt:
1 2 | <span class="token function">npm</span> <span class="token function">install</span> express-validator |
xác minh cơ bản
Hãy tạo một biểu mẫu đơn giản chấp nhận tên người dùng và địa chỉ email. Cập nhật tệp app.js của bạn như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> <span class="token punctuation">{</span> body <span class="token punctuation">,</span> validationResult <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'express-validator'</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">use</span> <span class="token punctuation">(</span> express <span class="token punctuation">.</span> <span class="token function">urlencoded</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> extended <span class="token operator">:</span> <span class="token boolean">false</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">post</span> <span class="token punctuation">(</span> <span class="token string">'/submit'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token function">body</span> <span class="token punctuation">(</span> <span class="token string">'username'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">isLength</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> min <span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">withMessage</span> <span class="token punctuation">(</span> <span class="token string">'ユーザー名は5文字以上である必要があります'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token function">body</span> <span class="token punctuation">(</span> <span class="token string">'email'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">isEmail</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">withMessage</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> <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> <span class="token keyword">const</span> errors <span class="token operator">=</span> <span class="token function">validationResult</span> <span class="token punctuation">(</span> req <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> errors <span class="token punctuation">.</span> <span class="token function">isEmpty</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> res <span class="token punctuation">.</span> <span class="token function">status</span> <span class="token punctuation">(</span> <span class="token number">400</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> errors <span class="token operator">:</span> errors <span class="token punctuation">.</span> <span class="token function">array</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> 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> |
Ở đây chúng ta nhập hàm body từ express-validator và sử dụng nó để áp dụng các quy tắc xác thực cho phần thân yêu cầu. Hàm verifyResult được sử dụng để thu thập kết quả của quá trình xác thực. Tôi cũng đã thêm một tuyến POST mới để gửi biểu mẫu và bao gồm một loạt phần mềm trung gian xác thực.
Ví dụ này sử dụng trình xác nhận isLength và isEmail để kiểm tra xem tên người dùng có ít nhất 5 ký tự và email có ở định dạng hợp lệ hay không. Tôi cũng đang sử dụng phương thức withMessage để thêm thông báo lỗi tùy chỉnh.
Khi biểu mẫu được gửi, phần mềm trung gian xác thực sẽ xử lý đầu vào và thêm bất kỳ lỗi nào vào đối tượng lỗi. Nếu có lỗi, hãy trả về trạng thái Yêu cầu không hợp lệ 400 và thông báo lỗi. Nếu xác thực thành công, hãy tiến hành xử lý dữ liệu đã gửi.
trình xác thực tùy chỉnh
Bạn cũng có thể tạo một trình xác thực tùy chỉnh bằng cách cung cấp một hàm trong phương thức body . Ví dụ: hãy tạo trình xác thực tùy chỉnh để kiểm tra xem tên người dùng không chứa chữ số:
1 2 3 4 5 6 7 | <span class="token function">body</span> <span class="token punctuation">(</span> <span class="token string">'username'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">custom</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">d</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">.</span> <span class="token function">test</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</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 keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> |
Thêm trình xác thực tùy chỉnh này vào mảng phần mềm trung gian xác thực trong tuyến /submit . Bây giờ, việc gửi biểu mẫu sẽ bị từ chối nếu tên người dùng chứa một chữ số.
Vệ sinh đầu vào với sanitize-html
sanitize-html là một thư viện phổ biến để làm sạch đầu vào HTML và giúp ngăn chặn các cuộc tấn công XSS. Đầu tiên, hãy cài đặt thư viện này:
1 2 | <span class="token function">npm</span> <span class="token function">install</span> sanitize-html |
vệ sinh cơ bản
Hãy tạo một biểu mẫu đơn giản chấp nhận tên và nhận xét của người dùng. Cập nhật tệp app.js của bạn như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> sanitizeHtml <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'sanitize-html'</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">use</span> <span class="token punctuation">(</span> express <span class="token punctuation">.</span> <span class="token function">urlencoded</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> extended <span class="token operator">:</span> <span class="token boolean">false</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">post</span> <span class="token punctuation">(</span> <span class="token string">'/comment'</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> <span class="token keyword">const</span> sanitizedComment <span class="token operator">=</span> <span class="token function">sanitizeHtml</span> <span class="token punctuation">(</span> req <span class="token punctuation">.</span> body <span class="token punctuation">.</span> comment <span class="token punctuation">)</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 template-string"><span class="token template-punctuation string">`</span><span class="token string">受け取ったコメント：</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> sanitizedComment <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></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> |
Trong ví dụ này, hàm sanitizeHtml được sử dụng để xóa HTML độc hại khỏi nhận xét của người dùng trước khi xử lý. Theo mặc định, sanitize-html xóa tất cả các thẻ HTML không có trong danh sách cho phép để ngăn các tập lệnh độc hại chạy.
Tùy chọn vệ sinh tùy chỉnh
Bạn có thể tùy chỉnh hành vi làm sạch bằng cách cung cấp một đối tượng tùy chọn cho hàm sanitizeHtml . Ví dụ: hãy chỉ cho phép các thẻ định dạng văn bản cơ bản và xóa tất cả các thuộc tính:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> sanitizeOptions <span class="token operator">=</span> <span class="token punctuation">{</span> allowedTags <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> <span class="token string">'i'</span> <span class="token punctuation">,</span> <span class="token string">'em'</span> <span class="token punctuation">,</span> <span class="token string">'strong'</span> <span class="token punctuation">,</span> <span class="token string">'u'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> allowedAttributes <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 keyword">const</span> sanitizedComment <span class="token operator">=</span> <span class="token function">sanitizeHtml</span> <span class="token punctuation">(</span> req <span class="token punctuation">.</span> body <span class="token punctuation">.</span> comment <span class="token punctuation">,</span> sanitizeOptions <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Bạn có thể kiểm soát những phần tử và thuộc tính HTML nào được cho phép trong đầu vào của người dùng bằng cách chỉ định các tùy chọn allowedTags và allowedAttributes .
bản tóm tắt
Trong bài viết này, chúng ta đã thảo luận về tầm quan trọng của việc xác thực và làm sạch đầu vào của người dùng trong các ứng dụng Node.js Express . Tôi đã chỉ ra cách xác thực đầu vào bằng cách sử dụng express-validator và làm sạch đầu vào bằng cách sử dụng sanitize-html . Việc triển khai các kỹ thuật này sẽ cải thiện đáng kể tính bảo mật và tính toàn vẹn dữ liệu của ứng dụng web 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.