HTTP Security Headers for nuxt application

, , ,
1

To add security headers to a Nuxt.js application, you can do so by configuring them in the nuxt.config.js file using the render property. This property allows you to customize the HTTP response headers, including adding security headers.

Here’s how you can add security headers to your Nuxt.js application:

Step 1: Modify nuxt.config.js

Open your nuxt.config.js file and add the following configuration:

export default {
  // Other Nuxt configuration...

  render: {
    csp: {
      // Enable CSP
      hashAlgorithm: 'sha256',
      policies: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https:"],
        'style-src': ["'self'", "'unsafe-inline'", "https:"],
        'img-src': ["'self'", "data:", "https:"],
        'font-src': ["'self'", "data:", "https:"],
        'connect-src': ["'self'", "https:"],
        'frame-src': ["'self'", "https:"],
        'object-src': ["'none'"],
        'base-uri': ["'self'"],
        'form-action': ["'self'"],
        'upgrade-insecure-requests': [],
        'block-all-mixed-content': []
      },
      reportOnly: false // Set to true if you want to test the policy
    },
    http2: {
      push: true, // Enable HTTP2 push
    },
    compressor: {
      threshold: 0 // Compress responses
    },
    static: {
      etag: true, // Enable ETag generation
    },
    // Add custom headers
    headers: {
      'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
      'X-Frame-Options': 'SAMEORIGIN',
      'X-Content-Type-Options': 'nosniff',
      'X-XSS-Protection': '1; mode=block',
      'Referrer-Policy': 'no-referrer, strict-origin-when-cross-origin',
      'Permissions-Policy': 'geolocation=(), vibrate=(), payment=(), autoplay=(self)'
    }
  }
}

Explanation of the Configuration:

  1. CSP (Content Security Policy):

    • The csp property defines your Content Security Policy.
    • You can specify allowed sources for different types of content like scripts, styles, images, and more.
    • The hashAlgorithm option ensures that inline scripts are hashed with sha256.
    • reportOnly: false means that violations will be blocked. Set it to true to test the policy without enforcing it.

  2. Strict-Transport-Security (HSTS):

    • Enforces HTTPS and includes subdomains. The preload directive indicates that the domain should be preloaded in browsers to always be accessed via HTTPS.

  3. X-Frame-Options:

    • Prevents clickjacking by ensuring that your site can only be embedded in frames from the same origin.

  4. X-Content-Type-Options:

    • Prevents browsers from MIME-sniffing the response away from the declared content type.

  5. X-XSS-Protection:

    • Enables XSS filtering in browsers.

  6. Referrer-Policy:

    • Controls how much information is sent in the Referrer header, helping to protect user privacy.

  7. Permissions-Policy:

    • Restricts the use of certain browser features like geolocation and payment APIs.

Step 2: Run the Application

After making these changes to nuxt.config.js, save the file and start your Nuxt.js application:

npm run dev

Or for production:

npm run build
npm run start

Step 3: Verify the Headers

You can verify that the headers are correctly applied by using your browser’s developer tools. Open the “Network” tab, select a request, and check the “Headers” section to see if the security headers are present.

Summary:

This configuration adds important security headers to your Nuxt.js application, ensuring better protection against common web vulnerabilities like XSS, clickjacking, and content injection. Adjust the CSP and other headers as needed based on your specific security requirements.

2

This is similar to the WordPress Security Headers needed for Payment Gateways post