Xác thực mật khẩu javascript biểu thức chính quy
|
Rất nhiều trang web hiện yêu cầu đăng ký, nghĩa là người dùng cần được chỉ định tên người dùng và mật khẩu. Dưới đây là một số bước đơn giản để làm cho quy trình an toàn hơn Show
Nếu mục đích đăng ký là để xác nhận rằng người đó tồn tại và họ đã cung cấp địa chỉ email hợp lệ, thì như một phần của quy trình đăng ký, bạn nên gửi email cho họ. một mật khẩu ngẫu nhiên; . Đừng để họ chọn mật khẩu của riêng mình và sử dụng nó ngay lập tức mà không cần xác minh rằng chúng tồn tại Mã được trình bày bên dưới sau đó sẽ được sử dụng để cho phép người dùng thay đổi mật khẩu của họ Nguyên tắc nhập mật khẩu an toànSử dụng kiểu nhập "mật khẩu"Thay vì , hãy sử dụng vì điều này cho phép trình duyệt (và người dùng) biết rằng nội dung của trường đó cần được bảo mật Mật khẩu sẽ không xuất hiện trên màn hình khi bạn nhập và hầu hết các trình duyệt cũng sẽ không giữ lại hoặc ghi nhớ các giá trị được nhập vào trường mật khẩu như với các phần tử biểu mẫu khác Trong một số trường hợp, chẳng hạn như trên thiết bị di động, việc hiển thị mật khẩu có thể cải thiện khả năng sử dụng mà không ảnh hưởng đến bảo mật. Rốt cuộc, chỉ có màn hình trình duyệt bị xáo trộn chứ không phải truyền dữ liệu Xác nhận nhập mật khẩuVì kiểu nhập mật khẩu che khuất văn bản đã nhập, bạn nên để người dùng xác nhận rằng họ không nhập sai. Cách đơn giản nhất để thực hiện việc này là nhập mật khẩu hai lần, sau đó kiểm tra xem chúng có giống nhau không Một phương pháp khác là hiển thị những gì họ đã nhập như một phần của 'trang xác nhận'. Vấn đề ở đây là bạn đang hiển thị mật khẩu trong trình duyệt, bộ đệm của trình duyệt, proxy, v.v. Để bảo mật, mật khẩu không bao giờ được hiển thị trong HTML hoặc gửi qua email Thực thi mật khẩu 'mạnh'Nếu bạn lo lắng về bảo mật, bạn nên có một số chính sách về những gì tạo nên một mật khẩu hợp lệ. Một số hạn chế phổ biến là
(*) Một số yêu cầu này đã được chứng minh là phản tác dụng - dẫn đến vô số mật khẩu có dạng "Amanda1969" và bây giờ nên tránh Hiện tại, hãy bỏ qua yêu cầu cuối cùng vì nó yêu cầu tập lệnh phía máy chủ, hãy xem những gì có thể chỉ sử dụng HTML và JavaScript phía máy khách bảo mật máy chủMặc dù có một mật khẩu mạnh là bước đầu tiên tốt, nhưng nó cần được sao lưu bằng các biện pháp bổ sung trên máy chủ để ngăn chặn các cuộc tấn công vũ phu. Một cách tiếp cận phổ biến là cài đặt Fail2Ban để giám sát các tệp nhật ký và khóa những người tái phạm. Tất nhiên, điều đó chỉ hoạt động nếu hệ thống đăng nhập của bạn báo cáo các lần đăng nhập không thành công vào tệp nhật ký hệ thống. Nếu không, ứng dụng của bạn cần cung cấp chức năng này Mật khẩu cần được lưu trữ dưới dạng hàm băm trong cơ sở dữ liệu của bạn và mọi bản sao lưu cũng phải được mã hóa trình diễn cơ bảnMẫu dưới đây có ba trường đầu vào. tên người dùng, pwd1 và pwd2. Khi biểu mẫu được gửi, tập lệnh checkForm sẽ phân tích cú pháp các giá trị đầu vào và trả về giá trị đúng hoặc sai. Nếu một giá trị sai được trả về thì việc gửi biểu mẫu sẽ bị hủy Mã này sẽ hoạt động cho các trình duyệt từ Netscape 4 (khoảng năm 1997) Đổi mật khẩuMật khẩu phải chứa ít nhất sáu ký tự, bao gồm chữ hoa, chữ thường và số Mã đằng sau biểu mẫu như sau. Nếu bạn không chắc chắn cách đặt phần này trên trang của mình, bạn có thể cần đọc bài viết trước về Xác thực biểu mẫu hoặc xem nguồn HTML của trang này mở rộng hộp mã Hãy nhớ rằng, vì JavaScript không có sẵn trong tất cả các trình duyệt, bạn cũng nên sử dụng tập lệnh phía máy chủ để xác thực tất cả dữ liệu trước khi ghi vào cơ sở dữ liệu hoặc nơi khác. Bạn cũng có thể muốn thêm gia vị cho các biểu mẫu của mình bằng cách sử dụng Xác thực biểu mẫu HTML5 như chúng tôi đã thực hiện ở cuối trang Biểu thức chính quy nâng caoTrong hầu hết các trình duyệt - những trình duyệt hỗ trợ JavaScript 1. 5 (Firefox, Chrome, Safari, Opera 7 và Internet Explorer 8 trở lên) - bạn có thể sử dụng các biểu thức chính quy mạnh mẽ hơn. Các trình duyệt rất cũ có thể không nhận ra các mẫu này Mã được trình bày ở trên tốt ở chỗ nó kiểm tra mọi thứ mà chúng tôi muốn kiểm tra, nhưng sử dụng rất nhiều mã để kiểm tra từng yêu cầu riêng lẻ và đưa ra các thông báo lỗi khác nhau. Bây giờ chúng tôi sẽ chỉ cho bạn cách áp dụng kiểm tra mật khẩu bằng một biểu thức chính quy duy nhất Hãy xem xét những điều sau đây Loại biểu thức được sử dụng ở đây được gọi là 'nhìn về phía trước', cố gắng khớp biểu thức chính quy có trong phần 'tương lai' của chuỗi Dịch
Nếu bạn đang sử dụng trình duyệt được hỗ trợ, bạn có thể sử dụng biểu mẫu bên dưới để kiểm tra biểu thức chính quy Kiểm tra Regexp mật khẩu(đầu vào phải chứa ít nhất một chữ số/chữ thường/chữ hoa và dài ít nhất sáu ký tự) Nếu bạn muốn giới hạn mật khẩu CHỈ ở các chữ cái và số (không có dấu cách hoặc các ký tự khác) thì chỉ cần một thay đổi nhỏ. Thay vì sử dụng. (ký tự đại diện) chúng tôi sử dụng \w \w là viết tắt của 'bất kỳ chữ cái, số hoặc ký tự gạch dưới' Một lần nữa, bạn có thể sử dụng biểu mẫu bên dưới để kiểm tra biểu thức chính quy này Kiểm tra Regexp mật khẩu 2(như trên, nhưng lần này CHỈ cho phép các chữ cái và số) Hạn chế những ký tự nào có thể được sử dụng không phải là cách làm tốt vì dấu chấm câu và các ký hiệu khác mang lại sự bảo mật cao hơn Mã HTML và JavaScript mẫuBạn có thể triển khai mã này trên trang web của riêng mình như sau Như bạn có thể thấy, rất đáng để học những điều phức tạp của biểu thức chính quy. Chúng có thể được sử dụng không chỉ trong JavaScript mà còn cả PHP, Perl, Java và nhiều ngôn ngữ khác. Một số trình soạn thảo văn bản (không chỉ vi) cũng cho phép chúng khi tìm kiếm hoặc thay thế văn bản Xác thực biểu mẫu HTML5Chúng tôi đã đề cập trước đó về xác thực biểu mẫu HTML5. Đây là một kỹ thuật mới có sẵn trong các trình duyệt hiện đại và chắc chắn là con đường của tương lai. Một vài thuộc tính biểu mẫu đơn giản có thể có tác dụng tương tự như hàng loạt thư viện mã JavaScript Ở đây, chúng tôi có một phiên bản nâng cao của đoạn mã trên, nơi chúng tôi đã thêm các phần tử mẫu và yêu cầu HTML5 để áp dụng các kiểm tra biểu thức chính quy trong chính biểu mẫu đó trong các trình duyệt hỗ trợ. Một cách hữu ích, cú pháp biểu thức chính quy giống hệt nhau chỉ với /^ và $/ bị xóa Chúng tôi cũng đã thêm một trình xử lý onchange nhỏ phức tạp vào trường mật khẩu đầu tiên để cập nhật mẫu mà trường mật khẩu thứ hai yêu cầu - thực tế là buộc chúng phải giống hệt nhau Tại đây, bạn có thể thấy ảnh chụp màn hình từ Safari của biểu mẫu đang được hoàn thành. Các điểm đánh dấu màu đỏ/xanh lá cây đã được triển khai bằng CSS  Trong ví dụ này, người dùng phải rõ ràng rằng biểu mẫu chỉ có thể được gửi khi cả ba dấu kiểm màu xanh xuất hiện. Trong mọi trường hợp, các trình duyệt như Firefox và Opera sẽ thực thi các quy tắc xác thực HTML5 và hiển thị các thông báo như được hiển thị tại đây Có lẽ các thông báo của trình duyệt sẽ thay đổi theo ngôn ngữ của người dùng - điều không bao giờ có thể thực hiện được nếu chỉ sử dụng JavaScript Tất cả những gì chúng tôi đã thay đổi so với ví dụ trước là thêm một số thuộc tính bổ sung vào các trường nhập biểu mẫu. Phần còn lại của HTML và JavaScript vẫn không thay đổi ...Lưu ý rằng bạn sẽ cần RegExp. escape() mã polyfill có thể được tìm thấy ở cuối trang Điều tốt nhất về các thuộc tính HTML5 là chúng không có tác dụng gì đối với các trình duyệt không được hỗ trợ, vì vậy các phiên bản Internet Explorer cũ hơn sẽ hoạt động như thể chúng không có mặt và chỉ chạy xác thực JavaScript như trước đây Ở giai đoạn này, cả Firefox/Mozilla và Opera đều thực thi các thuộc tính xác thực HTML5 trong trình duyệt trong khi Safari chỉ cho phép bạn sử dụng chúng với JavaScript hoặc cho các hiệu ứng CSS và giờ đây cả Safari/WebKit Cảnh báo trình duyệt HTML5 tùy chỉnhNhư bạn có thể thấy từ ảnh chụp màn hình phía trên thông báo cảnh báo trong Firefox khi đầu vào không khớp với thuộc tính mẫu chỉ đơn giản là "Vui lòng khớp với định dạng được yêu cầu. ". Không hoàn toàn hữu ích trong trường hợp này khi chúng tôi có một số yêu cầu khác nhau May mắn thay, có thể tùy chỉnh thông báo này chỉ bằng một cú chạm JavaScript Thay đổi duy nhất giữa ví dụ này và ví dụ trước là chúng tôi đã sửa đổi trình xử lý onchange cho mục nhập Mật khẩu và thêm một trình xử lý cho Xác nhận mật khẩu Change PasswordChúng tôi sử dụng thuộc tính tiêu đề để lưu trữ thông báo xác thực vì một số trình duyệt sẽ tự động hiển thị văn bản đó trong trường hợp thiếu giá trị hoặc mẫu không khớp Lưu ý rằng bạn sẽ cần RegExp. escape() mã polyfill có thể được tìm thấy ở cuối trang Khi đầu vào Mật khẩu được thay đổi, chúng tôi sẽ kiểm tra tính hợp lệ của nó. cờ patternMismatch để xem nó có khớp với thuộc tính pattern hay không. Nếu nó không khớp, chúng tôi sẽ đặt thông báo lỗi tùy chỉnh xuất hiện khi biểu mẫu được gửi Bất cứ khi nào setCustomValidity() được sử dụng để đặt thông báo tùy chỉnh, trường được đề cập sẽ được coi là không hợp lệ và ngăn biểu mẫu gửi (ít nhất là trong Firefox và Opera). Để đảo ngược điều này, nó cần được đặt thành trống, điều này chúng tôi thực hiện khi đầu vào khớp với quy tắc biểu thức chính quy của chúng tôi Thông báo tùy chỉnh chúng tôi đã đặt xuất hiện trong Firefox như được hiển thị ở đây Bạn có thể thấy từ đoạn mã mà chúng tôi đã áp dụng một kỹ thuật tương tự cho trường Xác nhận mật khẩu nên giờ đây nó sẽ hiển thị "Vui lòng nhập cùng một mật khẩu như trên" nếu có sự không khớp giữa hai trường. Về cơ bản, những gì chúng tôi đã đạt được ở đây là sao chép tập lệnh xác thực JavaScript của chúng tôi bằng HTML5 Bởi vì chúng tôi chỉ kiểm tra patternMismatch nên chúng tôi không ảnh hưởng đến các tùy chọn xác thực mặc định khác - cụ thể là thuộc tính bắt buộc - vì vậy việc gửi biểu mẫu có các trường trống sẽ vẫn hiển thị thông báo cảnh báo chung "Vui lòng điền vào trường này". Để ghi đè những lỗi đó, bạn cần kiểm tra tính hợp lệ. giá trịThiếu cờ Để biết thêm chi tiết về API xác thực ràng buộc, hãy theo các liên kết trong phần Tham khảo bên dưới Các trình duyệt khác nhau sẽ hiển thị cả văn bản tiêu đề và kiểm tra Tính hợp lệ tùy chỉnh trong cùng một chú giải công cụ; Tách hình thức và chức năngBạn có thể nhận thấy mã trong các ví dụ trên ngày càng trở nên lộn xộn hơn với sự kết hợp giữa HTML và JavaScript nội tuyến. Một cách tiếp cận chuyên nghiệp hơn là tách hoàn toàn mã JavaScript khỏi phần đánh dấu HTML Điều này làm cho mã dễ bảo trì hơn, đặc biệt là khi làm việc theo nhóm, cũng như dễ đọc và dễ hiểu hơn. Tuy nhiên, nó dẫn đến việc sử dụng nhiều mã hơn như bạn có thể thấy bên dưới Đầu tiên, HTML và sau đó là JavaScript mở rộng hộp mã Mối liên kết duy nhất giữa HTML và JavaScript là các giá trị id của biểu mẫu và trường nhập mà bạn có thể thấy được đánh dấu trong mã Ví dụ này sẽ hoạt động trong Internet Explorer 9 trở lên. Để làm cho nó hoạt động trong IE8, cần có một polyfill cho các chức năng xử lý sự kiện. Bạn có thể tìm thấy mã cho điều này ở đây Lưu ý rằng bạn cũng sẽ cần RegExp. escape() mã polyfill có thể được tìm thấy ở cuối trang Kết quả ít nhiều giống với ví dụ trước, với một vài cải tiến nhỏ Ưu điểm chính là giờ đây JavaScript có thể được chuyển sang tệp riêng của nó hoặc trở thành một phần của thư viện và được duy trì tách biệt với HTML. Cũng không có thêm các biến hoặc chức năng toàn cầu Để chia nhỏ nó, các đầu vào biểu mẫu của chúng tôi hiện đang được xác thực bởi
RegExp. thoát polyfillChức năng này xuất phát từ một bổ sung ECMAScript được đề xuất Không có điều này, nếu nội dung của pwd1 chứa '*' hoặc các ký tự biểu thức chính quy đặc biệt khác, mẫu cho pwd2 có thể trở nên không hợp lệ kết luậnNhư bạn có thể thấy, có rất nhiều việc liên quan đến việc cung cấp trải nghiệm phong phú cho người dùng ngay cả đối với một việc đơn giản như thay đổi mật khẩu. Để tóm tắt những gì chúng tôi đã đề cập
Trên hết, bạn không cảm thấy phải cài đặt các thư viện JavaScript hoặc jQuery khổng lồ chỉ để xác thực một biểu mẫu. Bằng cách tận dụng các tiêu chuẩn trình duyệt mới như trong bài viết này, bạn có thể tiết kiệm thời gian và tài nguyên, đồng thời cung cấp trải nghiệm người dùng tốt hơn Xác thực biểu mẫu HTML5 được hỗ trợ bởi Firefox, Chrome, Safari 10+, Opera và Internet Explorer 10+. Trong Safari, bạn sẽ thấy các kiểu CSS, nhưng trình duyệt sẽ không ngăn biểu mẫu gửi hoặc hiển thị thông báo lỗi nội tuyến cho các giá trị không hợp lệ hoặc bị thiếu Regex cho mật khẩu là gì?kết quả tìm kiếm. 102 biểu thức chính quy được tìm thấy Regex cho các ký tự đặc biệt là gì?Ký tự Regex đặc biệt. Những ký tự này có ý nghĩa đặc biệt trong regex (sẽ được thảo luận bên dưới). . , + , * , ? . , \ . Chuỗi thoát (\char). Để khớp một ký tự có ý nghĩa đặc biệt trong biểu thức chính quy, bạn cần sử dụng tiền tố chuỗi thoát với dấu gạch chéo ngược ( \ ).
Ký tự đặc biệt của mật khẩu là gì?Các ký tự đặc biệt của mật khẩu là lựa chọn các ký tự dấu câu có trên bàn phím tiêu chuẩn của Hoa Kỳ và thường được sử dụng trong mật khẩu . Các hệ điều hành và ứng dụng khác nhau có thể áp dụng các giới hạn cho bộ này. Trình quản lý danh tính Oracle và Microsoft Active Directory.
Regex trong JavaScript là gì?Biểu thức chính quy là các mẫu được sử dụng để so khớp các tổ hợp ký tự trong chuỗi . Trong JavaScript, biểu thức chính quy cũng là đối tượng. Các mẫu này được sử dụng với các phương thức exec() và test() của RegExp và với các phương thức match(), matchAll(), replace(), replaceAll(), search() và split() của String. |
