From 4b77910e4f31b048d30d09663e03cf18f0a0e762 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 15 Oct 2021 00:03:51 -0700
Subject: [PATCH] Warn if iframe won't be able to load the website (#10217)

---
 src/panels/lovelace/cards/hui-iframe-card.ts | 26 +++++++++++++++++---
 src/translations/en.json                     |  3 +++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 84658915da..f791c08ce6 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,10 +1,12 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-card";
+import "../../../components/ha-alert";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { IframeCardConfig } from "./types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("hui-iframe-card")
 export class HuiIframeCard extends LitElement implements LovelaceCard {
@@ -24,7 +26,9 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
 
-  @property() protected _config?: IframeCardConfig;
+  @property() public hass?: HomeAssistant;
+
+  @state() protected _config?: IframeCardConfig;
 
   public getCardSize(): number {
     if (!this._config) {
@@ -45,7 +49,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
   }
 
   protected render(): TemplateResult {
-    if (!this._config) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
@@ -59,6 +63,22 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       padding = "50%";
     }
 
+    const target_protocol = new URL(this._config.url, location.toString())
+      .protocol;
+    if (location.protocol === "https:" && target_protocol !== "https:") {
+      return html`
+        <ha-alert alert-type="error">
+          ${this.hass!.localize(
+            "ui.panel.lovelace.cards.iframe.error_secure_context",
+            {
+              target_protocol,
+              context_protocol: location.protocol,
+            }
+          )}
+        </ha-alert>
+      `;
+    }
+
     return html`
       <ha-card .header=${this._config.title}>
         <div
diff --git a/src/translations/en.json b/src/translations/en.json
index a31e5636ab..5b18237bc1 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2982,6 +2982,9 @@
             "call_service": "Call service {name}",
             "more_info": "Show more info: {name}"
           },
+          "iframe": {
+            "error_secure_context": "Unable to load iframes pointing at websites using {target_protocol} if Home Assistant is served over {context_protocol}."
+          },
           "safe-mode": {
             "header": "Safe Mode Activated",
             "description": "Home Assistant ran into trouble while loading your configuration and is now running in safe mode. Take a look at the error log to see what went wrong."