How to sanitize input field in jQuery script

Question

I would like to sanitize the form fields before sending the ajax request to increase security. Currently my Javascript code is this:

jQuery(document).ready(function($) {
   $('#login-form').submit(function(e) {
        e.preventDefault(); // stop the form from submitting the normal way
        var form = $(this);
        var data = {
            'action': 'login',
            'username': form.find('#username').val(),
            'password': form.find('#password').val(),
            'remember': form.find('#remember').val(),
            'nonce': form.find('input[name="nonce"]').val()
        };

        $.ajax({
            type: 'POST',
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            data: data,
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    $('#login-form-message').html(response.data.message);
                }
            }
        });
    });
});

I'm trying to sanitize the input fields like this, I'm a beginner and I'm not entirely sure what I'm doing. Can anyone provide a tip? I appreciate any response, thanks.

var sanitize = require('sanitize-html');
jQuery(document).ready(function($) {
   $('#login-form').submit(function(e) {
        e.preventDefault(); // stop the form from submitting the normal way
        var form = $(this);
        var username = sanitize(form.find('#username').val());
        var password = sanitize(form.find('#password').val());
        var remember = sanitize(form.find('#remember').val());
        var nonce = sanitize(form.find('input[name="nonce"]').val());
        var data = {
            'action': 'login',
            'username': username,
            'password': password,
            'remember': remember,
            'nonce': nonce
        };

        $.ajax({
            type: 'POST',
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            data: data,
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    $('#login-form-message').html(response.data.message);
                }
            }
        });
    });
});

Quentin · Accepted Answer · 2023-01-11 12:44:23Z

1

tl;dr: Don't.

By itself, "sanitize" is not a useful term. How you sanitize data depends on:

What you want to protect (protection requirements are different for insertion into a database, an HTML document, an email, and so on).
If you want to do it destructively (discard data that looks like it might be bad) or non-destructively (encode data so special characters don't have their usual special meaning).

You've not told us either of those, so we can't tell you how to handle the data.

However, that doesn't matter because you are asking about doing it on the client.

If you want to protect data before it is inserted into the HTTP request (so the request body can be parsed without errors) then $.ajax does that for you already.

If you want to protect data before your PHP does something with it, then trying to do it on the client is simply wrong since an attacker can bypass your client-side code and submit whatever they want to the server.

Since you must do this on the server, any:

destructive sanitising needs to be replicated (which just introduces the risk of making mistakes).
non-destructive sanitising can't be done because the server would end up double encoding the data which would break it.

answered Jan 11, 2023 at 12:44

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Snorlax Over a year ago

Thanks for your reply, I'm building a login form for my wordpress website. Following some guides, I realized that I have to sanitize the email and password input fields to ensure greater security. But I'm new to this and I'm trying to figure out how to protect the login form from malicious users.

Collectives™ on Stack Overflow

How to sanitize input field in jQuery script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related