Add Support for Dynamic CSP Nonces to Enhance Security in Azure Static Web Apps

Question

Add Support for Dynamic CSP Nonces to Enhance Security in Azure Static Web Apps

emfau 25

https://github.com.mcas.ms/Azure/static-web-apps/issues/1575 seems to be not monitored anymore, thus I copied my request here, maybe someone can help me.

Is your feature request related to a problem? Please describe. Currently, Azure Static Web Apps do not support Content Security Policy (CSP) nonces, which are crucial for securing inline scripts and styles under strict CSP rules. Without nonce support, it is challenging to implement a CSP that prevents the execution of potentially injected or malicious inline scripts. This limitation weakens CSP effectiveness and forces us to choose less secure configurations, increasing the security risks for our applications.

Describe the solution you'd like I'd like Azure Static Web Apps to support dynamic CSP nonces. This could involve allowing us to configure nonce headers on a per-request basis or providing a mechanism within staticwebapp.config.json to dynamically generate and apply nonces to inline resources. Ideally, the feature would allow nonces to be added to responses without requiring complex workarounds, such as custom proxy functions or relying on static hashes, which do not offer the same security flexibility as nonces.

Describe alternatives you've considered

Azure Functions Proxy: Creating a proxy endpoint with Azure Functions to inject nonce-based CSP headers, but this approach adds complexity and latency.
Hash-Based CSP: Using hashes instead of nonces, which requires recalculating and updating CSP headers for every change in inline scripts or styles, making it challenging to maintain.
Static Nonce: Adding a static nonce in staticwebapp.config.json, which reduces security because it can’t offer per-request uniqueness, compromising the intent of CSP nonces.

Additional context Nonce support for CSP is essential for modern web security and is increasingly required for web applications handling sensitive user data. Implementing this feature would allow developers to strengthen their app’s security posture without relying on complex or less secure alternatives. This feature would also align Azure Static Web Apps with CSP best practices and bring it in line with other hosting solutions that provide better support for CSP nonces.

Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-11-27T04:30:18.78+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-11-28T04:34:56.06+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

2 answers

Your answer

Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-11-27T04:30:18.78+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-11-28T04:34:56.06+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

Answer 1

Hi @emfau ,
Thank you for Your Response.
The request regarding support for Dynamic CSP Nonces in Azure Static Web Apps.Currently, Azure Static Web Apps does not natively support dynamic CSP nonces. We recognize that this limitation can make it difficult to implement a strict CSP, especially for applications that require robust protection against inline script injection attacks.While the feature is not available, here are some workarounds you might consider in the interim.

Use Azure Functions to intercept and modify responses, dynamically adding nonce-based CSP headers.
Though this adds complexity, it ensures per-request uniqueness for nonces.
Use hashes to specify allowed inline script content in your CSP. While less flexible than nonces, this approach is still effective for many scenarios.
Tools like csp-hash-generator can help automate hash generation for your inline scripts.
You can define a static CSP nonce in the staticwebapp.config.json. While not ideal, it offers some level of security for less dynamic environments.
References links: Content Security Policy (CSP) Nonces Configuration File Documentation

Answer 2

emfau 25

Thanks @Shree Hima Bindu Maganti for your proposals. We currently use Azure App Service and switching to static web apps would have many advantages (price, complexity, deployment time, features etc).

Azure Static Web Apps does not natively support dynamic CSP nonces

I assume this is not on a public roadmap that this will be supported soon?

Use Azure Functions to intercept and modify responses, dynamically adding nonce-based CSP headers.

this sounds interesting. Is there an example project out in the wild or covered in Azure documentation? From a architectural point of view I assume this function could be reused by multiple applications.

Thanks again and have a nice day!

Michael

Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-11-29T15:44:50.65+00:00
Hi @emfau ,

Thank you for Your Response.
Azure Static Web Apps currently do not natively support dynamic CSP (Content Security Policy) nonces. There is no public roadmap indicating when this feature might be added. However, you can implement dynamic nonce-based CSPs using Azure Functions to modify HTTP responses dynamically. This approach involves intercepting responses and injecting CSP headers with dynamically generated nonces.

Set up an Azure Function that listens to requests and generates a cryptographically secure nonce (e.g., using Node.js crypto module).

Add this nonce to the Content-Security-Policy header in the response.

Ensure the nonce is applied to <script> tags in your application.

Host the Azure Function independently for centralized nonce management and reuse it across multiple applications.

Azure Function for dynamic CSP:

const crypto = require('crypto'); module.exports = async function (context, req) { const nonce = crypto.randomBytes(16).toString("base64"); context.res = { headers: { "Content-Security-Policy": `script-src 'nonce-${nonce}' 'strict-dynamic'; object-src 'none'; base-uri 'none';`, }, body: `<!DOCTYPE html><html><head><script nonce="${nonce}">console.log('Secure script');</script></head><body>Hello World!</body></html>`, }; };
Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-12-02T01:44:46.2366667+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Shree Hima Bindu Maganti 4,925 Reputation points Microsoft External Staff Moderator

2024-12-03T05:07:39.4433333+00:00

Hi @emfau ,

Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.

Share via

Add Support for Dynamic CSP Nonces to Enhance Security in Azure Static Web Apps

2 answers

Your answer