Encrypting Data on Client Side Before Submission

H @netrose,

If you are looking for a code, then you can try this snippet and see whether it helps:

https://gist.github.com/wpmudev-sls/08029c5db322cc717766abaf3b8fb480

To make the code work, you’ll also have to add the class name “password-field” by editing the Input field in the from side under Styling > Additional CSS Classes section.

The code can be applied as a mu-plugins. Please check this link on how to implement the above code as a mu-plugins:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Please do let us know if you need any further assistance.

Regards,

Nithin

I found that code a few days ago and I’m already using it to turn my text field into a password field. What I’m trying to do is encrypt certain field data before it gets sent without changing the value of the field itself.

Hi @netrose,

Hope this message finds you well and thanks for reaching us.

For your explanation are you trying to encrypt the data when a user is filling that field? If so using the code shared by Nithin should be enough. If not, could you please elaborate a little and let us know the exact field and process you require to encrypt?

Kind regards,
Laura

That code only changes the input field type to a password field, it doesn’t encrypt the data being sent. I managed to find a solution. To intercept and encrypt text-1 field, I managed to intercept the ajax request, then I had to encrypt the password synchronously so that the function waiting for a return didn’t throw any errors.

function syncMethod(settings) {
    try {
        var password = settings.data.get('text-1');
        const encryptedPassword = window.syncEncryptPassword(publicKey, password);
        settings.data.set('text-1', encryptedPassword);
        return settings;
    } catch (error) {
        console.log("Error: ", error);
        return settings;
    }
}

jQuery(document).ready(function($) {
    var originalAjaxFunction = $.ajax;
    $.ajax = function(settings) {
        if (settings.url.indexOf('admin-ajax.php') !== -1 && settings.data instanceof FormData) {
            if (settings.data.get('form_id') === '602') {
                var newSettings = syncMethod(settings);
                return originalAjaxFunction(newSettings)
                    .done(function(response) {
                        if (response.success === true) {
                            console.log("Successful Login");
                            // Redirect to the URL in the response
                            // window.location.href = response.data.redirect_url;
                        } else {
                            // Handle any custom error message
                            alert(response.message);
                        }
                    })
                    .fail(function(jqXHR, textStatus, errorThrown) { // Handling failure                
                        // Handle any generic error here
                        console.error("Request failed: " + textStatus, errorThrown);
                        alert("An error occurred. Please try again later.");
                    });
            }else{
                return originalAjaxFunction.apply(this, arguments); // Fallback to the original jQuery AJAX function
            }
        }else{
            return originalAjaxFunction.apply(this, arguments); // Fallback to the original jQuery AJAX function
        }
    };
});