Understanding Content Security Policy (CSP) for Azure App Service and Angular Apps

Table of Contents

The Problem #

I was encountering the error message below when integrating an Angular Single Page Application (SPA) with the Microsoft Authentication Library (MSAL) on Azure App Service:

Content Security Policy: The page’s settings blocked the loading of a resource at https://login.microsoftonline.com

This error does not appear during app development in the localhost environment.

Investigation and Root Cause #

The issue is originated in the Content Security Policy (CSP) configurations on Azure App Service.

CSP is a crucial security measure guarding against cross-site scripting (XSS) and other code injection threats by specifying which resources a web page can load. It delineates permitted sources for various content types like scripts, stylesheets, and images, mitigating the risk of executing malicious code.

When deploying an Angular App on Azure App Service, a web.config file will also be deployed with the compiled resources. This file, integral to Internet Information Services (IIS), regulates and supplements content for requests and responses. Notably, the web.config file defines the CSP, which is then injected into the response header.

When running the app in localhost, the web.config file will be ignored so no CSP policies will be applied.

Solution: Adjusting CSP for Azure App Service #

To solve the CSP error, adding the necessary domain(s) into the default-src directive and separated them using a space:

connect-src 'self' https://login.microsoftonline.com/;

It’s important to add the trusted domains only. Avoid overly permissive configurations like wildcard expressions (*), as they permit loading resources from all domains, including potentially malicious content.

Digging Deeper: Understanding CSP Headers #

The CSP header encompasses various configurable values to fortify your website against XSS attacks. Check out the Content-Security-Policy (CSP) Header Quick Reference for more details and configurations on using this header effectively.

Reference #

Stack Overflow - Content Security Policy Error: https://stackoverflow.com/a/37308542/13742790
Content Security Policy (CSP) on MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
Content Security Policy Reference: https://content-security-policy.com/

(cover image generated by ChatGPT.)