CINXE.COM
Permissions Policy Kitchen Sink
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Permissions Policy Kitchen Sink</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans"> <link rel="stylesheet" href="/styles/main.css"> <link rel="stylesheet" href="/styles/header.css"> <base target="content-view"> <!-- magic that makes link clicks navigate the iframe --> <link rel="modulepreload" href="/lit-html/lit-html.js"> <link rel="modulepreload" href="/lit-html/directives/repeat.js"> <link rel="modulepreload" href="/js/shared.js"> <style> .notsupported { background: var(--md-red-500); padding: var(--default-padding); color: white; text-align: center; margin-top: var(--default-padding-2x); display: none; } .notsupported.show { display: block; } </style> </head> <body> <div class="drawer-list layout vertical"> <header> <div> <img src="/img/sink.svg" title="It's a kitchen sink!" alt="It's a kitchen sink!"> </div> <a href="/" target="_self"> <h2 class="drawer-title">Permissions/<br>Document Policy</h2> <h3 class="drawer-subtitle">Demos</h3> </a> </header> <nav id="policy-list"> <!-- filled dynamically --> </nav> <div id="all-policy-list"> <!-- filled dynamically --> </div> </div> <main class="main-view"> <div class="details"> <!-- filled dynamically --> <div class="layout"> <h3>Select a policy to begin.</h3> <summary class="flex"> <span class="menu-button" onclick="toggleDrawer()"><img src="/img/menu24px.svg"></span> </summary> </div> </div> <div> <div id="intro-summary" class="body-padding"> <!-- TODO: update documentation link. --> <h2><a href="https://developers.google.com/web/updates/2018/06/feature-policy" target="_blank">Permissions Policy</a> allows web developers to selectively enable, disable, and modify the behavior of various features and APIs in the browser. This can provide a well-lit path towards good performance and prevent common footguns when building and maintaining web apps.</h2> <h3 class="notsupported">Permissions policy is not supported in your browser. Try Chrome Canary and enable the <code>--enable-experimental-web-platform-features</code> flag.</h3> <h3 style="margin-top:var(--default-padding-3x);">You control permissions policies through an HTTP header:</h3> <p> <pre class="snippet">Permissions-Policy: geolocation=* Permissions-Policy: geolocation=() Permissions-Policy: geolocation=self Permissions-Policy: geolocation="https://google-developers.appspot.com"</pre> </p> <h3 style="margin-top:var(--default-padding-3x);">or by adding the <code>allow</code> attribute on iframes:</h3> <p> <pre class="snippet"><iframe allow="geolocation"> <iframe allow="geolocation 'self'"> <iframe allow="geolocation 'none'"> <iframe allow="geolocation https://google-developers.appspot.com"></pre> </p> </div> <iframe class="content-view" name="content-view"></iframe> </div> <footer class="layout center-center"> <a href="https://github.com/GoogleChromeLabs/feature-policy-demos" target="_blank"> <img src="/img/github.svg" class="logo" alt="Github logo"> </a> </footer> </main> <script src="/js/app.js" type="module"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120357238-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-120357238-1'); </script> </body> </html>