Frequently Asked Questions

Find answers for difficult questions.

Quick Reference

Check out how to use NuxtSecurity with popular third party services.

Cloudflare

1- Make sure you disable the Post-Build Optimizations:

Follow instructions here

2- Disable Javascript Detection and load it instead via useHead:

Follow instructions for Javascript Detection

useHead({
  script: [
    { src: "/cdn-cgi/challenge-platform/scripts/jsd/main.js", crossorigin: true, referrerpolicy: "origin" }
  ]
}, { mode: 'client' })

3- Use the following configuration in nuxt.config.ts:

defineNuxtConfig({
  security: {
    headers: {
      crossOriginEmbedderPolicy: 'unsafe-none',
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:'],
        'script-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          "'strict-dynamic'",
          "'nonce-{{nonce}}'",
          "'unsafe-eval'"
        ]
      },
    },
  }
})
ℹ Read more about it here.

Firebase

When working with Firebase Auth, and more specifically the signInWithPopup method, you would need to disabled the following headers that are set by Nuxt Security automatically:

// nuxt.config.ts

security:{
  headers: {
    crossOriginOpenerPolicy: false,
    crossOriginEmbedderPolicy: false,
  }
}
ℹ Read more about it here.

PayPal

To add Paypal Checkout Button in a Nuxt Project you would need to add below security configuration:

// nuxt.config.ts

routeRules: {
  '/payment': {
    security: {
      headers: {
        crossOriginEmbedderPolicy: 'unsafe-none',
        crossOriginResourcePolicy: 'cross-origin',
      },
    }
  },
},
security: {
  headers: {
    contentSecurityPolicy: {
      'img-src': [
        "'self'",
        'data:',
        'https://paypal.com',
        'https://www.paypalobjects.com',
      ],
    },
    strictTransportSecurity: {
      magAge: 0
    },
  },
},

And then, you can load the PayPal script with useHead composable:

useHead({
  // Paypal SDK to show Paypal button on Payment Page
  script: [
    {
      src: `https://www.paypal.com/sdk/js?client-id=YOURCLIENTID&components=buttons,marks&currency=USD&disable-funding=card`,
      crossorigin: 'anonymous',
    },
  ],
  noscript: [{ children: 'JavaScript is required' }],
});
ℹ Read more about it here.

Prismic

For Prismic users, we recommend the following configuration:

defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        "script-src": [
          "'self'",
          "'unsafe-inline'",
          "https://static.cdn.prismic.io",
          "https://<YOUR-DOMAIN>.prismic.io",
          "'nonce-{{nonce}}'",
          "'strict-dynamic'"
        ],
        "script-src-attr": [
          "'unsafe-hashes'",
          "'sha256-jp2rwKRAEWWbK5cz0grQYZbTZyihHbt00dy2fY8AuWY='",
        ],
        "frame-src": ["'self'", "https://<YOUR-DOMAIN>.prismic.io"],
        "upgrade-insecure-requests": true,
      },
      crossOriginOpenerPolicy: false,
      crossOriginEmbedderPolicy: false,
      xXSSProtection: "1; mode=block",
    },
  },
})
ℹ Read more about it here.

Google Auth

When working with Google Auth, and more specifically the Sign In modal method, you would need to disabled the following headers that are set by Nuxt Security automatically:

// nuxt.config.ts

security:{
  headers: {
    crossOriginOpenerPolicy: 'same-origin-allow-popups'
  }
}
ℹ Read more about it here.

Testing CORS configuration

In the default configuration for CORS in Nuxt Security module, only the request that is coming from your origin (the same host by default) will be accepted and others will be rejected.

To test it, run your application and then in another test application running on a different port, send a request to the first app. You will get the CORS error there.

ℹ Read more about it here.

Set Content-Security-Policy-Report-Only

The HTTP Content-Security-Policy-Report-Only response header allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI.

You can add it to your project like this:

// nuxt.config.ts

routeRules: {
  '/**': {
    headers: {
      'Content-Security-Policy-Report-Only': '<YOUR_DESIRED_VALUE>'
    },
  },
},
ℹ Read more about it here.

Allowing images and scripts from external domains

In several situations you will need to allow fetching images from external domains. Here is how you can do that:

// nuxt.config.ts

security: {
  headers: {
    contentSecurityPolicy: {
      'img-src': ['https://upload.wikimedia.org'], // <--- add the domain you want to fetch the image from here
    }
  }
}

Next, you need to configure your img tag to include the crossorigin attribute:

<img
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/272px-Cat_August_2010-4.jpg"
  alt="Cat Image Here"
  crossorigin
/>
ℹ Read more about it here.

Using nonce with CSP for Nuxt Image

Having securely configured images is crucial for modern web applications. Check out how to do it below:

// nuxt.config.ts

security: {
  nonce: true,
  headers: {
    contentSecurityPolicy: {
      'img-src': ["'self'", 'data:', 'https:'],
      'script-src': [
        "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
        "'nonce-{{nonce}}'",
        "'strict-dynamic'"
      ],
      'script-src-attr': ["'self'"]
    }
  }
}

And then configure NuxtImg like following:

<template>
  <NuxtImg src="https://localhost:8000/api/image/xyz" :nonce="nonce" />
</template>

<script lang="ts" setup>
const nonce = useNonce()
</script>
ℹ Read more about it here.

Issue on Firefox when using IFrame

When working with IFrames in Firefox you may encounter an issue NS_ERROR_FAILURE and to solve it, you would need to disable the following header that are set by Nuxt Security automatically:

// nuxt.config.ts

security:{
  headers: {
    crossOriginOpenerPolicy: false,
  }
}
ℹ Read more about it here.

Updating Headers on a specific route

Sometimes you may want to override the default headers on an especific route to allow a certain script to be loaded. You can do that by using the routeRules option and loading the headers again by setting the navigation to that route to act as external:

  routeRules: {
    // The default headers for all routes
    '/**': {
      security: {
        headers: {
          crossOriginEmbedderPolicy: 'require-corp'
        }
      }
     },
    // The headers for the route you want to override
    '/example': {
      security: {
        headers: {
          crossOriginEmbedderPolicy: 'unsafe-none'
        }
      }
    },
  },

Using a Middleware

You can create a middleware to handle external navigation as follows:

// middleware/external-navigation.ts

export default defineNuxtRouteMiddleware((to) => {
  const routesForExternalLinks = ['/example']
  // Add any other routes you want to act as external links

  if (
    import.meta.client &&
    !useNuxtApp().isHydrating &&
    to.path &&
    routesForExternalLinks.includes(to.path)
  ) {
    window.location.href = to.fullPath
  }
})

To use this middleware, include it in your script:

// example.vue

<script lang="ts" setup>
 definePageMeta({
  middleware: ['external-navigation']
})
</script>

Alternatively, you can use the external attribute on NuxtLink to set the navigation to external:

<NuxtLink :to="{name : 'example'}" :external="true">
  Example
</NuxtLink>
ℹ Read more about it here.

Running app with --host flag

If you want to expose your app in local network to test it by using other devices you can do so by adding the following configuration:

security: {
    headers: {
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp', //https://github.com/Baroshem/nuxt-security/issues/101
      contentSecurityPolicy: {
        "upgrade-insecure-requests": process.env.NODE_ENV === 'development' ? false : true // USE ONLY IN DEV MODE
      }
    },
    corsHandler: {
      origin:'*'
    }
  }
ℹ Read more about it here.
Edit this page on GitHub
Table of Contents