Display warning if widget is mixed content

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">

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;