diff --git a/docs/middleware/builtin/secure-headers.md b/docs/middleware/builtin/secure-headers.md index 71eeac6a..35dd31a9 100644 --- a/docs/middleware/builtin/secure-headers.md +++ b/docs/middleware/builtin/secure-headers.md @@ -68,6 +68,7 @@ Each option corresponds to the following Header Key-Value pairs. | xFrameOptions | [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) | SAMEORIGIN | True | | xPermittedCrossDomainPolicies | [X-Permitted-Cross-Domain-Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Permitted-Cross-Domain-Policies) | none | True | | xXssProtection | [X-XSS-Protection](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection) | 0 | True | +| permissionPolicy | [Permissions-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy) | Usage: [Setting Permission-Policy](#setting-permission-policy) | No Setting | ## Middleware Conflict @@ -211,3 +212,32 @@ app.get('/', (c) => { ) }) ``` + +## Setting Permission-Policy + +The Permission-Policy header allows you to control which features and APIs can be used in the browser. Here's an example of how to set it: + +```ts +const app = new Hono() +app.use( + '*', + secureHeaders({ + permissionsPolicy: { + fullscreen: ['self'], // fullscreen=(self) + bluetooth: ['none'], // bluetooth=(none) + payment: ['self', 'https://example.com'], // payment=(self "https://example.com") + syncXhr: [], // sync-xhr=() + camera: false, // camera=none + microphone: true, // microphone=* + geolocation: ['*'], // geolocation=* + usb: ['self', 'https://a.example.com', 'https://b.example.com'], // usb=(self "https://a.example.com" "https://b.example.com") + accelerometer: ['https://*.example.com'], // accelerometer=("https://*.example.com") + gyroscope: ['src'], // gyroscope=(src) + magnetometer: [ + 'https://a.example.com', + 'https://b.example.com', + ], // magnetometer=("https://a.example.com" "https://b.example.com") + }, + }) +) +```