IFrame not reading cookie After calling JQuery Ajax function

Question

I have website MAIN (http://localhost:63085/) with an iframe embedded in it, the iframe source is from another host website BRANCH (http://localhost:50725/). The page inside the iframe needs cookies to work (because it uses forms authentication).

I set an API on branch website that authenticates the user and sends a cookie back in the response. The Main website will call the API, then load the default page (hosted under branch) in iframe.

The default page needs the form authentication cookie. I supposed that the iframe should read the cookie automatically (since they are both under localhost). But, the user in the default page was not authenticated and never reads the cookie.

This is the Ajax function from Main Branch Site:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
    <div class="row">
        <iframe id="frmCompas" width="800" height="800"></iframe>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        console.log("ready!");
        authUser();
    });

    function authUser() {

        $.ajax({
            url: 'http://localhost:50725/api/auth?name=h&pass=1',
            type: 'POST',
            dataType: 'json',
            success: function (data) { //auth user through the web api to generate an authentication Cookie
                frmCompas.src = "http://localhost:50725/Default.aspx"
            },
            error: function () {
                console.log('Error in Operation');
            }
        });

    }

</script>

As you see, after calling API (http://localhost:50725) under branch, I load the default page in the iframe.

My problem is that when calling the Main Site, the cookie returned is not read and sent with with request when rendering Default Page:

Testing 1st Case: Calling Main Site

1. Call to Auth API From Main Site

2. Rendering Default Page in IFrame:

I also tried to the browse the branch site default page directly in url (it also didn't get that cookie) and didn't get authenticated.

Test 2nd Case: Calling Auth Api in Seperate URL

The API: returned the cookie: "36FED3D72417.."

Now, when I browse the main web site, here what happens when checking the traffic:

1. Calling Localhost: the cookie is associated in the request from the begining

2. Calling API:

3. Calling Main/Default.aspx in Iframe:

Finding: The iframe reads the cookie which was generated by the api when called outside main site.

How to resolve this issue and make the cookie readable by the iframe in the 1st test case?

Answer 1

The problem was in the ajax function itself. So, I tried to get the cookie and rewrite it to the browser. But, I could not do that using the Set-Cookie header as indicated here .

xhr.getResponseHeader('Set-Cookie');

So, I modified the API under branch site to return the cookie data in the respone body as json, instead of having it in the response header.

The API:

   [HttpPost]
    public HttpResponseMessage Get(string name, string pass)
    {
        var resp = new HttpResponseMessage();

        if (name == "h" && pass == "1") //dummy data 
        {
            // Create the authentication ticket with custom user data.
            var serializer = new JavaScriptSerializer();

            Models.User u = new Models.User() { Id = 1, Name = "Test", Username = "h", Age = 31 };
            string userData = serializer.Serialize(u);
            FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1,
                  name,
                    DateTime.Now,
                    DateTime.Now.AddDays(2),
                    true,
                    userData,
                    FormsAuthentication.FormsCookiePath);

            // Encrypt the ticket.
            string encTicket = FormsAuthentication.Encrypt(ticket);

            var cookie = new MyCustomCookie()
            {
                Name = FormsAuthentication.FormsCookieName,
                Value = encTicket,
                Days = "2"
            };

            return Request.CreateResponse(HttpStatusCode.OK, cookie);
        }

        return Request.CreateResponse(HttpStatusCode.Unauthorized);
    }

This is the Response body from the API:

{"Name":".MyAuthCookie","Value":"953020CCD5739418E2D3FB42AB00072..", "Days": 1}

Then in the AJAX call in the Main Site: I get the json data and create a cookie using javascript:

    $(document).ready(function () {
        authUser();
    });

    function authUser() {
        $.ajax({
            url: 'http://localhost:50725/api/auth?name=h&pass=1',
            type: 'POST',
            success: function (data, status, xhr) {
                 // you need to also check the status to avoid creating a 
                 //useless cookie if the user was not authorized

                createCookie(data.Name, data.Value, data.Days);
                frmCompas.src = "http://localhost:50725/Default.aspx"
            },
            error: function () {
                console.log('Error in Operation');
            }
        });
    }

    function createCookie(name, value, days) {
         if (days) {
            var date = new Date();
             date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
          }
         else 
            var expires = "";

         document.cookie = name + "=" + value + expires + "; path=/";
     }