Adding Custom HTTP headers

Custom headers are useful for adding extra information or instructions to your web server or browser. For example, you can use headers to disable Google FLoC, set security policies, enable CORS, etc.

Let’s see how you can add custom headers to your Web Applications on RunCloud.

RunCloud allows you to create custom Nginx configurations easily from the dashboard. You can use this feature to add your custom headers for any web application that you have on RunCloud.

1. Go to your RunCloud dashboard and select the web application that you want to add custom headers to. Click on the “Nginx Config” in the left menu to open the Custom Nginx Config section.

2. Click on the “Add Config” button to create a new entry.
   
   On the next screen, you can pick “Header – Opt-out of Google’s FLoC Network” in the predefined config drop-down to view a sample config.
   
   You can give this custom Nginx config any name name. For example, my-custom-headers.

3. In the config text box, you can see the predefined config to add Permissions-Policy headers. You can use this as a reference and add any other custom headers using the add_header directive.
   
4. You can add multiple headers by adding more lines with the add_header directive. Make sure each line ends with a semicolon (;).
   
   For example, if you want to add Permissions-Policy, Content-Security-Policy, Referrer-Policy, and Cross-Origin-Opener-Policy, you can create a config similar to the following example.

add_header Permissions-Policy "interest-cohort=(),geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
add_header Content-Security-Policy "upgrade-insecure-requests;";
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Cross-Origin-Opener-Policy "same-origin-allow-popups";

5. Once you have added all the headers, click on the “Run and Debug” button to test the configuration. If the config doesn’t have any syntax errors, you will get a message saying “test is successful”.

6. If there are no errors or warnings, click on the “Save Config” button to apply your custom Nginx config to your web application. This will reload the Nginx web server and immediately activate your custom headers.

Verifying HTTP Headers

After applying your custom Nginx config, you should verify that your custom headers are working as expected.

• You can use an online tool such as Security Headers or SSL Labs to check the headers of your website. Both of these tools provide you with an easy way to test your configuration and verify that all security headers are working correctly.
  
• You can also use your browser’s developer tools to inspect the headers of your website. Just open your website in your browser and press F12 to open the developer tools.
  
  Go to the Network tab and reload your website. Click on the first request (usually your website domain) and look for the Headers section. You should see your custom headers under the Response Headers subsection.