How to Inspect and Debug Permissions Policy Headers in Google Chrome DevTools

Modern web browsers provide web applications with access to powerful hardware capabilities and sensitive browser APIs—including user geolocation, media streams (camera and microphone), payment processing, screen wake locks, and hardware sensors. While these capabilities enable rich web applications, they introduce substantial security and privacy risks if third-party embedded scripts or nested <iframe> widgets access them without authorization.

To establish explicit security boundaries, the W3C defined the Permissions-Policy standard (originally known as Feature Policy). The Permissions-Policy HTTP response header allows website administrators to selectively enable, restrict, or completely block specific browser APIs across the top-level origin and embedded frames. Google Chrome provides dedicated debugging and auditing tools within DevTools that allow engineers to inspect active policy rules, evaluate iframe attribute inheritance, and diagnose feature rejection errors in real time.

Understanding Permissions-Policy Header Syntax

The Permissions-Policy HTTP header uses structured field values consisting of feature directives followed by an allowlist:

Permissions-Policy: camera=(), microphone=(), geolocation=(self "https://trusted-partner.com")

Allowlist Tokens

• () (Empty list): The feature is completely disabled for the entire document, including all child frames.
• * (Wildcard): The feature is allowed for all origins, including third-party iframes.
• self: The feature is permitted only on the same origin (protocol, domain, and port) as the document.
• "https://example.com": Grants permission explicitly to the designated external origin.

In addition to HTTP headers, parent documents can delegate or withhold features on specific embedded frames using the HTML allow attribute on the <iframe> tag:

<iframe src="https://embed.example.com" allow="camera; microphone"></iframe>

Inspecting Active Permissions-Policy in Chrome DevTools

To inspect the active policies enforced on any webpage in Google Chrome:

1. Navigate to the target website in Chrome.
2. Press F12 or Ctrl + Shift + I (Windows) / Cmd + Option + I (macOS) to launch DevTools.
3. Select the Application panel from the top toolbar.
4. In the left-hand navigation sidebar, scroll down to the Frames section.
5. Click on the top-level frame (usually the name of the website domain).
6. In the right-hand inspection pane, locate the section labelled Permissions Policy.

DevTools lists every controllable browser feature (such as accelerometer, camera, display-capture, geolocation, payment, usb, and screen-wake-lock) alongside its effective status (Allowed or Disabled) and the originating source (HTTP Header or Document Policy).

Auditing Iframe Policy Delegation and Inheritance

When an embedded third-party widget (such as a payment processor or video conference embed) fails to access a required device, policy inheritance between the parent and child frame is typically the root cause:

1. In the Application > Frames sidebar, expand the top-level frame tree to locate the embedded child <iframe>.
2. Click the child frame node.
3. Inspect its Permissions Policy ledger.

For an iframe to successfully access a feature (e.g., camera):

• The parent document’s HTTP Permissions-Policy header must not disable the feature globally (e.g., camera=()).
• The parent document must explicitly delegate the feature to the iframe via the allow="camera" attribute if the iframe is on a different origin.
• The child iframe’s own HTTP response must not contain a header that disables the feature on itself.

Diagnosing Violations in the DevTools Console

When client-side JavaScript attempts to invoke a browser API that has been restricted by Permissions Policy, the browser immediately rejects the promise with a NotAllowedError or security exception.

For example, if an unpermitted script calls navigator.geolocation.getCurrentPosition(), Chrome outputs an explicit violation warning in the Console panel:

[Violation] Permissions policy violation: Geolocation access has been blocked because of a permissions policy applied to the current document by the Permissions-Policy HTTP header.

Clicking the source location link adjacent to the warning highlights the exact JavaScript function call that triggered the violation.

Testing Policy Changes Using Header Overrides

To test how your web application behaves with strict Permissions-Policy rules before deploying changes to production web servers, use Chrome DevTools Local Overrides:

1. Open the Network tool in DevTools.
2. Reload the webpage and select the primary document request (first row).
3. Select the Headers tab in the inspection pane.
4. Hover over Response Headers and click Add header. (Ensure Local Overrides are enabled when prompted).
5. Add the header name:

   Permissions-Policy

6. Add your desired security policy value:

   camera=(), microphone=(), geolocation=(self)

7. Reload the page to test feature restrictions and verify that sensitive APIs are blocked as expected.

Using Google Chrome DevTools to audit Permissions-Policy headers ensures sensitive browser features remain protected against unauthorized third-party access.