Configuring CORS for Secure Web Requests in Azure Serverless Apps

Cross-Origin Resource Sharing (CORS) is a critical security feature for web applications, especially when it comes to serverless architectures that expose APIs to client applications. By configuring CORS for your Azure Function App, you can restrict access to specific origins, ensuring that only authorized websites can interact with your dynamic backend. In this guide, we’ll walk through setting up CORS for an Azure Function App using Terraform, as well as demonstrate CORS in action with example HTTP requests.

Step 1: Understanding CORS and Its Importance

CORS is a security feature implemented by web browsers to prevent JavaScript code on one domain from making requests to another domain without permission. This policy helps prevent malicious sites from accessing resources on a different domain, which is essential when your Azure Function App handles sensitive or restricted data.

By defining allowed origins and request methods, you can control which domains can interact with your serverless API, thus enhancing security.

Step 2: Configuring CORS for Azure Function App with Terraform

In our setup, we will configure CORS to allow requests only from our specific domain (e.g., https://mywebsite.com). Below is the Terraform code that defines this CORS configuration for the Function App.

Terraform Code - CORS Configuration for Azure Function App

This code configures the Function App to accept requests only from the specified origin. Here, CORS is configured within the site_config block of the function app resource, specifying the allowed origin, allowed methods, and allowed headers.

resource "azurerm_linux_function_app" "this" {
  name                = "${local.project}-functions"
  resource_group_name = azurerm_resource_group.this.name
  location            = azurerm_resource_group.this.location

  storage_account_name       = azurerm_storage_account.this.name
  storage_account_access_key = azurerm_storage_account.this.primary_access_key
  service_plan_id            = azurerm_service_plan.this.id

  identity {
    type = "SystemAssigned"
  }

  site_config {
    application_stack {
      node_version = "20"
    }

    cors {
      allowed_origins = [
        "https://mywebsite.com"
      ]
      allowed_methods = ["GET", "POST"]
    }
  }

  app_settings = {
    "WEBSITE_RUN_FROM_PACKAGE" = "${azurerm_storage_account.this.primary_blob_endpoint}${local.function_code_directory}/${local.function_zip_file}"
  }
}

In this example, we restrict access to https://mywebsite.com and allow only GET and POST requests, enhancing security by preventing unwanted domains and methods from accessing the function.

Step 3: Testing CORS Configuration with HTTP Requests

To validate our CORS configuration, we can use HTTP requests from different origins to see how the Function App responds.

Example 1: Allowed Origin (Valid CORS)

The following example uses curl to send a GET request from the allowed origin https://mywebsite.com. Since this origin is authorized, the response should include the necessary CORS headers.

curl -X GET https://my-function-app.azurewebsites.net/api/myFunction \
  -H "Origin: https://mywebsite.com"

Expected Response Headers:

• Access-Control-Allow-Origin: https://mywebsite.com
• Access-Control-Allow-Methods: GET, POST

If the origin matches the allowed origin, the server should respond with the Access-Control-Allow-Origin header, confirming that the request is permitted.

Example 2: Disallowed Origin (Invalid CORS)

In this example, we try to access the Function App from https://unauthorized.com, an origin not included in the allowed list. The server should deny this request by omitting the CORS headers in the response.

curl -X GET https://my-function-app.azurewebsites.net/api/myFunction \
  -H "Origin: https://unauthorized.com"

Expected Response: The response will not include Access-Control-Allow-Origin, indicating that this origin is not permitted to access the function.

Step 4: Verifying CORS Configuration in the Azure Portal

To review and confirm your CORS settings, navigate to the Function App in the Azure portal, then go to API > CORS settings. Here, you should see the configured allowed origins, headers, and methods matching the settings defined in Terraform.

By configuring CORS in your Azure Function App, you can control which domains are allowed to make requests to your backend, thereby enhancing security. Using Terraform to automate this configuration ensures that the CORS policy remains consistent and manageable across deployments. With this setup, you can confidently deploy your serverless API, knowing that only authorized requests will be processed.

In the next article, we’ll explore more ways to secure your Function App and improve performance with additional configurations.