Allow iframe links to open on android through a parameter

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

@@ -21,6 +21,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       type: "iframe",
       url: "https://www.home-assistant.io",
       aspect_ratio: "50%",
+      allow_open_top_navigation: false,
     };
   }
 
@@ -80,6 +81,11 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       `;
     }
 
+    let sandbox_user_params = "";
+    if (this._config.allow_open_top_navigation) {
+      sandbox_user_params += "allow-top-navigation-by-user-activation";
+    }
+
     return html`
       <ha-card .header=${this._config.title}>
         <div
@@ -91,7 +97,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
           <iframe
             title=${ifDefined(this._config.title)}
             src=${this._config.url}
-            sandbox="allow-forms allow-modals allow-popups allow-pointer-lock allow-same-origin allow-scripts"
+            sandbox="${sandbox_user_params} allow-forms allow-modals allow-popups allow-pointer-lock allow-same-origin allow-scripts"
             allow="fullscreen"
           ></iframe>
         </div>

src/panels/lovelace/cards/types.ts

@@ -247,6 +247,7 @@ export interface HumidifierCardConfig extends LovelaceCardConfig {
 }
 
 export interface IframeCardConfig extends LovelaceCardConfig {
+  allow_open_top_navigation?: boolean;
   aspect_ratio?: string;
   title?: string;
   url: string;

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -1,7 +1,7 @@
 import "../../../../components/ha-form/ha-form";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -15,6 +15,7 @@ const cardConfigStruct = assign(
     title: optional(string()),
     url: optional(string()),
     aspect_ratio: optional(string()),
+    allow_open_top_navigation: optional(boolean()),
   })
 );
 
@@ -26,6 +27,7 @@ const SCHEMA = [
     schema: [
       { name: "url", required: true, selector: { text: {} } },
       { name: "aspect_ratio", selector: { text: {} } },
+      { name: "allow_open_top_navigation", selector: { boolean: {} } },
     ],
   },
 ] as const;

src/translations/en.json

@@ -4234,6 +4234,7 @@
             },
             "generic": {
               "alt_text": "Alternative Text",
+              "allow_open_top_navigation": "Allow open iframe links",
               "aspect_ratio": "Aspect Ratio",
               "attribute": "Attribute",
               "camera_image": "Camera Entity",