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

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!