How can I add custom security headers to CSR angular application deployed on Azure Webapp?

Question

How can I add custom security headers to CSR angular application deployed on Azure Webapp?

Beltran, Julian Ricardo 0

I have a CSR (Client-side-rendered) angular applicaton that is beying deployed to an Azure Linux Webapp. I have a security requriement to add some security headers to the application responses such as Content-Security-Policy, X-Content-Type-Options, etc.

Is there any way to add this custom headers to the webapp responses withouth making my application SSR (Server-side-rendered) nor using additional Azure services like Azure Front Door or Azure CDN?

Thank you in advance for any help.

1 answer

Your answer

Answer 1

Grmacjon-MSFT 19,151 Moderator

Hi @Beltran, Julian Ricardo yes, there are ways to add custom security headers to CSR angular application deployed on Azure Webapp

Here's the recommended approach using the built-in capabilities of Azure Linux Web App:

1.Create a file named web.config (or modify an existing one) in the root directory of your Angular application. This file will be used to configure IIS (Internet Information Services) on your Azure Web App.

2. Inside the web.config file, add the following section to define your custom security headers:

<system.webServer>
  <staticContent>
    <mimeMaps>
      <add fileExtension=".woff" mimeType="application/font-woff" />
      <add fileExtension=".woff2" mimeType="application/font-woff2" />
      </mimeMaps>
    <headers>
      <remove name="X-Powered-By" /> <add name="Content-Security-Policy" value="your-csp-policy-here" />
      <add name="X-Content-Type-Options" value="nosniff" />
      </headers>
  </staticContent>
</system.webServer>

Replace your-csp-policy-here with your actual Content-Security-Policy directive.

3. Deploy your updated application with the web.config file to your Azure Linux Web App using your preferred deployment method (e.g., Git push, Azure DevOps pipeline)

Beltran, Julian Ricardo 0 Reputation points

2024-03-21T20:06:31.38+00:00

Hi @Grmacjon-MSFT , thank you for your answer. I tested this approach and unfortunately it is not working for me. As far I understand, angular applications that run on Linux Webapps do not use IIS, they use nginx or apache instead. I appreciate if you have any other recommendations taking this into account.Thank you!

Grmacjon-MSFT 19,151 Moderator

@Beltran, Julian Ricardo Yes, that is correct. For Angular applications deployed on Azure Linux Web Apps, you typically use either Nginx or Apache as the web server.

Here's how you can add custom security headers to an Angular application hosted on an Azure Linux Web App using Nginx:

1.In your Angular project, create a new file called nginx.conf in the src/assets directory (or any other directory that will be included in your build).

Add the custom security headers to the Nginx configuration:

   events {
     worker_connections 1024;
   }
   http {
     server {
       listen 80;
       root /usr/share/nginx/html;
       index index.html index.htm;
       # Add custom security headers
       add_header X-XSS-Protection "1; mode=block";
       add_header X-Frame-Options DENY;
       add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
       add_header Content-Security-Policy "default-src 'self'";
       add_header Referrer-Policy "no-referrer";
       add_header X-Content-Type-Options nosniff;
       location / {
         try_files $uri $uri/ /index.html;
       }
     }
   }

Adjust the security headers as needed for your application.

Update your Angular production build configuration: In your angular.json file, locate the "production" configuration object and add the following property:

  "configurations": {
     "production": {
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
         }
       ],
       "outputPath": "dist/your-app-name",
       "assets": [
         "src/favicon.ico",
         "src/assets",
         "src/assets/nginx.conf"
       ],
       // ... other production configuration options
     }
   }

This will include the nginx.conf file in your production build.

Deploy your Angular application to the Azure Linux Web App: When you deploy your Angular application to the Azure Linux Web App, the Nginx server will serve your application and include the custom security headers.

Share via

How can I add custom security headers to CSR angular application deployed on Azure Webapp?

1 answer

Your answer