feat: warning about mixed content issues (#650)

* feat: warn about mixed content issues Closes #648
ipfs · Jan 7, 2019 · d59416d · d59416d
1 parent 4a8f70b
commit d59416d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
@@ -239,6 +239,10 @@
     "message": "URL of preferred HTTP2IPFS Gateway",
     "description": "An option description on the Preferences screen (option_customGatewayUrl_description)"
   },
+  "option_customGatewayUrl_warning": {
+    "message": "IPFS content will be blocked from loading on HTTPS websites unless your gateway URL starts with “http://127.0.0.1”, “http://[::1]” or “https://”",
+    "description": "A warning on the Preferences screen, displayed when URL does not belong to Secure Context (option_customGatewayUrl_warning)"
+  },
   "option_useCustomGateway_title": {
     "message": "Use Custom Gateway",
     "description": "An option title on the Preferences screen (option_useCustomGateway_title)"

diff --git a/add-on/src/options/forms/gateways-form.js b/add-on/src/options/forms/gateways-form.js
@@ -5,6 +5,10 @@ const browser = require('webextension-polyfill')
 const html = require('choo/html')
 const { normalizeGatewayURL } = require('../../lib/options')
 
+// Warn about mixed content issues when changing the gateway
+// https://github.com/ipfs-shipyard/ipfs-companion/issues/648
+const secureContextUrl = /^https:\/\/|^http:\/\/127.0.0.1|^http:\/\/\[::1\]/
+
 function gatewaysForm ({
   ipfsNodeType,
   customGatewayUrl,
@@ -15,6 +19,7 @@ function gatewaysForm ({
   const onCustomGatewayUrlChange = onOptionChange('customGatewayUrl', normalizeGatewayURL)
   const onUseCustomGatewayChange = onOptionChange('useCustomGateway')
   const onPublicGatewayUrlChange = onOptionChange('publicGatewayUrl', normalizeGatewayURL)
+  const mixedContentWarning = !secureContextUrl.test(customGatewayUrl)
 
   return html`
     <form>
@@ -25,7 +30,9 @@ function gatewaysForm ({
               <label for="customGatewayUrl">
                 <dl>
                   <dt>${browser.i18n.getMessage('option_customGatewayUrl_title')}</dt>
-                  <dd>${browser.i18n.getMessage('option_customGatewayUrl_description')}</dd>
+                  <dd>${browser.i18n.getMessage('option_customGatewayUrl_description')}
+                    ${mixedContentWarning ? html`<p class="red i">${browser.i18n.getMessage('option_customGatewayUrl_warning')}</p>` : null}
+                  </dd>
                 </dl>
               </label>
               <input
@@ -38,6 +45,7 @@ function gatewaysForm ({
                 title="Enter URL without any sub-path"
                 onchange=${onCustomGatewayUrlChange}
                 value=${customGatewayUrl} />
+
             </div>
           ` : null}
           ${ipfsNodeType === 'external' ? html`