GoogleChrome/modern-web-guidance

Extension CSP blocks `eval()`, `new Function()`, inline `<script>` in all extension pages.

eval(userCode); // CSP blocks this

window.addEventListener('message', (e) => { eval(e.data.js); /* allowed in sandbox */ });

- [ ] Code execution uses sandbox/blob/srcdoc — no `eval()` in extension pages

curl -H "Origin: https://example.com" -I https://api.openweathermap.org/data/2.5/weather?q=London&appid=KEY`

If the response includes either `*` or `https://example.com` as the value for the `Access-Control-Allow-Origin` header, the API supports CORS.

{   "host_permissions": [     "https://no-cors-api.example.com/*"

"host_permissions": [     "https://no-cors-api.example.com/*"   ]

"https://no-cors-api.example.com/*"

// From popup or service worker const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=KEY');

const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=KEY');

async function callAPI(url) {   try {     const response = await fetch(url);

try {     const response = await fetch(url);     if (!response.ok) {

const response = await fetch(url);

[Credential-related source omitted]

"client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",     "scopes": [       "https://www.googleapis.com/auth/userinfo.profile",

"scopes": [       "https://www.googleapis.com/auth/userinfo.profile",       "https://www.googleapis.com/auth/userinfo.email"

"https://www.googleapis.com/auth/userinfo.profile",

"https://www.googleapis.com/auth/userinfo.email"

async function getUserProfile(token) {   const response = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {

const response = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {

[Credential-related source omitted]

[Credential-related source omitted]

const authUrl = `https://github.com/login/oauth/authorize?client_id=XXX&redirect_uri=${redirectUrl}`;

- `eval()`, `new Function()`, `setTimeout("string")`

approaches. **Extension CSP completely blocks `eval()`, `new Function()`, and inline scripts in

`eval()` and inline scripts, but they cannot access chrome.* APIs.

eval(js);

eval(userCode); // CSP blocks this

for SIZE in 16 48 128; do   cat > "icons/icon-${SIZE}.svg" << EOF <svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">

cat > "icons/icon-${SIZE}.svg" << EOF <svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">   <rect width="${SIZE}" height="${SIZE}" rx="$((SIZE/4))" fill="#4688F1"/>

<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">

try {     const response = await fetch(

const response = await fetch(

`https://en.wikipedia.org/w/api.php?action=opensearch&search=${encodeURIComponent(text)}&limit=5&format=json`

chrome.omnibox.onInputEntered.addListener((text, disposition) => {   const url = text.startsWith('http') ? text     : `https://en.wikipedia.org/wiki/${encodeURIComponent(text)}`;

: `https://en.wikipedia.org/wiki/${encodeURIComponent(text)}`;

{   "host_permissions": ["https://en.wikipedia.org/*"]

"host_permissions": ["https://en.wikipedia.org/*"]

{   "permissions": ["tabs", "scripting", "storage"],   "host_permissions": ["https://api.example.com/*"]

"permissions": ["tabs", "scripting", "storage"],   "host_permissions": ["https://api.example.com/*"] }

"host_permissions": ["https://api.example.com/*"]

// Create const tab = await chrome.tabs.create({ url: 'https://example.com', active: true });

const tab = await chrome.tabs.create({ url: 'https://example.com', active: true });

// Update await chrome.tabs.update(tabId, { url: 'https://new-url.com', pinned: true });

await chrome.tabs.update(tabId, { url: 'https://new-url.com', pinned: true });

// Create a new window with specific tabs const win = await chrome.windows.create({ url: 'https://example.com', focused: true });

const win = await chrome.windows.create({ url: 'https://example.com', focused: true });

"minimum_chrome_version": "120",   "permissions": ["userScripts"],   "host_permissions": ["https://example.com/*"]

"permissions": ["userScripts"],   "host_permissions": ["https://example.com/*"] }

"host_permissions": ["https://example.com/*"]

await chrome.userScripts.register([{   id: 'my-script',   matches: ['https://example.com/*'],

id: 'my-script',   matches: ['https://example.com/*'],   js: [{ code: 'alert(1)', file: 'user-script.js' }] // Error: specify code OR file, not both

matches: ['https://example.com/*'],

await chrome.userScripts.register([{   id: 'my-user-script',   matches: ['https://example.com/*'],

id: 'my-user-script',   matches: ['https://example.com/*'],   js: [{ file: 'user-script.js' }],

matches: ['https://example.com/*'],

await chrome.userScripts.register([{   id: 'my-user-script',   matches: ['https://example.com/*'],

id: 'my-user-script',   matches: ['https://example.com/*'],   js: [{ code: userProvidedCode }]

matches: ['https://example.com/*'],

await chrome.userScripts.register([{     id: 'my-user-script',     matches: ['https://example.com/*'],

id: 'my-user-script',     matches: ['https://example.com/*'],     js: [{ code: userProvidedCode }]

matches: ['https://example.com/*'],

- **Missing data types**: If your extension uses `chrome.storage.sync`, that data goes to   Google's servers — disclose this. If you make any `fetch()` calls, disclose what's sent.

Google's servers — disclose this. If you make any `fetch()` calls, disclose what's sent.

rm -f "$OUTPUT"

[Credential-related source omitted]

[Credential-related source omitted]

**Fix:** - Audit every `fetch()`, `XMLHttpRequest`, and `chrome.storage.sync` call

- Audit every `fetch()`, `XMLHttpRequest`, and `chrome.storage.sync` call

See [MDN aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid) for more details.

<iframe     src="https://cross-origin.example.com/"

src="https://cross-origin.example.com/"

- **Aborting Tasks**: Use `AbortController` to allow users to stop long-running generations. Pass the `signal` to `prompt()` or `promptStreaming()`, not to `LanguageModel.create()`. - **Security**: Use Permission Policies to control access 

- **Design**: Review the [People + AI Guidebook](https://pair.withgoogle.com/guidebook/) to ensure responsible AI implementation.

For the full detailed list of dos and don'ts, see https://developer.chrome.com/docs/ai/built-in-ai-dos-donts.md.txt. Below is the gist:

For the Prompt API, each session [tracks the context of the conversation](https://developer.chrome.com/docs/ai/prompt-api?content_ref=each+session+keeps+track+of+the+context+of+the+conversation+previous+interactions+are+taken+into+account+f

conversation](https://developer.chrome.com/docs/ai/prompt-api?content_ref=each+session+keeps+track+of+the+context+of+the+conversation+previous+interactions+are+taken+into+account+for+future+interactions+until+the+session+s+context+window+is

**Do:** Explicitly call [`destroy()`](https://developer.chrome.com/docs/ai/prompt-api#terminate_a_session) on

output, not just chunks, because malicious code could be split across updates. Before rendering, use the [Sanitizer API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where

Before rendering, use the [Sanitizer API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where supported. To avoid a decrease in performance, use a streaming Markdown parser

API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where

like [streaming-markdown](https://github.com/thetarnav/streaming-markdown).

**Do:** When you need the model to return data in a specific format, use [structured output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+

[structured output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+s+response+by+passing+a+json+schema+to+the+languagemodel+prompt+and+langu

output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+s+response+by+passing+a+json+schema+to+the+languagemodel+prompt+and+languagemodel+pro

*Applies to: Prompt API, as it's the only API that supports [structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api).*

schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api).*

**Don't:** Enforce strict character limits like `maxLength: 125` using [structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api). When a

[structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api). When a

- **Aborting Tasks**: Use `AbortController` to allow users to stop long-running generations. Pass the `signal` to `prompt()` or `promptStreaming()`, not to `LanguageModel.create()`. - **Security**: Use Permission Policies to control access 

- **Design**: Review the [People + AI Guidebook](https://pair.withgoogle.com/guidebook/) to ensure responsible AI implementation.

For the full detailed list of dos and don'ts, see https://developer.chrome.com/docs/ai/built-in-ai-dos-donts.md.txt. Below is the gist:

For the Prompt API, each session [tracks the context of the conversation](https://developer.chrome.com/docs/ai/prompt-api?content_ref=each+session+keeps+track+of+the+context+of+the+conversation+previous+interactions+are+taken+into+account+f

conversation](https://developer.chrome.com/docs/ai/prompt-api?content_ref=each+session+keeps+track+of+the+context+of+the+conversation+previous+interactions+are+taken+into+account+for+future+interactions+until+the+session+s+context+window+is

**Do:** Explicitly call [`destroy()`](https://developer.chrome.com/docs/ai/prompt-api#terminate_a_session) on

output, not just chunks, because malicious code could be split across updates. Before rendering, use the [Sanitizer API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where

Before rendering, use the [Sanitizer API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where supported. To avoid a decrease in performance, use a streaming Markdown parser

API](https://developer.mozilla.org/docs/Web/API/HTML_Sanitizer_API) where

like [streaming-markdown](https://github.com/thetarnav/streaming-markdown).

**Do:** When you need the model to return data in a specific format, use [structured output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+

[structured output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+s+response+by+passing+a+json+schema+to+the+languagemodel+prompt+and+langu

output](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api?content_ref=he+prompt+api+lets+you+specify+a+json+output+format+of+the+model+s+response+by+passing+a+json+schema+to+the+languagemodel+prompt+and+languagemodel+pro

*Applies to: Prompt API, as it's the only API that supports [structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api).*

schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api).*

**Don't:** Enforce strict character limits like `maxLength: 125` using [structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api). When a

[structured output schemas](https://developer.chrome.com/docs/ai/structured-output-for-prompt-api). When a

<iframe src="https://example.com/" allow="summarizer"></iframe>

<iframe src="https://example.com/" allow="translator"></iframe>

{# Testcase: https://codepen.io/leaverou/pen/KwWzpVr #}

<!-- See https://github.com/GoogleChrome/modern-web-guidance-src/pull/960#pullrequestreview-4880620093 -->

e.preventDefault();   const data = new FormData(form);   // fetch('/submit', { method: 'POST', body: data });

const data = new FormData(form);   // fetch('/submit', { method: 'POST', body: data }); });

// fetch('/submit', { method: 'POST', body: data });

- **Include human-readable text first**: Always start the SMS with a clear human-readable sentence containing the code so users typing it manually on another device can read it easily. - **Place `@<domain> #<otp>` on the very last line**: T

- **Place `@<domain> #<otp>` on the very last line**: The `@` character must be the first character of the final line, with no trailing lines or signature text after it. - **Use only the host domain**: Do not include a URL scheme (`https://

- **Use only the host domain**: Do not include a URL scheme (`https://` or `http://`), port (`:8080`), or path (`/verify`) in the `@domain` token.

The WebOTP API (`OTPCredential`) requires a Secure Context (`https://` in production, or `http://localhost` during local development). Instead of pasting a disconnected `DOMContentLoaded` script that queries the DOM and calls `form.submit()

- A new SMS code is requested ("Resend code"), aborting the previous controller before creating a new one.     - The verification component, dialog, or route unmounts. - **Trigger the application's submission handler (`form.requestSubmit()`

- **Trigger the application's submission handler (`form.requestSubmit()`)**: When `navigator.credentials.get()` resolves with `otp`, set `otpInput.value = otp.code` and call `form.requestSubmit()` (or invoke your verification function direc

event.preventDefault();   const formData = new FormData(otpForm);   // await fetch(otpForm.action, { method: 'POST', body: formData });

const formData = new FormData(otpForm);   // await fetch(otpForm.action, { method: 'POST', body: formData }); });

// await fetch(otpForm.action, { method: 'POST', body: formData });

Permissions-Policy: otp-credentials=(self "https://bank.example")

<iframe   src="https://bank.example/verify"

src="https://bank.example/verify"

Inside the `<iframe>` document served by `https://bank.example`, run the same `<form>` markup and `navigator.credentials.get({ otp: { transport: ['sms'] }, signal: ac.signal })` verification lifecycle shown above.

<!-- Quote with attribution using Figure --> <figure>   <blockquote cite="https://html.spec.whatwg.org/">

<figure>   <blockquote cite="https://html.spec.whatwg.org/">     <p>The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the do

<blockquote cite="https://html.spec.whatwg.org/">

if (typeof Temporal === 'undefined') {     // Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');

// Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');     globalThis.Temporal = module.Temporal;

const module = await import('https://esm.sh/temporal-polyfill');

if (typeof Temporal === 'undefined') {     // Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');

// Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');     globalThis.Temporal = module.Temporal;

const module = await import('https://esm.sh/temporal-polyfill');

if (typeof Temporal === 'undefined') {     // Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');

// Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');     globalThis.Temporal = module.Temporal;

const module = await import('https://esm.sh/temporal-polyfill');

if (typeof Temporal === 'undefined') {     // Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');

// Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');     globalThis.Temporal = module.Temporal;

const module = await import('https://esm.sh/temporal-polyfill');

if (typeof Temporal === 'undefined') {     // Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');

// Load the polyfill conditionally     const module = await import('https://esm.sh/temporal-polyfill');     globalThis.Temporal = module.Temporal;

const module = await import('https://esm.sh/temporal-polyfill');

init.headers       ) {         fetch(url, Object.assign({}, init, {keepalive: true}));

) {         fetch(url, Object.assign({}, init, {keepalive: true}));         activated = true;

fetch(url, Object.assign({}, init, {keepalive: true}));

* **DO NOT place sibling static imports in an entry file** (for example, `import './conditionally-load-polyfill.js'; import './app.js';`). Per the ECMAScript module evaluation specification, top-level `await` only suspends the parent module

* **DO NOT import the top-level `await` module from multiple sibling modules simultaneously** (for example, having both `a.js` and `b.js` statically import `./conditionally-load-polyfill.js`). While [Safari 27 fixed WebKit's module loader](

While basic top-level `await` has been supported across major browsers since 2021 (Chrome 89, Edge 89, Firefox 89, and Safari 15), it only reached full spec compliance in [Safari 27](https://webkit.org/blog/18227/fixing-top-level-await-in-s

1. **Identify background requests**: Determine which `fetch()` calls are for non-essential data that doesn't impact the immediate user experience.

2. **Apply fetch priority**: Add the `priority: 'low'` option to the `fetch()` initialization object.

// Use high priority (default) for critical UI updates const criticalData = await fetch('/api/data');

const criticalData = await fetch('/api/data');

// Explicitly deprioritize background analytics fetch('/api/analytics', {

fetch('/api/analytics', {

-->   <script     src="https://cdn.example.com/experiment-sdk.js"

<script     src="https://cdn.example.com/experiment-sdk.js"     async

src="https://cdn.example.com/experiment-sdk.js"

<link     rel="stylesheet"     href="https://cdn.example.com/experiment-variant-b.css"

rel="stylesheet"     href="https://cdn.example.com/experiment-variant-b.css"     blocking="render"

href="https://cdn.example.com/experiment-variant-b.css"

<script type="module" blocking="render">     // Fetch the experiment configuration from your testing platform.     const config = await fetch('/api/experiment?id=homepage-cta')

// Fetch the experiment configuration from your testing platform.     const config = await fetch('/api/experiment?id=homepage-cta')       .then(res => res.json());

const config = await fetch('/api/experiment?id=homepage-cta')

-->   <script     src="https://cdn.example.com/experiment-sdk.js"

<script     src="https://cdn.example.com/experiment-sdk.js"     async

src="https://cdn.example.com/experiment-sdk.js"

The recommended fallback strategy is to use the polyfill below, which internally handles unsupporting browsers using `fetch()` with `keepalive` or `navigator.sendBeacon()`. Your own code MUST call `fetchLater()` directly — never call `fetch

init.headers       ) {         fetch(url, Object.assign({}, init, {keepalive: true}));

) {         fetch(url, Object.assign({}, init, {keepalive: true}));         activated = true;

fetch(url, Object.assign({}, init, {keepalive: true}));

- **`LargestContentfulPaint` (`largest-contentful-paint`)** only measures the initial ("hard") document load and stops emitting entries as soon as the user first interacts with the page. - **`PerformanceEventTiming` and `event` / Interactio

- **`PerformanceEventTiming` and `event` / Interaction to Next Paint (INP)** measures input responsiveness up to the *very next frame* (such as a button active state or loading spinner), but does not track subsequent asynchronous paints—suc

const main = document.querySelector('main'); const response = await fetch('/api/partial-update');

const response = await fetch('/api/partial-update');

<!-- 1. Place third-party scripts near the end of the page with the defer attribute --> <script defer src="http://www.example.com/third-party.js"></script>

<script defer src="http://www.example.com/third-party.js"></script>

<!-- DO: Use native lazy loading for below the fold iframes --> <iframe src="https://example.com/map" width="800" height="600" loading="lazy" title="Example Map"></iframe>

<iframe src="https://example.com/map" width="800" height="600" loading="lazy" title="Example Map"></iframe>

// DO: Conditionally load the polyfill for browsers that need it   const script = document.createElement('script');   script.src = 'https://unpkg.com/scheduler-polyfill';

const script = document.createElement('script');   script.src = 'https://unpkg.com/scheduler-polyfill';   script.onload = () => {

script.src = 'https://unpkg.com/scheduler-polyfill';

<!-- No JS SDK required --> <a href="https://x.com/intent/tweet?text=Check%20this%20out&url=https%3A%2F%2Fexample.com"

<a href="https://x.com/intent/tweet?text=Check%20this%20out&url=https%3A%2F%2Fexample.com"

<div id="video-container" data-video-id="abc123">   <img src="https://img.youtube.com/vi/abc123/maxresdefault.jpg" alt="Play Video" id="play-btn">

<img src="https://img.youtube.com/vi/abc123/maxresdefault.jpg" alt="Play Video" id="play-btn">

const container = document.getElementById('video-container');   const videoId = container.dataset.videoId;   container.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1" allowfullscreen></iframe>`;

const videoId = container.dataset.videoId;   container.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1" allowfullscreen></iframe>`; });

container.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1" allowfullscreen></iframe>`;

identity: {       providers: [{         configURL: "https://idp.example/fedcm.json",

providers: [{         configURL: "https://idp.example/fedcm.json",         clientId: "rp-client-id-123",

configURL: "https://idp.example/fedcm.json",

[Credential-related source omitted]

"migrate_from": [     {       "id": "https://old-app.example.com/"

{       "id": "https://old-app.example.com/"     }

"id": "https://old-app.example.com/"

File location: `https://old-app.example.com/.well-known/web-app-origin-association`

{   "https://new-app.example.com": {

"https://new-app.example.com": {

"migrate_to": [     {       "id": "https://new-app.example.com/",

{       "id": "https://new-app.example.com/",       "install_url": "https://new-app.example.com/demo.html"

"id": "https://new-app.example.com/",

"install_url": "https://new-app.example.com/demo.html"

"migrate_from": [     {       "id": "https://old-app.example.com/",

{       "id": "https://old-app.example.com/",       "behavior": "force"

"id": "https://old-app.example.com/",

Because `localhost` (`127.0.0.1` and `[::1]`) is already in the most private (`loopback`) address space, serving your web app from `http://localhost` during local development will **not** trigger LNA checks by default. To test LNA prompts a

**MANDATORY:** Serve any web application that initiates local or loopback network requests from a **Secure Context (`https://`)**. Local Network Access permissions are denied automatically in insecure (`http://`) top-level contexts.

### 2. Declare `targetAddressSpace` in `fetch()` and `Request`

When an `https://` page requests an `http://` endpoint on the local network or loopback interface, specify `targetAddressSpace: 'local'` or `targetAddressSpace: 'loopback'` in the `fetch()` or `Request` options.

Explicitly setting `targetAddressSpace` does two critical things: 1. **Mixed Content Exemption**: Mixed Content checks run *before* DNS resolution. Declaring `targetAddressSpace: 'local'` (or `'loopback'`) informs the browser ahead of DNS r

1. **Mixed Content Exemption**: Mixed Content checks run *before* DNS resolution. Declaring `targetAddressSpace: 'local'` (or `'loopback'`) informs the browser ahead of DNS resolution that an `http://` URL (including a custom DNS hostname t

* Example endpoint URL is illustrative; replace with your device's address.  */ export async function fetchLocalDeviceStatus(deviceUrl = 'http://192.168.1.100:8080/api/status') {

*/ export async function fetchLocalDeviceStatus(deviceUrl = 'http://192.168.1.100:8080/api/status') {   const request = new Request(deviceUrl, {

export async function fetchLocalDeviceStatus(deviceUrl = 'http://192.168.1.100:8080/api/status') {

const response = await fetch(request);

* Example loopback port is illustrative; replace with your service's port.  */ export async function fetchLoopbackDaemon(daemonUrl = 'http://127.0.0.1:45678/health') {

*/ export async function fetchLoopbackDaemon(daemonUrl = 'http://127.0.0.1:45678/health') {   const request = new Request(daemonUrl, {

export async function fetchLoopbackDaemon(daemonUrl = 'http://127.0.0.1:45678/health') {

const response = await fetch(request);

- **`WebSocket`**: The `WebSocket(url, protocols)` constructor only accepts a subprotocol string or array as its second argument—do **not** pass a `{ targetAddressSpace }` options object, which throws a `SyntaxError`. Instead, the browser i

- **`WebTransport`**: Because `WebTransport` strictly requires `https://` (HTTP/3 over QUIC with TLS or `serverCertificateHashes` for local self-signed certificates), it never triggers Mixed Content blocks and does not accept a `targetAddre

* Opens a WebTransport session to a local network endpoint using a pinned self-signed certificate hash.  */ export async function openLocalWebTransport(wtUrl = 'https://192.168.1.100:4433/wt', certSha256Bytes) {

*/ export async function openLocalWebTransport(wtUrl = 'https://192.168.1.100:4433/wt', certSha256Bytes) {   const transport = new WebTransport(wtUrl, {

export async function openLocalWebTransport(wtUrl = 'https://192.168.1.100:4433/wt', certSha256Bytes) {

<!-- Delegate granular local-network and loopback-network permissions to the embedded iframe --> <iframe   src="https://setup.partner.example.com/device-bridge"

<iframe   src="https://setup.partner.example.com/device-bridge"   allow="local-network; loopback-network"

src="https://setup.partner.example.com/device-bridge"

Permissions-Policy: local-network=(self "https://setup.partner.example.com"), loopback-network=(self "https://setup.partner.example.com")

1. **Permission Query Fallback**: Wrap `navigator.permissions.query({ name: permissionName })` in a `try / catch`. If the browser throws a `TypeError` because `'local-network'` or `'loopback-network'` is an unrecognized `PermissionName`, tr

3. **Graceful Rejection Handling**: Always wrap `fetch()`, `WebSocket` error events, and `transport.ready` in error handlers that catch `TypeError` / connection failures and present clear remediation steps (checking that the local device is

- `NotAllowedError`: The user cancelled or timed out the passkey login prompt.     - `AbortError`: The authentication request was cancelled programmatically. 5.  **Call Signal API**: Wrap server verification `fetch()` call in a try/catch bl

- `AbortError`: The authentication request was cancelled programmatically. 5.  **Call Signal API**: Wrap server verification `fetch()` call in a try/catch block:     - Show an error message for the user to understand what went wrong.

5.  **Call Signal API**: Wrap server verification `fetch()` call in a try/catch block:

[Credential-related source omitted]

https://raw.githubusercontent.com/passkeydeveloper/passkey-authenticator-aaguids/refs/heads/main/combined_aaguid.json

<script type="module">    if (!PublicKeyCredential.parseRequestOptionsFromJSON) {       await import('https://unpkg.com/webauthn-polyfills');

if (!PublicKeyCredential.parseRequestOptionsFromJSON) {       await import('https://unpkg.com/webauthn-polyfills');     }

await import('https://unpkg.com/webauthn-polyfills');

const optionsResponse = await fetch("/api/reauth/options", {

if (credential) {       const encodedCredential = credential.toJSON();       const verifyResponse = await fetch("/api/reauth/verify", {

const encodedCredential = credential.toJSON();       const verifyResponse = await fetch("/api/reauth/verify", {         method: "POST",

const verifyResponse = await fetch("/api/reauth/verify", {

- `SecurityError`: Secure origins (HTTPS) or RP ID mismatch errors (configuration issues). 4.  **Try/Catch Segregation for Signal API**:     - Wrap server verification `fetch()` call in a try/catch block. Call `signalUnknownCredential()` wh

- Wrap server verification `fetch()` call in a try/catch block. Call `signalUnknownCredential()` when the server verification fetch fails (any status `response.ok === false` or network throws).

Passkeys rely on the Web Authentication API (WebAuthn), which imposes strict cross-cutting security constraints that must be satisfied before any implementation attempt: *   **Secure Contexts**: WebAuthn methods (`navigator.credentials.crea

*   **Secure Contexts**: WebAuthn methods (`navigator.credentials.create` and `navigator.credentials.get`) are strictly gated behind Secure Contexts. Applications MUST run on `https://` in production, or `http://localhost` for local develop

[Credential-related source omitted]

async function authenticateWithImmediateUi() {   const optionsResponse = await fetch('/api/login/options', { method: 'POST' });

const optionsResponse = await fetch('/api/login/options', { method: 'POST' });

if (cred.type === 'public-key') {     const encoded = cred.toJSON();     const verifyResponse = await fetch('/api/login/verify', {

const encoded = cred.toJSON();     const verifyResponse = await fetch('/api/login/verify', {       method: 'POST',

const verifyResponse = await fetch('/api/login/verify', {

if (cred.type === 'password') {     const verifyResponse = await fetch('/api/login/password', {

const verifyResponse = await fetch('/api/login/password', {

The `Connection-Allowlist` HTTP response header restricts a document or worker to communicating only with an explicit list of network endpoints. Unlike Content Security Policy (CSP)—which requires maintaining separate per-resource directive

1. **Serialize the allowlist as an RFC 9651 Inner List `(...)`**: Format `Connection-Allowlist` (or `Connection-Allowlist-Report-Only`) as a single parenthesized list of space-separated items. Include the unquoted token `response-origin` to

2. **Scope middleware by `Sec-Fetch-Dest` and cover workers**: Browsers only honor `Connection-Allowlist` on document/navigation responses and worker script responses (`Sec-Fetch-Dest` values `document`, `iframe`, `worker`, `sharedworker`, 

4. **Account for default redirect and WebRTC blocking, and handle client errors**: By default, `Connection-Allowlist` blocks all `3xx` HTTP redirects (`redirects=block`, even when redirecting between allowlisted or same-origin URLs) and all

Vary: Sec-Fetch-Dest Reporting-Endpoints: conn-reports="https://app.example.com/api/security-reports"

Reporting-Endpoints: conn-reports="https://app.example.com/api/security-reports"

Connection-Allowlist: (response-origin "https://api.example.com" "https://realtime.example.com" "https://*.cdn.example.com/*"); report-to=conn-reports

Connection-Allowlist-Report-Only: (response-origin "https://api.example.com/v2/*"); report-to=conn-reports

const {     secFetchDest = 'document',     patterns = ['https://api.example.com', 'https://realtime.example.com', 'https://*.cdn.example.com/*'],

secFetchDest = 'document',     patterns = ['https://api.example.com', 'https://realtime.example.com', 'https://*.cdn.example.com/*'],     reportOnlyPatterns,

patterns = ['https://api.example.com', 'https://realtime.example.com', 'https://*.cdn.example.com/*'],

reportOnlyPatterns,     reportEndpointName = 'conn-reports',     reportEndpointUrl = 'https://app.example.com/api/security-reports',

reportEndpointName = 'conn-reports',     reportEndpointUrl = 'https://app.example.com/api/security-reports',     redirects = 'block',

reportEndpointUrl = 'https://app.example.com/api/security-reports',

export async function fetchWithPolicyHandling(url, { statusElement, ...fetchOptions } = {}) {   try {     const response = await fetch(url, fetchOptions);

try {     const response = await fetch(url, fetchOptions);     if (!response.ok) throw new Error(`HTTP ${response.status}`);

const response = await fetch(url, fetchOptions);

- **DO** format `Connection-Allowlist` as a single RFC 9651 Inner List `(...)` of space-separated items. If a non-empty `Connection-Allowlist` header fails top-level Structured Field parsing (for example, omitting `(...)` or using single qu

- **DO** omit the trailing slash on origin-wide URL patterns (`"https://api.example.com"`) or use an explicit wildcard (`"https://api.example.com/*"`) so subpaths like `/v1/users` are permitted. Strip trailing slashes added by `new URL(orig

- **DO** allowlist `WebSocket` (`ws://` and `wss://`) endpoints using `"http://..."` and `"https://..."` patterns in `Connection-Allowlist`, because the browser normalizes WebSocket schemes to HTTP/HTTPS before matching.

- **Additive defense-in-depth**: Supporting browsers enforce both policies simultaneously—`Connection-Allowlist` blocks non-CSP exfiltration channels (`dns-prefetch`, `preconnect`, WebRTC, and redirects), while CSP restricts `fetch()`, subr

- **Cover `form-action` and `worker-src` explicitly**: In CSP, `default-src` does **not** fall back for `<form action>` submissions; always include `form-action` explicitly. Include `worker-src 'self'` (excluding `blob:`) so restricted page

- **Include `wss://` in CSP `connect-src`**: While `Connection-Allowlist` matches `wss://` connections against `"https://..."` patterns, CSP `connect-src` in cross-browser environments should explicitly list `wss://` origins when WebSockets

Content-Security-Policy: default-src 'self'; connect-src 'self' https://api.example.com https://realtime.example.com wss://realtime.example.com; img-src 'self' https://*.cdn.example.com data: blob:; form-action 'self'; worker-src 'self'; ob

<meta   http-equiv="Content-Security-Policy"   content="default-src 'self'; connect-src 'self' https://api.example.com https://realtime.example.com wss://realtime.example.com; img-src 'self' https://*.cdn.example.com data: blob:; form-actio

http-equiv="Content-Security-Policy"   content="default-src 'self'; connect-src 'self' https://api.example.com https://realtime.example.com wss://realtime.example.com; img-src 'self' https://*.cdn.example.com data: blob:; form-action 'self'

content="default-src 'self'; connect-src 'self' https://api.example.com https://realtime.example.com wss://realtime.example.com; img-src 'self' https://*.cdn.example.com data: blob:; form-action 'self'; worker-src 'self'; object-src 'none';

- **Compute digests at build or release time, never from live untrusted responses**: Generate integrity hashes during your build or release step from known-good local asset bytes (or copy the official digest published by the package author)

- **Use `sha384-` by default**: Format integrity metadata as `<algorithm>-<base64-digest>` using `sha384-` (recommended default), `sha512-`, or `sha256-`. - **Pin external subresources to immutable, versioned URLs**: Always reference third-

- **Pin external subresources to immutable, versioned URLs**: Always reference third-party assets using immutable, version-pinned or content-addressed URLs (such as `https://cdn.example.com/ui@2.4.0/app.min.js`) rather than mutable floating

<link   rel="stylesheet"   href="https://cdn.example.com/ui@2.4.0/styles.css"

rel="stylesheet"   href="https://cdn.example.com/ui@2.4.0/styles.css"   integrity="sha384-bs0EksOYBbU/g0IAHMXbSyH1Mgw83GKn+EZlSI+VE+zVchXmSbLwhVLrPzsOWnc5"

href="https://cdn.example.com/ui@2.4.0/styles.css"

<!-- External script with SRI, anonymous CORS, and no referrer --> <script   src="https://cdn.example.com/ui@2.4.0/bundle.min.js"

<script   src="https://cdn.example.com/ui@2.4.0/bundle.min.js"   integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"

src="https://cdn.example.com/ui@2.4.0/bundle.min.js"

When fetching external subresources programmatically with `fetch()`, pass the matching `integrity`, `mode`, `credentials`, and `referrerPolicy` options (a digest mismatch rejects the promise with `TypeError`):

const response = await fetch('https://cdn.example.com/ui@2.4.0/manifest.json', {

@import url(   "https://cdn.example.com/theme@1.2.0/tokens.css"

"https://cdn.example.com/theme@1.2.0/tokens.css"

font-family: "BrandSans";   src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"     cross-origin(anonymous)

"https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

.verified-graphic {   background-image: url(     "https://cdn.example.com/media@1.0.0/badge.svg"

background-image: url(     "https://cdn.example.com/media@1.0.0/badge.svg"     cross-origin(anonymous)

"https://cdn.example.com/media@1.0.0/badge.svg"

font-family: "BrandSans";   /* 1. Parse-time fallback for browsers without url() modifier support */   src: url("https://cdn.example.com/fonts@1.0.0/brand-sans.woff2") format("woff2");

/* 1. Parse-time fallback for browsers without url() modifier support */   src: url("https://cdn.example.com/fonts@1.0.0/brand-sans.woff2") format("woff2");   /* 2. Parse-time fallback for browsers supporting cross-origin() and referrer-pol

src: url("https://cdn.example.com/fonts@1.0.0/brand-sans.woff2") format("woff2");

/* 2. Parse-time fallback for browsers supporting cross-origin() and referrer-policy() */   src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"     cross-origin(anonymous)

"https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

/* 3. Full protection in browsers supporting cross-origin(), referrer-policy(), and integrity() */   src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

src: url(     "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"     cross-origin(anonymous)

"https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"

.verified-graphic {   background-image: url("https://cdn.example.com/media@1.0.0/badge.svg");

background-image: url("https://cdn.example.com/media@1.0.0/badge.svg");

background-image: url(     "https://cdn.example.com/media@1.0.0/badge.svg"     cross-origin(anonymous)

"https://cdn.example.com/media@1.0.0/badge.svg"

);   background-image: url(     "https://cdn.example.com/media@1.0.0/badge.svg"

background-image: url(     "https://cdn.example.com/media@1.0.0/badge.svg"     cross-origin(anonymous)

"https://cdn.example.com/media@1.0.0/badge.svg"

CSS.supports(       'background-image',       'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer))',

'background-image',       'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer))',     );

'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer))',

CSS.supports(       'background-image',       'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer) integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91"))',

'background-image',       'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer) integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91"))',     );

'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer) integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91"))',

X-Frame-Options: SAMEORIGIN Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com;

Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com;

// Receiver (Safe - traditional string check) window.addEventListener('message', (event) => {   if (event.origin !== 'https://trusted-origin.com') return;

window.addEventListener('message', (event) => {   if (event.origin !== 'https://trusted-origin.com') return;   const data = event.data;

if (event.origin !== 'https://trusted-origin.com') return;

// Sender (Safe) targetWindow.postMessage({ action: 'update' }, 'https://trusted-origin.com');

targetWindow.postMessage({ action: 'update' }, 'https://trusted-origin.com');

Reporting-Endpoints: default="https://reports.example/default", main-endpoint="https://reports.example/main"

Reporting-Endpoints: main-endpoint="https://reports.example/main"

<script nonce="{RANDOM}" src="https://example.com/script.js"></script>

headers.set('Reporting-Endpoints', 'main-endpoint="https://reports.example/main"');

**Avoid**: - Broad scheme or domain allowlists (such as `https:` alone or `script-src https://cdn.example.com` without `'strict-dynamic'`) as the primary `script-src` protection — they are easily bypassed by open redirects, JSONP endpoints,

- Broad scheme or domain allowlists (such as `https:` alone or `script-src https://cdn.example.com` without `'strict-dynamic'`) as the primary `script-src` protection — they are easily bypassed by open redirects, JSONP endpoints, and depend

[Credential-related source omitted]

<iframe src="https://trusted-video.com/player" allow="fullscreen; camera; focus-without-user-activation 'none'"></iframe>

<script src="https://cdn.example.com/lib@1.0.0.js" integrity="sha384-oqVu...Y8wC" crossorigin="anonymous"></script>

Access-Control-Allow-Origin: https://trusted-app.com

- **Script:** `<script>` text content, `eval()`

While comparing `event.origin` against a fixed, port-normalized string literal (such as `event.origin === 'https://app.example.com'`) works for simple allowlists, manual string comparisons and regular expressions break down when validating 

- **Prefix and substring spoofing:** Checking `url.startsWith('https://app.example.com')` is bypassed by `'https://app.example.com.attacker.example'`.

- **Unnormalized URLs:** Full URLs with paths, query strings, or explicit default ports (`'https://app.example.com:443/path'`) do not match `'https://app.example.com'` under string equality without first parsing and normalizing.

- **Use `isSameOrigin()` for strict privilege boundaries:** Require an exact `(scheme, host, port)` match when handling cross-window `postMessage` commands (such as an embedded checkout or auth popup) or deciding whether to attach credentia

- **Use `isSameSite()` for cross-subdomain navigation and link classification:** Allow any subdomain or port sharing the same scheme and registrable domain when validating post-login redirect URLs (`?returnTo=https://billing.example.co.uk/o

- **Both sides must be `Origin` instances:** `isSameOrigin(other)` and `isSameSite(other)` only accept an `Origin` object—passing a raw string throws a `TypeError`. - **Supported `Origin.from()` inputs:**   - Serialized URL strings (for exa

- **Supported `Origin.from()` inputs:**   - Serialized URL strings (for example, `'https://app.example.com:443/path'`). Note that any invalid URL string—for instance `'example'`, or the `'null'` string serialized by `event.origin` for opaqu

- Serialized URL strings (for example, `'https://app.example.com:443/path'`). Note that any invalid URL string—for instance `'example'`, or the `'null'` string serialized by `event.origin` for opaque origins—causes `Origin.from()` to throw 

// Replace with your application's trusted origin(s) const TRUSTED_ORIGIN = Origin.from('https://app.example.com');

const TRUSTED_ORIGIN = Origin.from('https://app.example.com');

When validating redirect targets (such as `?returnTo=` parameters) or internal links across subdomains of the same registrable domain (for example, `https://app.example.co.uk` and `https://billing.example.co.uk:8443`), use `isSameSite()`:

- `isSameSite()` performs a **schemeful same-site** comparison: `https://sub.example.com` and `http://sub.example.com` are **not** same-site because their schemes differ.

- `isSameSite()` uses the browser's built-in **Public Suffix List**, so distinct tenants on shared public suffixes (such as `https://tenant-a.github.io` and `https://tenant-b.github.io`, or `https://a.co.uk` and `https://b.co.uk`) evaluate 

// Replace with your application's primary origin const APP_ORIGIN = Origin.from('https://app.example.co.uk');

const APP_ORIGIN = Origin.from('https://app.example.co.uk');

// true: same scheme (https) and same registrable domain (example.co.uk) isAllowedSameSiteUrl('https://billing.example.co.uk:8443/checkout');

isAllowedSameSiteUrl('https://billing.example.co.uk:8443/checkout');

// false: scheme downgrade (http vs. https) is rejected by schemeful same-site isAllowedSameSiteUrl('http://billing.example.co.uk/checkout');

isAllowedSameSiteUrl('http://billing.example.co.uk/checkout');

- **Same-origin fallback (tuple origins):** Extract the URL string (using `event.origin` for `MessageEvent` objects or `candidate.href` for link elements), parse both the candidate and trusted URLs with `new URL()`, reject `"null"` opaque o

// Replace with your trusted reference URL and known registrable domain const TRUSTED_URL = 'https://app.example.com';

const TRUSTED_URL = 'https://app.example.com';

1. **Provide the Origin Trial token** on the page hosting the form using either the `Origin-Trial` HTTP response header or a `<meta http-equiv="origin-trial">` element.    - **Third-party origin trials:** Embedded identity SDKs can inject a

- **Third-party origin trials:** Embedded identity SDKs can inject a third-party trial token, provided the Origin Trial registrant origin matches the issuer domain (same-site with the issuer, such as `https://issuer.example`).

// Replace with your public relying-party origin const RP_ORIGIN = 'https://rp.example.com';

const RP_ORIGIN = 'https://rp.example.com';

const domain = submittedEmail.split('@')[1]; const txtRecords = (await dns.resolveTxt(`_email-verification.${domain}`)).map((r) => r.join('')); if (!txtRecords.some((txt) => txt.startsWith('iss=') && `https://${txt.slice(4).trim()}` === iss

const txtRecords = (await dns.resolveTxt(`_email-verification.${domain}`)).map((r) => r.join('')); if (!txtRecords.some((txt) => txt.startsWith('iss=') && `https://${txt.slice(4).trim()}` === iss)) {   throw new Error(`Issuer "${iss}" is no

if (!txtRecords.some((txt) => txt.startsWith('iss=') && `https://${txt.slice(4).trim()}` === iss)) {

const discoveryUrl = new URL('/.well-known/email-verification', iss); if (discoveryUrl.protocol !== 'https:') throw new Error('Issuer must use HTTPS.'); const metadata = await (await fetch(discoveryUrl)).json();

if (discoveryUrl.protocol !== 'https:') throw new Error('Issuer must use HTTPS.'); const metadata = await (await fetch(discoveryUrl)).json(); if (metadata.issuer !== iss || !metadata.jwks_uri?.startsWith('https://')) {

const metadata = await (await fetch(discoveryUrl)).json();

If a page renders thousands of icons at once, benchmark the actual page and assets. In a stress test, inline SVG had a small performance advantage at that scale, but results depend on the browser and implementation. [Cloud Four's SVG icon s

--icon-style-size: 1em;   --icon-style-spacing: 0.4em;   --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0

--icon-style-spacing: 0.4em;   --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2

--icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0

--icon-favorite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg

Safari has two rendering bugs affecting icons: WebKit [#301609](https://bugs.webkit.org/show_bug.cgi?id=301609) can prevent them from appearing until user interaction, and [#320220](https://bugs.webkit.org/show_bug.cgi?id=320220) also affec

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

<script type="module">   if (!("anchorName" in document.documentElement.style)) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");

if (!("anchorName" in document.documentElement.style)) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");   }

await import("https://unpkg.com/@oddbird/css-anchor-positioning");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

If the Invoker Commands API is not supported, the `command` event will not fire. For full support across all modern browsers, it is recommended to use the invokers-polyfill from https://github.com/keithamus/invokers-polyfill via `npm instal

(async () => {     try {       await import('https://esm.run/invokers-polyfill');

try {       await import('https://esm.run/invokers-polyfill');     } catch (err) {

await import('https://esm.run/invokers-polyfill');

// Conditionally load the invokers-polyfill from a CDN only in browsers lacking native support.   if (!('commandForElement' in HTMLButtonElement.prototype)) {     import('https://esm.run/invokers-polyfill');

if (!('commandForElement' in HTMLButtonElement.prototype)) {     import('https://esm.run/invokers-polyfill');   }

import('https://esm.run/invokers-polyfill');

If the Invoker Commands API is not supported, the `command` event will not fire. For full support across all modern browsers, it is recommended to use the invokers-polyfill from https://github.com/keithamus/invokers-polyfill via `npm instal

(async () => {     try {       await import('https://esm.run/invokers-polyfill');

try {       await import('https://esm.run/invokers-polyfill');     } catch (err) {

await import('https://esm.run/invokers-polyfill');

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {     // CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");

// CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");   }

await import("https://unpkg.com/interestfor@latest");

if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {     // CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");

// CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");   }

await import("https://unpkg.com/interestfor@latest");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

<script type="module">   if (!("anchorName" in document.documentElement.style)) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");

if (!("anchorName" in document.documentElement.style)) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");   }

await import("https://unpkg.com/@oddbird/css-anchor-positioning");

This should only be initialized if native CSS support is missing.   */   import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {

*/   import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {     animate(".element", { transform: "scale(1.2)" }, {

import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {

is baked into the SVG so it contrasts with the red spacer background;      adjust if your background color is light. */   --action-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><

--action-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9zm0 5h2v9H9V8zm4 0h2v9h-2V8z'/></svg>");

/* Reusable SVG assets */ :root {   --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polylin

:root {   --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'>

--icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline

--icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line><

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {     // CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");

// CDN link only used for example, prefer bundling.     await import("https://unpkg.com/interestfor@latest");   }

await import("https://unpkg.com/interestfor@latest");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

<script type="module">   if (!CSS.supports('anchor-name: --foo')) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");

if (!CSS.supports('anchor-name: --foo')) {     await import("https://unpkg.com/@oddbird/css-anchor-positioning");   }

await import("https://unpkg.com/@oddbird/css-anchor-positioning");

**Polyfill:** To support the `popover` attribute in older browsers, conditionally load [`@oddbird/popover-polyfill`](https://github.com/oddbird/popover-polyfill). **MANDATORY:** Feature detect by checking for the `popover` property on `HTML

<script type="module">   if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

if (!("popover" in HTMLElement.prototype)) {     import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");   }

import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");

* **Guidance:** Use the [CSS Anchor Positioning Polyfill](https://github.com/oddbird/css-anchor-positioning). For a non-polyfill fallback, default the tooltip to a fixed position at the bottom of the viewport using `@supports not (anchor-na

- Do NOT animate or transition `scrollbar-color`. A [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=311752) causes the scrollbar to flicker every time `scrollbar-color` changes.

# Embed <script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

<script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

1. Load this SVG filter definition. It must be added directly to the HTML document if you need to support Safari versions affected by [this WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=320118), which prevents external and data url re

<!-- Technique from https://miunau.com/posts/dynamic-text-contrast-in-css/ -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0" style="display: none;">

- Do NOT animate or transition `scrollbar-color`. A [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=311752) causes the scrollbar to flicker every time `scrollbar-color` changes.

# Embed <script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

<script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

# Embed <script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

<script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>

}, {   signal: controller.signal,   exposedTo: ["https://checkout.example.com"],

signal: controller.signal,   exposedTo: ["https://checkout.example.com"], });

exposedTo: ["https://checkout.example.com"],

async execute(input, { signal }) {   const response = await fetch(`/api/data/${input.id}`, { signal });

const response = await fetch(`/api/data/${input.id}`, { signal });

* **APIs that accept a signal** (`fetch()`, `addEventListener()`, `ReadableStream` readers): pass `signal` straight through.

try {       // Passing `signal` aborts the network request the moment execution is cancelled.       const response = await fetch(url, { priority, signal });

// Passing `signal` aborts the network request the moment execution is cancelled.       const response = await fetch(url, { priority, signal });       if (!response.ok) {

const response = await fetch(url, { priority, signal });

// Query tools registered in the embedded cart frame that exposed them to this checkout origin: const cartTools = await document.modelContext.getTools({   fromOrigins: ["https://cart.example.com"],

const cartTools = await document.modelContext.getTools({   fromOrigins: ["https://cart.example.com"], });

fromOrigins: ["https://cart.example.com"],

* **Required Version**: Chromium `146.0.7672.0` or higher. * **Activation**: Requires enabling the flag `chrome://flags/#enable-webmcp-testing` or `edge://flags/#enable-webmcp-testing`. * **Specification**: Evolving [Draft Community Group s

* **Specification**: Evolving [Draft Community Group specification](https://webmachinelearning.github.io/webmcp/); not yet a standards-track recommendation.