diff --git a/docs/content/1.documentation/5.advanced/2.faq.md b/docs/content/1.documentation/5.advanced/2.faq.md index de85e758..5fe86ef8 100644 --- a/docs/content/1.documentation/5.advanced/2.faq.md +++ b/docs/content/1.documentation/5.advanced/2.faq.md @@ -145,3 +145,72 @@ security:{ ::alert{type="info"} ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/228). :: + +## Updating Headers on an especific 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`: + +```ts + routeRules: { + // The default headers for all routes + '/**': { + headers: { + 'Cross-Origin-Embedder-Policy': 'require-corp' + } + }, + // The headers for the route you want to override + '/example': { + headers: { + 'Cross-Origin-Embedder-Policy': 'unsafe-none' + } + }, + }, +``` + +### Using a Middleware + +You can create a middleware to handle external navigation as follows: + +```ts +// middleware/external-navigation.ts + +export default defineNuxtRouteMiddleware((to) => { + const routesForExternalLinks = ['/example'] + // Add any other routes you want to act as external links + + if ( + process.client && + !useNuxtApp().isHydrating && + to.path && + routesForExternalLinks.includes(to.path) + ) { + window.location.href = to.fullPath + } +}) + +``` + +To use this middleware, include it in your script: + +```ts +// example.vue + + +``` +### Using NuxtLink + +Alternatively, you can use the `external` attribute on `NuxtLink` to set the navigation to external: + +```html + + Example + +``` + +::alert{type="info"} +ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/228). +::