Error 403 Forbidden when making post call with jquery ajax call on same domain

Question

I have a webpage(mainmenu.php) with a javascript function as script in the webpage. The java script function name is : statusHistoryUpdate(status)

This function does a ajax post call to a php file located on the same domain as my webpage. Here is the function code :

                    function statusHistoryUpdate(status)
                    {


                           var data = {
                                reg_no: selectedRegNo,
                                status: status,
                                progress_id : selectedProgress
                            };
                            data = $(this).serialize() + "&" + $.param(data);
                          //alert(data);
                          $.ajax({
                          type: "POST",
                          dataType: "json",
                          url: "../db/statusHistory.php", //Relative or absolute path to response.php file
                          data: data,
                          beforeSend: function(){

                            $('#loading').toggle();
                            //$("#submitbutton").html( "<button id='buttonsubmit' class='btn btn-primary btn-lg btn-block' type='submit' value='Register' disabled> <span class='spinner-border spinner-border-md'></span>Loading..</button>");
                          },
                          success: function(data) {

                              getData();
                          },
                          complete: function(){
                            //$('.ajax-loader').css("visibility", "hidden");
                            $('#loading').toggle();

                          },
                           error: function(xhr, status, error) {
                            alert(xhr.responseText);
                          }
                        });
                    }

You will see my url that I am posting to is url: "../db/statusHistory.php"

This function is called using a button in mainmenu.php.

<button id="'.$progress_id.'" type="button" class="btn btn-primary btn-sm btn-block" onclick="updateStatus('.$progress_id.',\''.$status.'\',\''.$reg_num.'\')">Update Status</button>

All of this worked up until this weekend something changed and now when this post call is executed it gives me an error 403 Forbidden, you dont have permission to access /db/statusHistory.php

This is the alert in the error: part in the ajax call :

I do not know what is causing this, I have checked permissions, I have created a new php file to post to but it still gives me the same error.

I am hosting on a shared hosting server,using php, jquery/3.4.0. I have only access to the shared hosting panel "CPanel" not the linux server.

Here is screen shots of my hosting directory and permissions. My mainmenu.php is in directory phplogin , mainmenu.php makes a post call to statusHistory.php and it is in the directory db

Public html directory :

phplogin Directory :

db Directory :

What should I be doing differently for my post call to work? As I said it did work for about a month and just stopped...

Any help would be appreciated.

More Screenshots chrome developer tools :

Network tab :

Ethiopia

Not that if I read that correctly, technically the 403 in the error log doesn't directly concern the script statusHistory.php, but an ErrorDocument file was declared to be loaded when the error happens, and the server is also forbidden to access that file. I don't say the first error is not a 403, if it is, you seem to have two 403 errors there. Could you check the network tab in your browser to add details? – Cnemis

@Cnemis thanks I have added more info from chromes network tab please check if this will help you. – Ethiopia

Answer 1

The problem was mod_security. I disabled mod_security for my domain and my problem was resolved. I will contact my hosting company and ask them to properly do the setup.

Not sure why it just started happening.

Ethiopia

Answer 2

If It was working before, You should check your .htaccess file which will be located in root directory of your site.

Lucerne

In the Public html directory image that file i listed but 0 bytes, so it does not have anything inside it. Or is there another .htaccess file? – Ethiopia

Answer 3

SEE UPDATE FIRST...

If your client/user has the Google Translate extension installed, and you are sending (via ajax) user-entered data (especially from TinyMCE or etc), the Google Translate extension might have appended these two lines to the end of your user-entered data:

<p>&nbsp;</p>
<div id="gtx-trans" style="position: absolute; left: -28px; top: -8px;">&nbsp;</div>

As soon as I removed those lines from the TinyMCE data being sent to the (PHP) back-end, the problem was resolved.

Maybe this discovery will help someone else.

Update:

It appears the string   being sent via jQuery AJAX is the problematic bit. I've had further trouble with this, even after removing the Google Translate appended text.

It turned out that removing the string   from the payload:
( e.g. .replaceAll("<p>&nbsp;</p>", "<p> </p>") )
fixed the matter. Perhaps that is what was causing the Google Translate bumpersticker to fail the XHR request in the first place...? Doesn't make sense but it worked for me, so sharing - especially since it is now months later and I ran into this (long since forgotten) problem again, googled the console error, and found my own SO post with the solution!

Bardwell

Answer 4

As far as I understand it stem from some character like those <>:"=

I replaced the TinyMCE data with the function below and then sent via ajax or $.post or fetch api or xhr.send etc.

My data very complex json data but this function was solved the problem.

It is because of your organization's firewall (WAF).

Maybe this func will help someone else.

function hata403_solution(te){
    te=te.replace(/</gim, '@@@€2');
    te=te.replace(/>/gim, '@@@€3');
    te=te.replace(/"/gim, '@@@€4');
    te=te.replace(/=/gim, '@@@€5');
    te=te.replace(/\\/gim,'@@@€6');
    te=te.replace(/:/gim, '@@@€7');
    te=te.replace(/src/gim, '@@@€8');
    te=te.replace(/script/gim, '@@@€9');
    return te;
}

//Off course you should replace the data to original again at the backend side.

---

Final Solution: I have genereated a SSL with Lets Encrypt and added to httpd-vhosts.conf the problem has been diaspeared.

It is because of your organization's firewall (WAF).

Bullock