Add option to allow mixed content

app/extensions/brave/locales/en-US/app.properties

@@ -190,3 +190,4 @@ phone=Phone
 email=Email
 editAddress=Edit Address
 editCreditCard=Edit Credit Card
+allowRunInsecureContent=Allow Run Insecure Content

app/sessionStore.js

@@ -248,6 +248,8 @@ module.exports.cleanAppData = (data, isShutdown) => {
     if (typeof expireTime === 'number' && expireTime < now) {
       delete data.siteSettings[host].flash
     }
+    // Don't write runInsecureContent to session
+    delete data.siteSettings[host].runInsecureContent
   }
   if (data.sites) {
     const clearHistory = isShutdown && getSetting(settings.SHUTDOWN_CLEAR_HISTORY) === true

docs/state.md

@@ -267,8 +267,8 @@ WindowStore
         realm: string
       },
       isExtendedValidation: boolean, // is using https ev
-      activeMixedContent: boolean, // has active mixed content
-      passiveMixedContent: boolean, // has passive mixed content
+      runInsecureContent: boolean, // has active mixed content
+      blockedRunInsecureContent: string, // first domain of blocked active mixed content
     },
     parentFrameKey: number, // the key of the frame this frame was opened from
     modalPromptDetail: {...},

docs/windowActions.md

@@ -753,6 +753,19 @@ Sets the manage autofill credit card popup detail
 
 
 
+### setBlockedRunInsecureContent(frameProps, source) 
+
+Sets page url with blocked active mixed content.
+
+**Parameters**
+
+**frameProps**: `Object`, The frame to set source of
+blocked active mixed content on
+
+**source**: `string`, Source of blocked active mixed content
+
+
+
 
 * * *
 

js/actions/windowActions.js

@@ -971,6 +971,20 @@ const windowActions = {
       currentDetail,
       originalDetail
     })
+  },
+
+  /**
+   * Sets page url with blocked active mixed content.
+   * @param {Object} frameProps - The frame to set source of
+   * blocked active mixed content on
+   * @param {string} source - Source of blocked active mixed content
+   */
+  setBlockedRunInsecureContent: function (frameProps, source) {
+    dispatch({
+      actionType: WindowConstants.WINDOW_SET_BLOCKED_RUN_INSECURE_CONTENT,
+      frameProps,
+      source
+    })
   }
 }
 

js/components/frame.js

@@ -166,13 +166,13 @@ class Frame extends ImmutableComponent {
   }
 
   shouldCreateWebview () {
-    return !this.webview || this.webview.allowRunningInsecureContent !== this.allowRunningInsecureContent() ||
-      !!this.webview.allowRunningPlugins !== this.allowRunningPlugins()
+    return !this.webview || !!this.webview.allowRunningPlugins !== this.allowRunningPlugins()
   }
 
-  allowRunningInsecureContent () {
-    let hack = siteHacks[urlParse(this.props.location).hostname]
-    return !!(hack && hack.allowRunningInsecureContent)
+  runInsecureContent () {
+    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings, this.origin)
+    return activeSiteSettings === undefined
+      ? false : activeSiteSettings.get('runInsecureContent')
   }
 
   allowRunningPlugins (url) {
@@ -263,10 +263,6 @@ class Frame extends ImmutableComponent {
     if (hack && hack.userAgent) {
       this.webview.setAttribute('useragent', hack.userAgent)
     }
-    if (this.allowRunningInsecureContent()) {
-      this.webview.setAttribute('allowRunningInsecureContent', true)
-      this.webview.allowRunningInsecureContent = true
-    }
     if (this.allowRunningPlugins()) {
       this.webview.setAttribute('plugins', true)
       this.webview.allowRunningPlugins = true
@@ -584,6 +580,9 @@ class Frame extends ImmutableComponent {
         windowActions.setBlockedBy(this.frame, 'noScript', e.details[1])
       }
     })
+    this.webview.addEventListener('did-block-run-insecure-content', (e) => {
+      windowActions.setBlockedRunInsecureContent(this.frame, this.props.location)
+    })
     this.webview.addEventListener('context-menu', (e) => {
       contextMenus.onMainContextMenu(e.params, this.frame)
       e.preventDefault()
@@ -758,9 +757,12 @@ class Frame extends ImmutableComponent {
           interceptFlash(true, e.url)
         }
         windowActions.onWebviewLoadStart(this.frame, e.url)
-        const isSecure = parsedUrl.protocol === 'https:' && !this.allowRunningInsecureContent()
+        windowActions.setBlockedRunInsecureContent(this.frame)
+        const isSecure = parsedUrl.protocol === 'https:' && !this.runInsecureContent()
+        const runInsecureContent = parsedUrl.protocol === 'https:' && this.runInsecureContent()
         windowActions.setSecurityState(this.frame, {
-          secure: isSecure
+          secure: isSecure,
+          runInsecureContent: runInsecureContent
         })
         if (isSecure) {
           // Check that there isn't a cert error.

js/components/siteInfo.js

@@ -3,34 +3,51 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ipc = require('electron').ipcRenderer
 const ImmutableComponent = require('./immutableComponent')
 const cx = require('../lib/classSet.js')
 const Dialog = require('./dialog')
+const Button = require('./button')
+const appActions = require('../actions/appActions')
+const messages = require('../constants/messages')
+const siteUtil = require('../state/siteUtil')
 
 class SiteInfo extends ImmutableComponent {
+  constructor () {
+    super()
+    this.OnAllowRunInsecureContent = this.OnAllowRunInsecureContent.bind(this)
+  }
+  OnAllowRunInsecureContent () {
+    appActions.changeSiteSetting(siteUtil.getOrigin(this.isBlockedRunInsecureContent), 'runInsecureContent', true)
+    ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_LOAD_URL, {}, this.isBlockedRunInsecureContent)
+    this.props.onHide()
+  }
   get isExtendedValidation () {
     return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
   }
   get isSecure () {
     return this.props.frameProps.getIn(['security', 'isSecure'])
   }
-  get isMixedContent () {
-    return this.props.frameProps.getIn(['security', 'isMixedContent'])
+  get runInsecureContent () {
+    return this.props.frameProps.getIn(['security', 'runInsecureContent'])
+  }
+  get isBlockedRunInsecureContent () {
+    return this.props.frameProps.getIn(['security', 'blockedRunInsecureContent'])
   }
   get partitionNumber () {
     return this.props.frameProps.getIn(['partitionNumber'])
   }
   render () {
     let secureIcon
-    if (this.isSecure && !this.isMixedContent) {
+    if (this.isSecure && !this.runInsecureContent) {
       secureIcon = <li><span
         className={cx({
           fa: true,
           'fa-lock': true,
           extendedValidation: this.isExtendedValidation
         })} /><span data-l10n-id='secureConnection' /></li>
-    } else if (this.isMixedContent) {
-      secureIcon = <li><span className='fa fa-unlock-alt' /><span data-l10n-id='mixedConnection' /></li>
+    } else if (this.runInsecureContent) {
+      secureIcon = <li><span className='fa fa-unlock' /><span data-l10n-id='mixedConnection' /></li>
     } else {
       secureIcon = <li><span className='fa fa-unlock' /><span data-l10n-id='insecureConnection' data-l10n-args={JSON.stringify(l10nArgs)} /></li>
     }
@@ -46,6 +63,12 @@ class SiteInfo extends ImmutableComponent {
         <span data-l10n-args={JSON.stringify(l10nArgs)} data-l10n-id='sessionInfo' /></li>
     }
 
+    let allowRunInsecureContentButton
+    if (this.isBlockedRunInsecureContent) {
+      allowRunInsecureContentButton =
+        <Button l10nId='allowRunInsecureContent' className='primaryButton allowRunInsecureContentButton' onClick={this.OnAllowRunInsecureContent} />
+    }
+
     return <Dialog onHide={this.props.onHide} className='siteInfo' isClickDismiss>
       <ul onClick={(e) => e.stopPropagation()}>
       {
@@ -54,6 +77,9 @@ class SiteInfo extends ImmutableComponent {
       {
         partitionInfo
       }
+      {
+        allowRunInsecureContentButton
+      }
       </ul>
     </Dialog>
   }

js/components/urlBar.js

@@ -383,7 +383,7 @@ class UrlBar extends ImmutableComponent {
           urlbarIcon: true,
           'fa': !this.activateSearchEngine,
           'fa-lock': !this.activateSearchEngine && this.isHTTPPage && this.props.isSecure && !this.props.urlbar.get('active'),
-          'fa-unlock-alt': !this.activateSearchEngine && this.isHTTPPage && !this.props.isSecure && !this.props.urlbar.get('active') && !this.props.titleMode,
+          'fa-unlock': !this.activateSearchEngine && this.isHTTPPage && !this.props.isSecure && !this.props.urlbar.get('active') && !this.props.titleMode,
           'fa fa-file': !this.activateSearchEngine && this.props.urlbar.get('active') && this.props.loading === false,
           extendedValidation: this.extendedValidationSSL
         })}

js/constants/windowConstants.js

@@ -66,7 +66,8 @@ const windowConstants = {
   WINDOW_SET_LAST_ZOOM_PERCENTAGE: _,
   WINDOW_SET_CLEAR_BROWSING_DATA_DETAIL: _,
   WINDOW_SET_AUTOFILL_ADDRESS_DETAIL: _,
-  WINDOW_SET_AUTOFILL_CREDIT_CARD_DETAIL: _
+  WINDOW_SET_AUTOFILL_CREDIT_CARD_DETAIL: _,
+  WINDOW_SET_BLOCKED_RUN_INSECURE_CONTENT: _
 }
 
 module.exports = mapValuesByKeys(windowConstants)

js/data/siteHacks.js

@@ -35,7 +35,6 @@ module.exports = {
   },
   // For links like: https://player.twitch.tv/?channel=iwilldominate
   'player.twitch.tv': {
-    allowRunningInsecureContent: true,
     enableForAll: true
   },
   'www.wired.com': {
@@ -61,9 +60,6 @@ module.exports = {
         };
     })();`
   },
-  'www.twitch.tv': {
-    allowRunningInsecureContent: true
-  },
   'imasdk.googleapis.com': {
     enableForAdblock: true,
     onBeforeRequest: function (details) {

js/state/contentSettings.js

@@ -112,6 +112,10 @@ const getContentSettingsFromSiteSettings = (appState) => {
     flashActive: [{
       setting: 'block',
       primaryPattern: '*'
+    }],
+    runInsecureContent: [{
+      setting: 'block',
+      primaryPattern: '*'
     }]
   }
 
@@ -124,6 +128,10 @@ const getContentSettingsFromSiteSettings = (appState) => {
       addContentSettings(contentSettings.javascript, hostPattern, '*',
         hostSetting.noScript ? 'block' : 'allow')
     }
+    if (typeof hostSetting.runInsecureContent === 'boolean') {
+      addContentSettings(contentSettings.runInsecureContent, hostPattern, '*',
+        hostSetting.runInsecureContent ? 'allow' : 'block')
+    }
     if (hostSetting.cookieControl) {
       if (hostSetting.cookieControl === 'block3rdPartyCookie') {
         addContentSettings(contentSettings.cookies, hostPattern, '*', 'block')

js/stores/windowStore.js

@@ -742,6 +742,10 @@ const doAction = (action) => {
         windowState = windowState.setIn(path.concat(['security', 'isSecure']),
                                         action.securityState.secure)
       }
+      if (action.securityState.runInsecureContent !== undefined) {
+        windowState = windowState.setIn(path.concat(['security', 'runInsecureContent']),
+                                        action.securityState.runInsecureContent)
+      }
       if (action.securityState.certDetails) {
         windowState = windowState.setIn(path.concat(['security', 'certDetails']),
                                         action.securityState.certDetails)
@@ -763,6 +767,17 @@ const doAction = (action) => {
         history: addToHistory(action.frameProps)
       })
       break
+    case WindowConstants.WINDOW_SET_BLOCKED_RUN_INSECURE_CONTENT:
+      const blockedRunInsecureContentPath =
+        ['frames', FrameStateUtil.getFramePropsIndex(windowState.get('frames'), action.frameProps)]
+      if (action.source) {
+        windowState =
+          windowState.setIn(blockedRunInsecureContentPath.concat(['security', 'blockedRunInsecureContent']), action.source)
+      } else {
+        windowState =
+          windowState.deleteIn(blockedRunInsecureContentPath.concat(['security', 'blockedRunInsecureContent']))
+      }
+      break
     default:
   }
 

less/navigationBar.less

@@ -384,14 +384,14 @@
     min-width: 16px;
 
     &.fa-lock,
-    &.fa-unlock-alt {
+    &.fa-unlock {
       margin-top: 4px;
       font-size: 16px;
       min-height: 10px;
       min-width: 16px;
     }
 
-    &.fa-unlock-alt {
+    &.fa-unlock {
         color: @gray;
     }
 

test/components/navigationBarTest.js

@@ -2,7 +2,7 @@
 
 const Brave = require('../lib/brave')
 const config = require('../../js/constants/config')
-const {urlBarSuggestions, urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime, navigator, titleBar, urlbarIcon, bookmarksToolbar, navigatorNotBookmarked, navigatorBookmarked, saveButton} = require('../lib/selectors')
+const {urlBarSuggestions, urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime, navigator, titleBar, urlbarIcon, bookmarksToolbar, navigatorNotBookmarked, navigatorBookmarked, saveButton, allowRunInsecureContentButton} = require('../lib/selectors')
 const urlParse = require('url').parse
 const assert = require('assert')
 const settings = require('../../js/constants/settings')
@@ -247,6 +247,10 @@ describe('navigationBar', function () {
           .getAttribute(urlbarIcon, 'class').then((classes) =>
             classes.includes('fa-unlock')
         ))
+        .windowByUrl(Brave.browserWindowUrl)
+        .click(urlbarIcon)
+        .waitForVisible('[data-l10n-id="insecureConnection"]')
+        .keys('\uE00C')
     })
     it('Shows secure URL icon', function * () {
       const page1Url = 'https://badssl.com/'
@@ -258,6 +262,10 @@ describe('navigationBar', function () {
           this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
             classes.includes('fa-lock')
           ))
+        .windowByUrl(Brave.browserWindowUrl)
+        .click(urlbarIcon)
+        .waitForVisible('[data-l10n-id="secureConnection"]')
+        .keys('\uE00C')
     })
     it('Blocks active mixed content', function * () {
       const page1Url = 'https://mixed-script.badssl.com/'
@@ -272,6 +280,52 @@ describe('navigationBar', function () {
             color.value === 'rgba(128,128,128,1)'
           )
         })
+        .windowByUrl(Brave.browserWindowUrl)
+        .waitForExist(urlbarIcon)
+        .waitUntil(() =>
+          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+            classes.includes('fa-lock')
+          ))
+        .windowByUrl(Brave.browserWindowUrl)
+        .click(urlbarIcon)
+        .waitForVisible('[data-l10n-id="secureConnection"]')
+        .keys('\uE00C')
+    })
+    it('Temporarily allow active mixed content', function * () {
+      const page1Url = 'https://mixed-script.badssl.com/'
+      yield this.app.client.tabByUrl(Brave.newTabUrl)
+        .url(page1Url)
+        .waitUntil(() => {
+          return this.app.client.execute(() => document.readyState).then((ret) =>
+            ret.value === 'complete'
+          )
+        }).waitUntil(() => {
+          return this.app.client.getCssProperty('body', 'background-color').then((color) =>
+            color.value === 'rgba(128,128,128,1)'
+          )
+        })
+        .windowByUrl(Brave.browserWindowUrl)
+        .click(urlbarIcon)
+        .windowByUrl(Brave.browserWindowUrl)
+        .waitForVisible(allowRunInsecureContentButton)
+        .click(allowRunInsecureContentButton)
+        .tabByUrl(this.page1Url)
+        .waitUntil(() => {
+          return this.app.client.execute(() => document.readyState).then((ret) =>
+            ret.value === 'complete'
+          )
+        }).waitUntil(() => {
+          return this.app.client.getCssProperty('body', 'background-color').then((color) =>
+            color.value === 'rgba(255,0,0,1)'
+          )
+        })
+        .windowByUrl(Brave.browserWindowUrl)
+        .click(urlbarIcon)
+        .getAttribute(urlbarIcon, 'class').then((classes) =>
+          classes.includes('fa-unlock')
+        )
+        .waitForVisible('[data-l10n-id="mixedConnection"]')
+        .keys('\uE00C')
     })
   })
 

test/lib/selectors.js

@@ -60,5 +60,6 @@ module.exports = {
   paymentHistoryButton: '.paymentHistoryButton',
   paymentsWelcomePage: '.paymentsMessage',
   autofillAddressPanel: '.autofillAddressPanel',
-  autofillCreditCardPanel: '.autofillCreditCardPanel'
+  autofillCreditCardPanel: '.autofillCreditCardPanel',
+  allowRunInsecureContentButton: '.allowRunInsecureContentButton'
 }