How To Fix the “HSTS Missing From HTTPS Server” (+2 more) on DO Apps

Heya,

To add HTTP headers like Strict-Transport-Security, X-Frame-Options, and X-Content-Type-Options to your Angular 15 web application hosted on DigitalOcean’s “Apps” service, you’ll need to modify your server configuration or your application code to include these headers in the HTTP response. Since DigitalOcean’s Apps platform abstracts away much of the server management, you may have to rely on application-level changes.

Here’s a step-by-step guide on how to add these headers:

1. Modify Angular’s Server Response Headers:
   • If your Angular app is served through a Node.js server (like Express.js), you can easily add these headers in the server configuration.
   • In your Node.js server file, you can set headers using middleware. For example:

app.use((req, res, next) => {
  res.setHeader("Strict-Transport-Security", "max-age=63072000; includeSubDomains; preload");
  res.setHeader("X-Frame-Options", "DENY");
  res.setHeader("X-Content-Type-Options", "nosniff");
  // Add any other headers you need
  next();
});

2. Using Angular’s built-in HTTP Interceptors:

   • Angular’s HTTP Interceptors can also be used to modify headers, but they only apply to outgoing requests made from your Angular application, not to the HTTP responses from the server.

3. Addressing the Content Security Policy (CSP) Issue:

   • The CSP header is a powerful tool for preventing various types of attacks, including Cross-Site Scripting (XSS).
   • You can add a CSP header in a similar way to other headers. However, be cautious with its directives, as a strict policy might break functionalities (like inline scripts, styles, or third-party resources).
   • A basic CSP header can be added as follows:

res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'none'; style-src 'self' 'unsafe-inline';");