(CORS C# ASP.NET Core) Credential Cookies with Cross-Origin Requests

By default, a browser doesn't send authentication cookies with cross-origin requests. It sends cookies only if the javascript code sets a property called "credentials" to true or "include." But that's not the whole story. The server-side code must also set an "AllowCredentials" cross-origin policy so that it can respond with a header called "Access-Control-Allow-Credentials." If the browser doesn't receive this header, it logs a cross-origin failure even if the origin is white-listed on the server. Thus, it is a matter of writing the javascript code correctly, and configuring the cross-origin policy that signals the browser that cross-origin cookies are allowed. This polocy will not work if wild-cards are used in the "WithOrigins" function, or "AllowAnyOrigin" function has been used.
(Rev. 30-Sep-2022)

Categories | About |     |  

Parveen,

Writing the correct javascript

Let's have a look at the client-side javascript first.

There are many approaches to making a cross-origin request to a server. One is to use jQuery, another is to use plain javascript with the XMLHttpRequest object, and more recently, the use of fetch API is also getting popular. We shall explain how to use the latter two.

If you use XMLHttpRequest, then set withCredentials to true as shown in the code next.


// this code sends an authentication 
// cookie on CORS if the server side is 
// configured for acceptance 

var xhr = new XMLHttpRequest();

xhr.open(...);

// this MUST be set to true 
xhr.withCredentials = true;

Configure your fetch API as in this example. Set the credentials property to 'include'.


  fetch ( 
          "https://localhost:7276", 
          {
             method: "GET", 

             credentials: "include"
          }
   )
  .then( (response) => response.text() )

  .then( (data) => console.log(data) ) ;

Video Explanation (see it happen!)

Please watch the following youtube video:

Configuring the CORS Policy server side

Let's now have a look at the server side configuration. We have created the project and attached it as a download.

Open the solution explorer and locate the program.cs file. Double click and open it! Let's examine the code line by line.


// program.cs 

var builder = WebApplication.CreateBuilder();

builder.Services.AddRazorPages();

builder.Services.AddCors(options =>
{
  options.AddDefaultPolicy(policy =>
    {
      policy.WithOrigins("https://hoven.in")
            .AllowCredentials();
    }
  );
});

var app = builder.Build();

app.UseCors();

app.MapRazorPages();

app.Run();

The first two lines are as usual. Next, we have configured a default cross-origin policy. The WithOrigins method adds one or more third-party origins. The function AllowCredentials sets the policy to allow credentials.

Verifying with curl

We shall now verify the headers with curl.

Run the project and allow the home page to open! Take note of the URL.

Next open a command prompt and type this curl command.


  curl -i https://localhost:7276/ -H "origin:https://hoven.in"

Hit enter to receive the response.

The response confirms the presence of Access-Control-Allow-Credentials header, which means that this server accepts cross-site cookies sent from a javascript code.

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Tue, 23 Aug 2022 13:14:36 GMT
Server: Kestrel
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://hoven.in
Transfer-Encoding: chunked

The browser will, therefore, present the payload to the user who made his cross-site request. This feature must be used with care. Thanks!


This Blog Post/Article "(CORS C# ASP.NET Core) Credential Cookies with Cross-Origin Requests" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.