Why Is This AJAX Post Request Treated As A Cross Origin?

Heretic86

New member
I have a rather complex setup with numerous files and some specifics, so this isnt the simplest of questions because there are a lot of things involved here. I am also running with vanilla Javascript over JQuery because if I get where I want to go with this, then JQuery will eat a lot of overhead. So its not that I dont know how to use JQuery, I am just trying to avoid it for specific reasons.

The page I am working on needs to be able to read a cookie, but the cookie header is never being sent in the AJAX request. In my console, it shows that the browser is flagging it as a CORS request (Cross Origin Request Sharing), and despite having a withCredentials flag enabled, the CORS wont send the Origin header along with the cookie. The trouble here is that I am relatively sure it should not be treated as a Cross Origin so I cant check in PHP the Origin Header (not sent by default). PHP sets its cookie with an HTTPONLY flag set so it is not available to Javascript. At some point I will use Javascript for a Token Cookie once I can get PHP to read it. This prevents Session Hijacking. And yeah more work needs to be done for both XSS and CSRF, but to get there I need to be able to read the cookie in PHP first.

The scripts I want to run are contained inside a Sandboxed Iframe, because the intent is to eventually allow users do some things that are considered (rightfully) dangerous, which is to run unfiltered scripts inside the Iframe on other users systems. So there needs to be some pretty strong security setups going on in there. And the entire point of this concept is to allow users to upload and run their own scripts so it is not as if I am just going to listen to the lazy advice of "dont run user scripts". I didnt come to debate on the User Scripts topic. Hence Sandbox. Hence Content Security Policy. Hence CORS. Hence, back to the original question?

What do I need to do for reading my cookie in my AJAX with Cookie call?

This is my TEST page:

Everything should be visible to a skilled developer without needing to read my php files, however I will make everything available anyway. I will point out that the Request Headers needs to be examined as that is where you can see that the Origin is not sent by the browser to my server. My php page is sending Content-Security-Policy which you can read (examine in console) a little more plainly. The AJAX call asks for a JSON string from "jsondata.php" which reports time and a test cookie value, but the test cookie value is never readable.

On my iframe.php page, I have a couple scripts, and this is where it is malfunctioning:

JavaScript:
      const loadLocalXMLCookie = function(){
        // This isnt working, I get a CORS Violation
        let url = "jsondata.php";
        var xhttp = new XMLHttpRequest();
        // Third Argument of "true" allows XLMHttpRequest2 which allows sending Cookies via AJAX
        xhttp.open("GET", url, true);
        // withCredentials should send Cookies via the request, and should not be needed on SameSite
        xhttp.withCredentials = true;       
        xhttp.onreadystatechange = function() {
          console.log(this);
          if (this.readyState == 4 && this.status == 200){
            outputElement.innerHTML = this.responseText;
          } 
        };
        xhttp.onerror = function(){ outputElement.innerHTML = "XML Cookie Error " + url; };
        xhttp.send();       
      }
Here is my source code zipped up:

What have I done incorrectly that is preventing my AJAX call from sending cookies in the Request Headers (not preflight) in the XMLHttpRequest to my jsondata.php server script?
 
Top