Installing CORS on Umbraco

In today's modern web development landscape, it's common for applications to consume data from various sources, often through APIs provided by other servers. This architecture is beneficial because it promotes decoupling and modular design. However, it also introduces new security challenges, one of which is Cross-Origin Resource Sharing (CORS).

When building an Umbraco CMS application that acts as a headless CMS or exposes public APIs, dealing with CORS is inevitable. A headless CMS exposes content through an API, allowing other applications to consume that content. Similarly, a public API provides interfaces that other applications can interact with. In both cases, the data consumer is often a website hosted on a different domain than the data provider. This is a cross-origin scenario, and CORS settings are necessary to handle it securely.

This blog post will provide a step-by-step guide on how to set up CORS in your Umbraco application built on .NET Core. By following these steps, you'll enable secure interaction between your APIs and the client applications hosted on different domains.

If you'd rather have CORS installed by one of our in-house developers, check out our support page to view the different contracts that we offer.

Step 1: Understanding CORS

Before diving into the practical part, it's essential to understand what CORS is. CORS is a mechanism that uses additional HTTP headers to allow a web application at one origin (domain) to access specific resources from a server at a different origin.

For example, if you have an API at `api.mywebsite.com` and a front-end application hosted at `mywebsite.com`, your API must permit the front-end application to make cross-origin requests. Without this permission, the browser's same-origin policy will block the front-end application from making requests to your API.

Step 2: Install Necessary Packages

The first step is to install the necessary package to manage CORS. Use the NuGet package manager to install the CORS middleware package:

dotnet add package Microsoft.AspNetCore.Cors

This package contains all the necessary classes and methods needed to configure CORS in your application.

Step 3: Configure CORS in Startup.cs

After installing the package, configure CORS in the `Startup.cs` file. Add CORS services to the service collection in the `ConfigureServices` method:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder =>
            {
                builder.WithOrigins("http://example.com")
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });

    // Add other services...
}

This policy allows cross-origin requests from "http://example.com". It also specifies that any HTTP method and header from this origin are accepted.

However, in some cases, you may want to allow any origin to make requests to your application. In this case, you can use the `AllowAnyOrigin` method as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllOrigins",
            builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });

    // Add other services...
}

Be aware that allowing any origin may expose your application to security risks. Make sure to apply such a policy only if it is necessary and safe to do so.

Step 4: Apply CORS Middleware

After creating the CORS policy, apply it to the middleware pipeline in the `Configure` method of the `Startup.cs` file:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // Apply CORS middleware before routing.
    app.UseCors("AllowSpecificOrigin");

    // Other middleware...
    app.UseRouting();

    // Other middleware...
}

Make sure to apply the CORS middleware before routing and any other middleware that might write to the Response.

Conclusion

Congratulations! You've successfully set up CORS in your Umbraco application using .NET Core. This setup is crucial if your Umbraco application acts as a headless CMS or provides public APIs. This configuration will allow client applications from different origins to interact securely with your APIs, improving your app's interoperability and scalability.