Solution Ninja: HOW - To add Multiple Environment Security headers, CSP, Report To/URI & web.config in angular (x.x.x)

Internet Information Services Angular multiple environment setup security header in angular app

HOW - To add Multiple Environment Security headers & web.config in angular

Remember to set your web.config and security headers for all your environments: DEV, UAT, and PROD.

Create web.config files

Go to src/ and create:

web.dev.config - for DEV
web.uat.config- for UAT
web.prod.config - for PROD
web.config - just an empty file to satisfy angular.json assets in architect → build → options.

The example of web.dev.config (the most important part is the Content Security Policy).

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular-Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
  <httpProtocol>
    <customHeaders>
      <remove name="X-Powered-By" />
      <add name="Report-To" value='{"group":"default","max_age":31536000,"endpoints":[{"url":"https://UrReportYRienPoint.etc/a/d/g"}],"include_subdomains":true}' />
      <add name="NEL" value='{"report_to":"default","max_age":31536000,"include_subdomains":true}' />
      <add name="Content-Security-Policy" value="default-src 'self' https://siteURlsUSed.etc; img-src 'self' data: ; script-src 'self'; style-src 'self'; font-src 'self' data: ; frame-ancestors 'self'; base-uri 'self'"  />
      <add name="X-Frame-Options" value="DENY" />
      <add name="X-Xss-Protection" value="1; mode=block" />
      <add name="X-Content-Type-Options" value="nosniff" />
      <add name="Strict-Transport-Security" value="max-age=15768000; includeSubDomains" />
      <add name="Cache-Control" value="no-cache, no-store, must-revalidate, max-age=0" />
      <add name="Pragma" value="no-cache" />
      <add name="Expires" value="0" />
      <add name="Arr-Disable-Session-Affinity" value="True" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

</configuration>

Report-to / Report-uri

It’s important to add reporting about CSP issues:

<add name="Report-To" value='{"group":"default","max_age":31536000,"endpoints":[{"url":"https://UrReportYRienPoint.etc/a/d/g"}],"include_subdomains":true}' />
<add name="NEL" value='{"report_to":"default","max_age":31536000,"include_subdomains":true}' />
<add name="X-Frame-Options" value="SAMEORIGIN" />

And inside the CSP:

report-uri https://UrReportYRienPoint.etc/r/d/csp/enforce;

frame-src 'self' https://url-dev.etc includeSubdomains;

Notice. The last line describes DEV environment as an example → https://url-dev.etc. You need a separated configuration for all environments, as usually.

Configure your angular.json

Open angular.json
In your project definition, go to architect → build → options → assets and add "src/web.config"
Go to architect → build → configurations
Add web.config replacement to each of your environments, i.e.

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  },
  {
    "replace": "src/web.config",
    "with": "src/web.prod.config"
  }
]

Verify your configuration

It is recommended to test the configuration in 3 steps:

Build artifacts
Localhost
Server

Build

The output directory should contain web.config file with the requested environment configuration.

Localhost

To test your CSP locally, there are 2 ways:

Add <meta http-equiv="Content-Security-Policy" content> to <head> of your index.html temporary. The content should come from your CSP value in web.dev.config. Example <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">
…Or build your project and then move it to local IIS server.
1. Control Panel → Programs and Features → Turn Windows features on and off
2. Now scroll down until you see Internet Information Services on the list. Go ahead and click in the empty checkbox next to the title. It should turn into a small black square.
3. You should be able to load the default website by going to your browser and tying in //localhost
4. Put your build output files in C:\inetpub\wwwroot.
5. Refresh your localhost in your browser.
6. Known problems:
  - Server unavailable 503: How to fix? Change a port, i.e. from :80 to :8080. Start / reset you pool and site.

Server & Pipelines

Verify your releases: DEV, UAT, and PROD.

Known issues

Fonts (example issue: fonts are not displayed correctly, no icons - font awsome, fontello)
Scripts (example issue: a PDF Viewer that comes with 3rd party library doesn’t work as expected)

Solution Ninja

HOW - To add Multiple Environment Security headers, CSP, Report To/URI & web.config in angular (x.x.x)

HOW - To add Multiple Environment Security headers & web.config in angular

Create web.config files

Report-to / Report-uri

Configure your angular.json

Verify your configuration

Build

Localhost

Server & Pipelines

Known issues

No comments:

Post a Comment