--- schema_version: "1" id: 73d2545dd9cb44a520a5e6b89ce1b81f0a2fd2e93b1d672f4691b6b33fdcf84a title: "@lwrjs/security" collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-security.md canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-security.html source_site: developer.salesforce.com content_type: documentation content_hash: 5b176daf50e50dbabb07f242dc9d5824e8b77559c99136c0c739c22a47f556ee products: - Lightning Web Runtime --- # @lwrjs/security [HTTP security headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#security) guard your site against malicious code injections and cross-site scripting (XSS) attacks. You can implement security headers for your LWR site on a route-by-route basis using the `@lwrjs/security` package. `@lwrjs/security` exposes a [default route handler](#default-route-handler) and a [security wrapper](#security-wrappers), both of which apply a set of default security headers. To customize these headers, modify the corresponding header configuration objects. ## Usage To add this package to your project, run `npm install @lwrjs/security` on the command line. Implement this package for a route via the default handler or a security wrapper. ## Default Route Handler The `@lwrjs/security` route handler matches the [RouteHandlerFunction](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-routing-server.md#route-handler-functions) interface. ``` type RouteHandler = (ViewRequest, HandlerContext) => Promise; ``` It's exposed as the default export. ``` export { default } from '@lwrjs/security'; ``` To use the default handler for a route, set `@lwrjs/security` as the route handler in `lwr.config.json`. ``` { "routes": [ { "id": "home", "path": "/", "rootComponent": "examples/example", "routeHandler": "@lwrjs/security", }, ] } ``` To modify a security header in the default route handler, set the corresponding header configuration object in the `routeHandler` section. You can disable a header by setting its configuration object to `false`. For more information about default headers and header configuration, skip ahead to [Headers](#headers). ``` "routeHandler": ["@lwrjs/security", { "contentSecurityPolicy": "default-src 'self';base-uri 'self'; script-src 'self'", "referrerPolicy": false, "xXSSProtection": false }] ``` ## Security Wrappers The `@lwrjs/security` route handler wrapper `secure()` applies security headers to an existing route handler. The wrapper is exposed as a named export. It takes a route handler as an argument and returns a promise. ``` type RouteHandlerWrapper = (RouteHandlerFunction) => Promise; ``` `RouteHandlerReturnType` can be a `ViewResponse` or `ViewDefinitionResponse`. Each type of promise applies headers as follows: - **ViewDefinitionResponse** - applies the default security headers with inline resource hashing. - **ViewResponse** (HTML content) - applies the default security headers without resource hashing. - **ViewResponse** (non-HTML content) - doesn't apply headers. For example, this `routeHandler.ts` file passes the `routeHandler` into `secure()`. Since the `headers` section is empty, only the default headers are used. ``` import type { ViewDefinitionResponse } from '@lwrjs/types'; import { secure } from '@lwrjs/security'; function routeHandler(): ViewDefinitionResponse { return { // programmatically define the view configuration view: { rootComponent: 'example/home' }, // set response headers headers: {}, }; } export default secure(routeHandler); ``` To modify a header for the default handler, configure the corresponding header configuration object in the route handler file. You can disable a header by setting its configuration object to `false`. ``` headers: { "contentSecurityPolicy": "default-src 'self';base-uri 'self'; script-src 'self'", "referrerPolicy": false, "xXSSProtection": false }, ``` ## Headers The default route handler and security wrapper automatically enable the following security headers. ### Content-Security-Policy The `Content-Security-Policy` header directs your site to load content from only approved sources. For a list of acceptable formats for source values, see [CSP Source Values](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources). These are the default directives for the `Content-Security-Policy` header. | Directive | Description | Default Source Value | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | | `default-src` | Set the default source value for all directives that don't have a value. | `'self'` | | `base-uri` | Set approved sources that load content in the page's `` element. | `'self'` | | `font-src` | Set approved sources that provide fonts. | `'self' https: data:;` | | `form-action` | Set approved sources that a form can send information to. | `'self'` | | `frame-ancestors` | Set approved sources that can embed your page (the current frame) into a container like `` on their site. | `'self'` | | `img-src` | Set approved sources of images and icons. | `'self' data:;` | | `object-src` | Set approved sources of `