Skip to content

Commit

Permalink
fix: typos in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
fahdarafat committed Jan 13, 2025
1 parent 9f17263 commit cbfb905
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 58 deletions.
104 changes: 48 additions & 56 deletions docs/content/1.getting-started/3.usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@ title: Usage
description: Learn how to use headers and middleware both globally and per route.
---



Nuxt Security by default registers a set of **global** Nuxt `routeRules` that will make your application more secure by default. Both headers and middleware can be easily configured and even disabled when needed.

::callout{icon="i-heroicons-light-bulb"}
Read more about security headers [here](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers).
Read more about security headers [here](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers).
::

## Global configuration
Expand Down Expand Up @@ -73,7 +71,6 @@ If your application defines conflicting headers at both levels, the `security` p

For more information on `routeRules` please see the [Nuxt documentation](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering)


## Runtime hooks

If you need to change the configuration at runtime, it is possible to do it through the `nuxt-security:routeRules` hook.
Expand All @@ -88,7 +85,7 @@ export default defineNitroPlugin((nitroApp) => {
// You can fetch configuration data asynchronously from an external source
const validDomain = await $fetch('https://some-site.com/rules')
// You can then override the security options of any route
routeRules['/some/route'] = {
routeRules['/some/route'] = {
headers: {
contentSecurityPolicy: {
"connect-src": ["'self'", validDomain]
Expand All @@ -111,58 +108,54 @@ Headers delivered on other resources (e.g. images, js and css files, api routes

Nuxt-Security applies your rules in the following prority order:


1. Default rules

Nuxt-Security default values.
See [here](/getting-started/configuration#default)

Nuxt-Security default values.
See [here](/getting-started/configuration#default)

2. Inline module options

```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
modules: [
['nuxt-security', { /* Inline Options */ }]
]
})
```

```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
modules: [
['nuxt-security', { /* Inline Options */ }]
]
})
```

3. Global module options

```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
security: {
// Global Options
}
})
```
```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
security: {
// Global Options
}
})
```

4. Per-route options

```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
routeRules: {
'/some-route': {
security: {
// Per-route Options
}
```ts{}[nuxt.config.ts]
export default defineNuxtConfig({
routeRules: {
'/some-route': {
security: {
// Per-route Options
}
}
})
```
}
})
```

5. Runtime-hook options

```ts{}[server/plugins/filename.ts]
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('nuxt-security:routeRules', routeRules => {
// Runtime Options
})
```ts{}[server/plugins/filename.ts]
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('nuxt-security:routeRules', routeRules => {
// Runtime Options
})
```

})
```

## Route merging strategy (nested router)

Expand Down Expand Up @@ -196,10 +189,9 @@ export default defineNuxtConfig({
})
```


## Inline route configuration

You can also use route roules in pages like following:
You can also use route rules in pages like following:

```vue
<template>
Expand All @@ -214,8 +206,8 @@ defineRouteRules({
},
rateLimiter: {
tokensPerInterval: 3,
interval: 60000,
},
interval: 60000
}
}
})
</script>
Expand Down Expand Up @@ -260,7 +252,6 @@ export default defineNuxtConfig({
})
```


## Modifying security options

Within your runtime hooks, you can either modify or overwrite the existing values for any security option.
Expand All @@ -275,7 +266,7 @@ One of the easiest way to merge existing rules with your own is to use `defuRepl
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('nuxt-security:routeRules', async(routeRules) => {
routeRules['/some/route'] = defuReplaceArray(
{
{
headers: {
contentSecurityPolicy: {
"script-src": ["'self'", "..."]
Expand All @@ -289,8 +280,9 @@ export default defineNitroPlugin((nitroApp) => {
})
```

In the example above,
- All existing security options for `/some/route` will be maintained, and only the `script-src` CSP directive will be modified.
In the example above,

- All existing security options for `/some/route` will be maintained, and only the `script-src` CSP directive will be modified.
- The existing content of the `script-src` directive will be erased and replaced by your values

Read more about [`defuReplaceArray`](/advanced/auto-imports/#defuReplaceArray)
Expand All @@ -309,7 +301,7 @@ import { defu } from 'defu'
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('nuxt-security:routeRules', async(routeRules) => {
routeRules['/some/route'] = defu(
{
{
headers: {
contentSecurityPolicy: {
"script-src": ["'self'", "..."]
Expand All @@ -323,21 +315,21 @@ export default defineNitroPlugin((nitroApp) => {
})
```

In the example above,
- All existing security options for `/some/route` will be maintained, and only the `script-src` CSP directive will be modified.
In the example above,

- All existing security options for `/some/route` will be maintained, and only the `script-src` CSP directive will be modified.
- The existing content of the `script-src` directive will be preserved, and your values will be added to the existing values.

Read more about [`defu`](https://github.com/unjs/defu)


### Overwriting rules

If you want to erase the existing settings, don't use defu and overwrite the values:

```ts{}[server/plugins/filename.ts]
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('nuxt-security:routeRules', async(routeRules) => {
routeRules['/some/route'] = {
routeRules['/some/route'] = {
headers: {
contentSecurityPolicy: {
"script-src": ["'self'", "..."]
Expand All @@ -349,7 +341,7 @@ export default defineNitroPlugin((nitroApp) => {
})
```

In the example above,
- All existing security options for `/some/route` will be erased.
- The `script-src` directive will contain your values.
In the example above,

- All existing security options for `/some/route` will be erased.
- The `script-src` directive will contain your values.
4 changes: 2 additions & 2 deletions docs/content/3.middleware/4.cors-handler.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: CORS Handler
description: Set roules for Cross Origin Resource Sharing.
description: Set rules for Cross Origin Resource Sharing.
links:
- label: Enabled
icon: i-heroicons-check-badge
Expand All @@ -11,7 +11,7 @@ links:
This middleware will help you set your CORS options and it is based on built in [H3 CORS](https://github.com/unjs/h3) functionality

::callout{icon="i-heroicons-light-bulb"}
Read more about Cross Origin Resource Sharing [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
Read more about Cross Origin Resource Sharing [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
::

Testing CORS configuration can be done by running one application with NuxtSecurity enabled and creating a second application (that is running on a different port) that will send a request to the first app. Then, a CORS error could be easily observed that proves that CORS is working as expected.
Expand Down

0 comments on commit cbfb905

Please # to comment.