Security

🔐 Security Headers

The standard starter includes a set of security headers by default in app/headers.ts. These help protect against common attacks like cross-site scripting (XSS), clickjacking, and data injection.


3 collapsed lines
1
import { RouteMiddleware } from "@redwoodjs/sdk/router";
2
import { IS_DEV } from "@redwoodjs/sdk/constants";
3

4
export const setCommonHeaders =
5
  (): RouteMiddleware =>
6
  ({ headers, rw: { nonce } }) => {
7
    if (!IS_DEV) {
8
      // Forces browsers to always use HTTPS for a specified time period (2 years)
9
      headers.set(
10
        "Strict-Transport-Security",
11
        "max-age=63072000; includeSubDomains; preload",
12
      );
13
    }
14

15
    // Forces browser to use the declared content-type instead of trying to guess/sniff it
16
    headers.set("X-Content-Type-Options", "nosniff");
17

18
    // Stops browsers from sending the referring webpage URL in HTTP headers
19
    headers.set("Referrer-Policy", "no-referrer");
20

21
    // Explicitly disables access to specific browser features/APIs
22
    headers.set(
23
      "Permissions-Policy",
24
      "geolocation=(), microphone=(), camera=()",
25
    );
26

27
    // Defines trusted sources for content loading and script execution:
28
    headers.set(
29
      "Content-Security-Policy",
30
      `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; object-src 'none';`,
31
    );
32
  };

Changing CSP (Content Security Policy) headers

Sometimes you need to allow additional resources or modify the Content Security Policy (CSP) to accommodate third-party scripts, styles, or other assets. The CSP headers control what resources can be loaded and executed by your application.

Adding trusted domains

The default CSP in the starter focuses on the most critical security aspects. For many applications, this provides a good balance between security and functionality. When you need to integrate third-party resources, you can extend it like this:

1
// In app/headers.ts
2
headers.set(
3
  "Content-Security-Policy",
4
 `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; object-src 'none';`,
5
 `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com https://trusted-scripts.example.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; img-src 'self' https://images.example.com; object-src 'none';`,
6
);

Using `nonce` for inline scripts

Sometimes you need to include inline scripts in your application, but Content Security Policy (CSP) blocks them by default for security reasons. RedwoodSDK automatically generates a fresh, cryptographically secure nonce value for each request You can access this nonce in document or page components rendered by the router, using rw.nonce.

1
export const Document = ({ rw, children }) => (
2
  <html lang="en">
3
    <head><!-- ... --></head>
4
    <body>
5
      <div id="root">{children}</div>
6

7
      <!-- Set the nonce the inline script -->
8
      <script nonce={row.nonce}>/* ... */</script>
9
    </body>
10
  </html>
11
);
12

13
export default defineApp<AppContext>([
14
  // ...
15
  render(Document, [
16
    // ...
17
  ]),
18
]);

Lifting device permission restrictions

Sometimes you need to allow your web application to access device features like the camera, microphone, or geolocation. These permissions are controlled by the Permissions-Policy header.

By default, the standard starter includes restrictive permissions settings for security reasons.

To enable device access, you’ll need to modify the Permissions-Policy header in your app/headers.ts file:

1
// In app/headers.ts
2
headers.set(
3
  "Permissions-Policy",
4
  "geolocation=(), microphone=(), camera=()",
5
  "geolocation=self, microphone=self, camera=self"
6
);

The self keyword allows the feature to be used only by your own domain.

For a complete reference, see the MDN Permissions Policy documentation.