58 directives of Content-Security-Policy and Permissions-Policy — syntax, source expressions, and security best practices.
base-uribase-uri restricts the base URL a document's <base> element may set. Since <base href> changes how all relative URLs on the page resolve, this prevents an attacker-injected <base> from hijacking resource paths wholesale. This directive does NOT fall back to default-src.block-all-mixed-contentblock-all-mixed-content is a flag-style directive that blocks all mixed content — passive and active alike — loaded over http on an HTTPS page. It takes no value. However, it is deprecated and superseded by modern browsers' default mixed-content policy.child-srcchild-src is an umbrella directive that controls the sources of both nested browsing contexts (iframes) and workers (Web/Shared Workers). Today it mainly serves as a fallback for frame-src (frames) and worker-src (workers). When omitted it inherits from default-src.connect-srcconnect-src controls the endpoints that scripts may open network connections to, covering fetch(), XMLHttpRequest, WebSocket, EventSource (SSE), navigator.sendBeacon, and <a ping>. When omitted it inherits from default-src.default-srcdefault-src defines the fallback policy applied when a more specific fetch directive is not present. Most resource-loading directives — script-src, style-src, img-src, font-src, connect-src and others — inherit this value when omitted. It effectively sets the baseline for the entire policy.fenced-frame-srcfenced-frame-src controls the sources of content that may be embedded via the <fencedframe> element. Fenced Frames are part of the Privacy Sandbox — a new isolated embedding mechanism that strongly blocks communication between embedded content and the parent page.font-srcfont-src controls the origins of web fonts loaded via @font-face and similar. When omitted it inherits from default-src. Fonts are not scripts and carry low execution risk, but restricting their source is a sound hygiene control.form-actionform-action restricts the target URLs a <form> may submit to. By controlling submission destinations (from the action attribute or set via script), it prevents credentials and data from being sent to arbitrary external servers. This directive does NOT fall back to default-src.frame-ancestorsframe-ancestors controls which origins may embed the current page via <iframe>, <frame>, <object>, or <embed>. It is the core clickjacking-defense directive and replaces the legacy X-Frame-Options header. This directive does NOT fall back to default-src.frame-srcframe-src controls the origins of documents you may embed via <iframe>/<frame> — i.e., which sites can be placed inside your page. When omitted it falls back to child-src, and if that is absent, to default-src.img-srcimg-src controls where images and favicon resources may be loaded from, covering <img>, <picture>, CSS background-image, favicons, and SVG <image>. When omitted it inherits from default-src.manifest-srcmanifest-src controls the origins from which a web app manifest (<link rel="manifest" href="...">) may be loaded — the manifest.json that provides PWA install metadata. When omitted it inherits from default-src.media-srcmedia-src controls the origins of audio, video, and caption resources loaded by <audio>, <video>, and <track> elements. When omitted it inherits from default-src.navigate-tonavigate-to was a directive meant to restrict the destination URLs a document may navigate to — covering link clicks, form submissions, window.location, window.open, and all navigation. However, its spec stalled and, amid privacy and implementation concerns, it was effectively abandoned and is unsupported in major browsers.object-srcobject-src controls the sources of plugin content loaded via <object>, <embed> (and legacy <applet>). When omitted it inherits from default-src. On the modern web, setting it to 'none' to fully block plugins is almost always best practice.plugin-typesplugin-types restricted which plugins could be loaded via <object>/<embed> by MIME type (e.g., allowing only application/pdf). But with the end of the plugin era it was deprecated and is removed/unsupported in modern browsers.prefetch-srcprefetch-src controls the origins of resources preloaded via <link rel="prefetch"> and <link rel="prerender">. When omitted it inherits from default-src. However, standardization stalled, browser support is limited, and it is effectively on a deprecation path.report-toreport-to is the modern reporting directive that names a destination (a group name) for CSP violation reports. The actual endpoint URL is mapped to that name via a separate Reporting-Endpoints (or the older Report-To) HTTP header. It is the successor to the deprecated report-uri.report-urireport-uri specifies a URL to which the browser POSTs a JSON violation report when a CSP violation occurs. It collects information about the offending resource and blocked directive so you can tune the policy or monitor attack attempts. This directive is deprecated in favor of report-to.require-trusted-types-forrequire-trusted-types-for forbids assigning raw strings to dangerous DOM sinks (innerHTML, script.src, eval, etc.), requiring Trusted Types objects instead. Specifying 'script' structurally blocks DOM-based XSS (sink injection).sandboxsandbox applies restrictions like an iframe's sandbox attribute to the whole document, isolating and limiting page capabilities. It blocks scripts, form submission, popups, and top-level navigation by default, re-enabling only what you specify via allow-* tokens. This directive does NOT fall back to default-src.script-srcscript-src is the single most important CSP directive for XSS defense, controlling which JavaScript sources a page may execute. It governs external <script src> loading, inline scripts, and eval-family execution. When omitted it inherits from default-src.script-src-attrscript-src-attr is a granular directive that controls only JavaScript execution in inline event-handler attributes (on* attributes like onclick, onload). It does not govern <script> elements. When omitted it falls back through script-src → default-src.script-src-elemscript-src-elem is a granular script directive that applies only to <script> elements (external src loading and inline <script> blocks). It does not govern inline event-handler attributes. When omitted it falls back through script-src → default-src.style-srcstyle-src controls the sources of stylesheets and inline CSS, governing external <link rel=stylesheet>, <style> blocks, inline style= attributes, and CSSOM APIs like insertRule. When omitted it inherits from default-src.style-src-attrstyle-src-attr is a granular directive that controls only the CSS in inline style attributes on elements (e.g., <div style="...">). It does not govern stylesheets or <style> blocks. When omitted it falls back through style-src → default-src.style-src-elemstyle-src-elem is a granular style directive that applies only to stylesheet elements — <link rel=stylesheet> and <style> blocks. It does not govern inline style= attributes. When omitted it falls back through style-src → default-src.trusted-typestrusted-types defines the allowed list of policy names that can be created via the Trusted Types API. Each policy holds rules (sanitization logic) converting strings into safe objects like TrustedHTML, and this directive restricts which policy names may exist.upgrade-insecure-requestsupgrade-insecure-requests is a flag-style directive that instructs the browser to automatically upgrade http:// resource requests on the page to https:// before sending them. It takes no value and acts by mere presence, easing mixed-content problems during migration.worker-srcworker-src controls the sources of scripts loaded by Web Workers, Shared Workers, and Service Workers. When omitted it falls back through child-src → script-src → default-src.accelerometerThe accelerometer directive controls whether a document and its subframes may read three-axis acceleration data through the Generic Sensor API's Accelerometer, LinearAccelerationSensor, and GravitySensor interfaces. Its default allowlist is self, so a same-origin document has access without extra configuration, while cross-origin iframes require explicit delegation.ambient-light-sensorThe ambient-light-sensor directive controls access to ambient light level readings in lux through the AmbientLightSensor interface. Its default allowlist is self, and because the feature is still experimental, browser support is limited.autoplayThe autoplay directive controls whether <video> and <audio> elements may start playing without a user gesture, or whether HTMLMediaElement.play() may succeed automatically. Its default allowlist is self, so a same-origin document may attempt playback within the browser's own autoplay policy.batteryThe battery directive controls availability of the Battery Status API accessed via navigator.getBattery(). That API exposes charging state, battery level, and charging/discharging time estimates, and its default allowlist is self.cameraThe camera directive controls whether a document may acquire a camera video track via navigator.mediaDevices.getUserMedia({ video: true }). Its default allowlist is self, so only a same-origin document has camera access by default, while cross-origin frames need delegation.clipboard-readThe clipboard-read directive controls availability of the async Clipboard API's navigator.clipboard.read() and readText(), which read the system clipboard's contents. Its default allowlist is self, and because clipboard reads are sensitive, they also require additional user permission.clipboard-writeThe clipboard-write directive controls writing data to the system clipboard via navigator.clipboard.write() and writeText(). It is less risky than reading and is usually allowed within a user gesture; its default allowlist is self.cross-origin-isolatedThe cross-origin-isolated directive is a special directive that controls whether a document may enter the cross-origin isolated state. That state is a prerequisite for powerful features such as SharedArrayBuffer, high-resolution performance.now(), and performance.measureUserAgentSpecificMemory().display-captureThe display-capture directive controls availability of the Screen Capture API's navigator.mediaDevices.getDisplayMedia(), which captures a screen, window, or tab. It is the core feature of screen-sharing and recording tools, and its default allowlist is self.encrypted-mediaThe encrypted-media directive controls use of Encrypted Media Extensions (EME) via navigator.requestMediaKeySystemAccess(). EME is the API for accessing the Content Decryption Module (CDM) needed to play DRM-protected streams on services like Netflix and YouTube. Its default allowlist is self.fullscreenThe fullscreen directive controls whether Element.requestFullscreen() may put an element into fullscreen mode. Its default allowlist is self, and a cross-origin iframe needs explicit delegation to enter fullscreen.gamepadThe gamepad directive controls whether the Gamepad API (navigator.getGamepads(), the gamepadconnected event) may read the state of connected gamepads. Like picture-in-picture, its default allowlist is * (all origins), so without configuration it is allowed everywhere.geolocationThe geolocation directive controls whether navigator.geolocation's getCurrentPosition() and watchPosition() may access the user's location. Its default allowlist is self, so only the same origin has access by default and cross-origin frames need delegation.gyroscopeThe gyroscope directive controls whether the Generic Sensor API's Gyroscope interface may read angular velocity (rotation rate). Its default allowlist is self, and it powers device orientation and motion sensing, 3D, and VR interactions.hidThe hid directive controls whether the WebHID API (navigator.hid) may communicate with Human Interface Devices such as gamepads, specialty keyboards, and barcode scanners. Its default allowlist is self, and being low-level device access, it is a very powerful permission.idle-detectionThe idle-detection directive controls the IdleDetector API, which detects whether the user is idle (no input) and whether the screen is locked. Its default allowlist is self, and it is used for away/presence indicators in chat and collaboration apps.local-fontsThe local-fonts directive controls whether the Local Font Access API's window.queryLocalFonts() may enumerate the fonts installed on the user's device. Its default allowlist is self, and it is used by web-based design and document-editing tools.magnetometerThe magnetometer directive controls whether the Generic Sensor API's Magnetometer interface may read the ambient magnetic field in microteslas (µT). Its default allowlist is self, and it powers compass and heading features.microphoneThe microphone directive controls whether a document may acquire a microphone audio track via navigator.mediaDevices.getUserMedia({ audio: true }). Its default allowlist is self, so only a same-origin document has access by default and cross-origin frames need delegation.midiThe midi directive controls whether the Web MIDI API's navigator.requestMIDIAccess() may exchange messages with MIDI instruments and controllers. Its default allowlist is self, and it is used by web-based music tools.paymentThe payment directive controls whether the Payment Request API (new PaymentRequest(...).show()) may present the browser's payment UI. Its default allowlist is self, and delegation matters for commerce sites that embed payment frames.picture-in-pictureThe picture-in-picture directive controls whether HTMLVideoElement.requestPictureInPicture() may detach a video into a small floating window over the screen. Unlike most other directives, its default allowlist is * (all origins), so without configuration it is allowed everywhere.publickey-credentials-getThe publickey-credentials-get directive controls whether Web Authentication (WebAuthn) via navigator.credentials.get({ publicKey }) may authenticate using public-key credentials (passkeys and security keys). Its default allowlist is self, and it matters for authentication inside embedded login frames.screen-wake-lockThe screen-wake-lock directive controls the Screen Wake Lock API's navigator.wakeLock.request('screen'), which keeps the screen from dimming or locking automatically. Its default allowlist is self, and it is used for recipe, navigation, and presentation screens.serialThe serial directive controls whether the Web Serial API (navigator.serial) may communicate at a low level with microcontrollers, industrial equipment, and the like over serial ports. Its default allowlist is self, and it is a very powerful low-level device access permission.usbThe usb directive controls whether the WebUSB API (navigator.usb) may communicate directly with USB devices. Its default allowlist is self, and it is a powerful low-level permission that reaches peripherals beyond standard drivers.web-shareThe web-share directive controls whether the Web Share API's navigator.share() may open the OS native share sheet to share links, text, or files. Its default allowlist is self, and it underpins the share buttons common on mobile.xr-spatial-trackingThe xr-spatial-tracking directive controls use of the WebXR Device API's spatial tracking (position and orientation, 6DoF). It governs starting AR/VR sessions with navigator.xr.requestSession() and tracking the user's and environment's spatial information, and its default allowlist is self.