Add-on iframe: delegate microphone + camera Permissions Policy

src/panels/app/ha-panel-app.ts

@@ -6,6 +6,7 @@ import { classMap } from "lit/directives/class-map";
 import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { IFRAME_SANDBOX } from "../../util/iframe";
 import { navigate } from "../../common/navigate";
 import { computeRouteTail } from "../../common/url/route";
 import { nextRender } from "../../common/util/render-status";
@@ -136,6 +137,8 @@ class HaPanelApp extends LitElement {
         })}
         title=${this._addon.name}
         src=${this._addon.ingress_url!}
+        .sandbox=${IFRAME_SANDBOX}
+        allow="microphone; camera; clipboard-write"
         @load=${this._checkLoaded}
         ${ref(this._iframeRef)}
       >

src/panels/iframe/ha-panel-iframe.ts

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import "../../layouts/hass-error-screen";
 import "../../layouts/hass-subpage";
 import type { HomeAssistant, PanelInfo } from "../../types";
-import { IFRAME_SANDBOX } from "../../util/iframe";
+import { IFRAME_SANDBOX_SAME_ORIGIN } from "../../util/iframe";
 
 @customElement("ha-panel-iframe")
 class HaPanelIframe extends LitElement {
@@ -41,7 +41,7 @@ class HaPanelIframe extends LitElement {
             this.panel.title === null ? undefined : this.panel.title
           )}
           src=${this.panel.config.url}
-          .sandbox=${IFRAME_SANDBOX}
+          .sandbox=${IFRAME_SANDBOX_SAME_ORIGIN}
           allow="fullscreen"
         ></iframe>
       </hass-subpage>

src/panels/lovelace/cards/hui-iframe-card.ts

@@ -13,7 +13,7 @@ import type {
   LovelaceGridOptions,
 } from "../types";
 import type { IframeCardConfig } from "./types";
-import { IFRAME_SANDBOX } from "../../../util/iframe";
+import { IFRAME_SANDBOX_SAME_ORIGIN } from "../../../util/iframe";
 
 @customElement("hui-iframe-card")
 export class HuiIframeCard extends LitElement implements LovelaceCard {
@@ -95,7 +95,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     }
     const sandbox_params = this._config.disable_sandbox
       ? undefined
-      : `${sandbox_user_params} ${IFRAME_SANDBOX}`;
+      : `${sandbox_user_params} ${IFRAME_SANDBOX_SAME_ORIGIN}`;
 
     return html`
       <ha-card

src/util/iframe.ts

@@ -1,2 +1,4 @@
 export const IFRAME_SANDBOX =
-  "allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-downloads";
+  "allow-forms allow-popups allow-pointer-lock allow-scripts allow-modals allow-downloads";
+
+export const IFRAME_SANDBOX_SAME_ORIGIN = `${IFRAME_SANDBOX} allow-same-origin`;