Blocking AJAX Post requests on webapp hosted in Amazon ALB with WAF enabled - in case form data contains space character

Question

my application hosted in ALB and waf enabled, getting 403 on all the ajax request which is having the word "anything space on*". for example if i have a textfield with the input like "test one", when the same data is passing to the ajax data getting 403 error. when i am using stringify the same data, the error is not coming.

var value = "test one"; //inputFieldText
$ajax({"url":"url",data:value}) // data from input field, if having space on* failed. 

$ajax({"url":"url",data:JSON.stringify(value)}) // if same data is stringified then working fine.

if stringify is the only way, then i have 1000 of ajax request in my application, Any work around or suggestions ? please advice.

Answer 1

you can simply override jQuery $ajax and apply JSON.stringify() there:

const originalAjax = $.ajax;
$.ajax = (...args) => {
    // play with data before calling ajax
    return originalAjax(...args);
};

or you can extend the $ajax function and apply your own logic in extended version:

(function(root, factory) {
    if (typeof define == 'function' && define.amd) {
        define(['jquery'], function(jQuery) {
            factory(jQuery);
        });
    } else {
        factory(root.jQuery);
    }
})(this, function(jQuery) {

    var ajax = jQuery.ajax,
    
    function extendedAjax(options) {
        var promise  = $.Deferred();
        var success  = options.success;
        var error    = options.error;
        var complete = options.complete;
        var params, that = this;
        
        params = {
            complete: function(xhr, status) {
                if (complete) complete.apply(that, arguments);
            },
            success: function() {
                if (success) success.apply(that, arguments);
                promise.resolveWith(this, arguments);
            },
            error: function() {
                if (error) error.apply(this, arguments);
                promise.rejectWith(this, arguments);
            }
        };

        ajax(jQuery.extend({}, options, params));

        return promise;
    };
    
    jQuery.ajax = function(options) {
        return extendedAjax(options);
    };

});

this will help implement any custom logic once and for all.