Tăng bảo mật cho wordpress bằng Password Strength Meter

Xem: 829    Tải: 0   Thảo luận: 0   Mục: WordPress template   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử


Chào các bạn, vô tình lượn lờ trên mạng thấy một bài viết khá hay về việc tăng tính bảo mật cho các site bằng wordpress, nên hôm nay leech về đây cho các bạn tham khảo.

Password Strength Script


Đây là script đã được wordpress hỗ trợ, thế nhưng không có trong các bản tài liệu do wordpress công bố, để lấy được code của script này, bạn truy cập vào đường dẫn wp-admin/js/password-strength-meter.js để kiểm tra. Để sử dụng được script này trong theme, bạn cần phải thêm đoạn code sau vào trong file functions.php

wp_enqueue_script( 'password-strength-meter' );

Trong đó, script có hai hàm

  • wp.passwordStrength.meter( password1, blacklist, password2 ): Đây là hàm chính mà chúng ta sẽ sử dụng. Hàm này sẽ giúp chúng ta kiểm tra độ mạnh yếu của mật khẩu
  • wp.passwordStrength.userInputBlacklist(): Hàm này sẽ làm nhiệm vụ nhập vào những password bị blacklist để kiểm tra.

Cách sử dụng

Để sử dụng được script này, chúng ta cần nhúng vào thẻ form khi đăng ký hoặc thay đổi mật khẩu

<form>
<input type="password" name="password" />
<input type="password" name="password_retyped" />
<span id="password-strength"></span>
<input type="submit" disabled="disabled" value="Submit" />
</form>

Chúng ta đã sử dụng 2 trường là nameid để script có thể lấy được giá trị. Cơ chế hoạt động của nó là

  • Khi có ai đó gõ mật khẩu vào trong các trường trên form, cụ thể là trường mật khẩu, chúng ta sẽ kiểm tra độ mạnh yếu của mật khẩu.
  • Sau đó sẽ hiện ra thông báo hiển thị độ mạnh yếu mà WordPress đặt ra.
  • Cuối cùng, nút gửi thông tin sẽ hiện lên khi mật khẩu người dùng nhập vào là đủ mạnh để không bị các hacker phá

Nội dung hàm Strength Meter

Toàn bộ thông tin về hàm được viết dưới đây, tác giả đã có chú thích đầy đủ, các bạn chịu khó đọc nhé

function checkPasswordStrength( $pass1,
                                $pass2,
                                $strengthResult,
                                $submitButton,
                                blacklistArray ) {
        var pass1 = $pass1.val();
    var pass2 = $pass2.val();
    // Reset the form & meter
    $submitButton.attr( 'disabled', 'disabled' );
        $strengthResult.removeClass( 'short bad good strong' );
    // Extend our blacklist array with those from the inputs & site data
    blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() )
    // Get the password strength
    var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
    // Add the strength meter results
    switch ( strength ) {
        case 2:
            $strengthResult.addClass( 'bad' ).html( pwsL10n.bad );
            break;
        case 3:
            $strengthResult.addClass( 'good' ).html( pwsL10n.good );
            break;
        case 4:
            $strengthResult.addClass( 'strong' ).html( pwsL10n.strong );
            break;
        case 5:
            $strengthResult.addClass( 'short' ).html( pwsL10n.mismatch );
            break;
        default:
            $strengthResult.addClass( 'short' ).html( pwsL10n.short );
    }
    // The meter function returns a result even if pass2 is empty,
    // enable only the submit button if the password is strong and
    // both passwords are filled up
    if ( 4 === strength && '' !== pass2.trim() ) {
        $submitButton.removeAttr( 'disabled' );
    }
    return strength;
}
jQuery( document ).ready( function( $ ) {
    // Binding to trigger checkPasswordStrength
    $( 'body' ).on( 'keyup', 'input[name=password1], input[name=password2]',
        function( event ) {
            checkPasswordStrength(
                $('input[name=password]'),         // First password field
                $('input[name=password_retyped]'), // Second password field
                $('#password-strength'),           // Strength meter
                $('input[type=submit]'),           // Submit button
                ['black', 'listed', 'word']        // Blacklisted words
            );
        }
    );
});

Custom một số thứ

Thông thường, wordpress đặt tên cho các nhãn (label) của Strength MeterpwsL10n. Tuy nhiên, chúng ta có thể thay đổi thêm để dễ dàng style bằng cách vào file functions.php và thêm đoạn code sau

wp_localize_script( 'password-strength-meter', 'pwsL10n', array(
    'empty' => __( 'Strength indicator' ),
    'short' => __( 'Very weak' ),
    'bad' => __( 'Weak' ),
    'good' => _x( 'Medium', 'password strength' ),
    'strong' => __( 'Strong' ),
    'mismatch' => __( 'Mismatch' )
) );

Tổng kết

Vậy là trong bài học này, các bạn đã học được cách thêm script để kiểm tra độ mạnh yếu của mật khẩu trong wordpress. Chúng ta có thể vận dụng bài học này trong custom form đăng ký và trang profile ở ngoài front-end. Chúc bạn thành công.

Tăng bảo mật cho wordpress bằng Password Strength Meter

Tăng bảo mật cho wordpress bằng Password Strength Meter Đăng ngày 08-09-2014  Chào các bạn, vô tình lượn lờ trên mạng thấy một bài viết khá hay về việc tăng tính bảo mật cho các site bằng wordpress, nên hôm nay leech về đây cho các bạn tham khảo. Password Strength Script 5/10 829

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn