Merge pull request #1263 from matrix-org/rxl881/warnings

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,18 @@ 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 !== 'https:') {
+            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;
@@ -197,16 +210,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>
-            );
+            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">

src/components/views/elements/AppWarning.js

@@ -0,0 +1,25 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const 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: 'Error',
+};
+
+export default AppWarning;