From bc4d979d1e8000d6af167cd87142ddba90660f25 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 17:29:29 +0100
Subject: [PATCH 1/7] Display warning if widget is mixed content

---
 src/components/views/elements/AppTile.js    | 20 +++++++++++++++++
 src/components/views/elements/AppWarning.js | 25 +++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/components/views/elements/AppWarning.js

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 0e2a78e34d..22c1300c64 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -25,6 +25,7 @@ import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import AppPermission from './AppPermission';
+import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../WidgetUtils';
 
@@ -70,6 +71,17 @@ export default React.createClass({
         return scalarUrl && this.props.url.startsWith(scalarUrl);
     },
 
+    isMixedContent: function() {
+        const parentContentProtocol = window.location.protocol;
+        const u = url.parse(this.props.url);
+        const childContentProtocol = u.protocol;
+        if (parentContentProtocol === 'https:' && childContentProtocol !== parentContentProtocol) {
+            console.warn("Refusing to load mixed-content app:", parentContentProtocol, childContentProtocol, window.location, this.props.url);
+            return true;
+        }
+        return false;
+    },
+
     componentWillMount: function() {
         if (!this.isScalarUrl()) {
             return;
@@ -207,6 +219,14 @@ export default React.createClass({
                     ></iframe>
                 </div>
             );
+        } else if (this.isMixedContent() == true) {
+            appTileBody = (
+                <div className="mx_AppTileBody">
+                    <AppWarning
+                        errorMsg="Error - Mixed content"
+                    />
+                </div>
+            );
         } else {
             appTileBody = (
                 <div className="mx_AppTileBody">
diff --git a/src/components/views/elements/AppWarning.js b/src/components/views/elements/AppWarning.js
new file mode 100644
index 0000000000..527ee087d6
--- /dev/null
+++ b/src/components/views/elements/AppWarning.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+function AppWarning(props) {
+    return (
+        <div className='mx_AppPermissionWarning'>
+            <div className='mx_AppPermissionWarningImage'>
+                <img src='img/warning.svg' alt={_t('Warning!')}/>
+            </div>
+            <div className='mx_AppPermissionWarningText'>
+                <span className='mx_AppPermissionWarningTextLabel'>{props.errorMsg}</span>
+            </div>
+        </div>
+    );
+}
+
+AppWarning.propTypes = {
+    errorMsg: PropTypes.string,
+};
+AppWarning.defaultProps = {
+    errorMsg: _t('Error'),
+};
+
+export default AppWarning;

From f57b0d4cc7521f06b09406aaaadfbb08a8085db7 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 17:43:38 +0100
Subject: [PATCH 2/7] Fix invalid translation

---
 src/components/views/elements/AppWarning.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/AppWarning.js b/src/components/views/elements/AppWarning.js
index 527ee087d6..372535e069 100644
--- a/src/components/views/elements/AppWarning.js
+++ b/src/components/views/elements/AppWarning.js
@@ -19,7 +19,7 @@ AppWarning.propTypes = {
     errorMsg: PropTypes.string,
 };
 AppWarning.defaultProps = {
-    errorMsg: _t('Error'),
+    errorMsg: 'Error',
 };
 
 export default AppWarning;

From d29610bdd21aef970d62e493fe5e079d2914f2f4 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 17:45:06 +0100
Subject: [PATCH 3/7] Fix boolean comparison.

---
 src/components/views/elements/AppTile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 22c1300c64..1119cf0387 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -219,7 +219,7 @@ export default React.createClass({
                     ></iframe>
                 </div>
             );
-        } else if (this.isMixedContent() == true) {
+        } else if (this.isMixedContent()) {
             appTileBody = (
                 <div className="mx_AppTileBody">
                     <AppWarning

From f0224460d2e0885dbf6124fc630066cbd90189c9 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 17:48:02 +0100
Subject: [PATCH 4/7] Fix comparison and handle case where app has permission
 to load but content is mixed protocol.

---
 src/components/views/elements/AppTile.js | 38 +++++++++++++-----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 1119cf0387..2aebc217f5 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -209,24 +209,26 @@ export default React.createClass({
                 </div>
             );
         } else if (this.state.hasPermissionToLoad == true) {
-            appTileBody = (
-                <div className="mx_AppTileBody">
-                    <iframe
-                        ref="appFrame"
-                        src={safeWidgetUrl}
-                        allowFullScreen="true"
-                        sandbox={sandboxFlags}
-                    ></iframe>
-                </div>
-            );
-        } else if (this.isMixedContent()) {
-            appTileBody = (
-                <div className="mx_AppTileBody">
-                    <AppWarning
-                        errorMsg="Error - Mixed content"
-                    />
-                </div>
-            );
+            if (this.isMixedContent()) {
+                appTileBody = (
+                    <div className="mx_AppTileBody">
+                        <AppWarning
+                            errorMsg="Error - Mixed content"
+                        />
+                    </div>
+                );
+            } else {
+                appTileBody = (
+                    <div className="mx_AppTileBody">
+                        <iframe
+                            ref="appFrame"
+                            src={safeWidgetUrl}
+                            allowFullScreen="true"
+                            sandbox={sandboxFlags}
+                        ></iframe>
+                    </div>
+                );
+            }
         } else {
             appTileBody = (
                 <div className="mx_AppTileBody">

From 2ab6bc84a79135d23006506642dc5f3c8fdfcc93 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 17:49:41 +0100
Subject: [PATCH 5/7] Improve clarity

---
 src/components/views/elements/AppTile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 2aebc217f5..ce64d2ff22 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -75,7 +75,7 @@ export default React.createClass({
         const parentContentProtocol = window.location.protocol;
         const u = url.parse(this.props.url);
         const childContentProtocol = u.protocol;
-        if (parentContentProtocol === 'https:' && childContentProtocol !== parentContentProtocol) {
+        if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:", parentContentProtocol, childContentProtocol, window.location, this.props.url);
             return true;
         }

From 48faf72fdc992d0e39219caf6b96dc1658a52a59 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 1 Aug 2017 21:00:18 +0100
Subject: [PATCH 6/7] Disable eslint rule

---
 src/components/views/elements/AppWarning.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/AppWarning.js b/src/components/views/elements/AppWarning.js
index 372535e069..944f1422e6 100644
--- a/src/components/views/elements/AppWarning.js
+++ b/src/components/views/elements/AppWarning.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
-function AppWarning(props) {
+const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
@@ -13,7 +13,7 @@ function AppWarning(props) {
             </div>
         </div>
     );
-}
+};
 
 AppWarning.propTypes = {
     errorMsg: PropTypes.string,

From 7599bde1f6a48ab51fad8f7aeead81c7de74c7f0 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Wed, 2 Aug 2017 17:05:46 +0100
Subject: [PATCH 7/7] Fix logging line length.

---
 src/components/views/elements/AppTile.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index ce64d2ff22..2fcacaaee2 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -76,7 +76,8 @@ export default React.createClass({
         const u = url.parse(this.props.url);
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
-            console.warn("Refusing to load mixed-content app:", parentContentProtocol, childContentProtocol, window.location, this.props.url);
+            console.warn("Refusing to load mixed-content app:",
+            parentContentProtocol, childContentProtocol, window.location, this.props.url);
             return true;
         }
         return false;