1. Add option to allow mixed content

2. Change icon of http and mixed content to fa-unlock

fix brave#3443

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

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

app/sessionStore.js

@@ -248,6 +248,7 @@ module.exports.cleanAppData = (data, isShutdown) => {
     if (typeof expireTime === 'number' && expireTime < now) {
       delete data.siteSettings[host].flash
     }
+    delete data.siteSettings[host].allowActiveMixedContent
   }
   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
+      isMixedContent: boolean, // has active mixed content
+      blockedMixedContent: string, // source of blocked mixed content
     },
     parentFrameKey: number, // the key of the frame this frame was opened from
     modalPromptDetail: {...},

docs/windowActions.md

@@ -753,6 +753,18 @@ Sets the manage autofill credit card popup detail
 
 
 
+### setBlockedMixedContent(frameProps, source) 
+
+Sets which mixed content were blocked on a page.
+
+**Parameters**
+
+**frameProps**: `Object`, The frame to set blocked mixed content on
+
+**source**: `string`, Source of blocked mixed content
+
+
+
 
 * * *
 

js/actions/windowActions.js

@@ -969,6 +969,19 @@ const windowActions = {
       currentDetail,
       originalDetail
     })
+  },
+
+  /**
+   * Sets which mixed content were blocked on a page.
+   * @param {Object} frameProps - The frame to set blocked mixed content on
+   * @param {string} source - Source of blocked mixed content
+   */
+  setBlockedMixedContent: function (frameProps, source) {
+    dispatch({
+      actionType: WindowConstants.WINDOW_SET_BLOCKED_MIXED_CONTENT,
+      frameProps,
+      source
+    })
   }
 }
 

js/components/frame.js

@@ -165,6 +165,12 @@ class Frame extends ImmutableComponent {
     return !!(hack && hack.allowRunningInsecureContent)
   }
 
+  allowActiveMixedContent () {
+    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings, this.origin)
+    return activeSiteSettings === undefined
+      ? false : activeSiteSettings.get('allowActiveMixedContent')
+  }
+
   allowRunningPlugins (url) {
     if (!this.props.flashInitialized) {
       return false
@@ -572,6 +578,8 @@ class Frame extends ImmutableComponent {
     this.webview.addEventListener('content-blocked', (e) => {
       if (e.details[0] === 'javascript') {
         windowActions.setBlockedBy(this.frame, 'noScript', e.details[1])
+      } else if (!this.allowActiveMixedContent()) {
+        windowActions.setBlockedMixedContent(this.frame, this.props.location)
       }
     })
     this.webview.addEventListener('context-menu', (e) => {
@@ -748,9 +756,12 @@ class Frame extends ImmutableComponent {
           interceptFlash(true, e.url)
         }
         windowActions.onWebviewLoadStart(this.frame, e.url)
+        windowActions.setBlockedMixedContent(this.frame)
         const isSecure = parsedUrl.protocol === 'https:' && !this.allowRunningInsecureContent()
+        const isMixedContent = parsedUrl.protocol === 'https:' && this.allowActiveMixedContent()
         windowActions.setSecurityState(this.frame, {
-          secure: isSecure
+          secure: isSecure,
+          mixedContent: isMixedContent
         })
         if (isSecure) {
           // Check that there isn't a cert error.

js/components/siteInfo.js

@@ -3,11 +3,25 @@
  * 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.onAllowMixedContent = this.onAllowMixedContent.bind(this)
+  }
+  onAllowMixedContent () {
+    appActions.changeSiteSetting(siteUtil.getOrigin(this.isMixedContentBlocked), 'allowActiveMixedContent', true)
+    ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_LOAD_URL, {}, this.isMixedContentBlocked)
+    this.props.onHide()
+  }
   get isExtendedValidation () {
     return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
   }
@@ -17,6 +31,9 @@ class SiteInfo extends ImmutableComponent {
   get isMixedContent () {
     return this.props.frameProps.getIn(['security', 'isMixedContent'])
   }
+  get isMixedContentBlocked () {
+    return this.props.frameProps.getIn(['security', 'blockedMixedContent'])
+  }
   get partitionNumber () {
     return this.props.frameProps.getIn(['partitionNumber'])
   }
@@ -30,7 +47,7 @@ class SiteInfo extends ImmutableComponent {
           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>
+      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 allowMixedContentButton
+    if (this.isMixedContentBlocked) {
+      allowMixedContentButton =
+        <Button l10nId='allowMixedContent' className='primaryButton' onClick={this.onAllowMixedContent} />
+    }
+
     return <Dialog onHide={this.props.onHide} className='siteInfo' isClickDismiss>
       <ul onClick={(e) => e.stopPropagation()}>
       {
@@ -54,6 +77,9 @@ class SiteInfo extends ImmutableComponent {
       {
         partitionInfo
       }
+      {
+        allowMixedContentButton
+      }
       </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,9 @@ 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_MIXED_CONTENT: _,
+  WINDOW_SET_ALLOW_MIXED_CONTENT: _
 }
 
 module.exports = mapValuesByKeys(windowConstants)

js/state/contentSettings.js

@@ -111,6 +111,10 @@ const getContentSettingsFromSiteSettings = (appState) => {
     flashActive: [{
       setting: 'block',
       primaryPattern: '*'
+    }],
+    runInsecureContent: [{
+      setting: 'block',
+      primaryPattern: '*'
     }]
   }
 
@@ -123,6 +127,10 @@ const getContentSettingsFromSiteSettings = (appState) => {
       addContentSettings(contentSettings.javascript, hostPattern, '*',
         hostSetting.noScript ? 'block' : 'allow')
     }
+    if (typeof hostSetting.allowActiveMixedContent === 'boolean') {
+      addContentSettings(contentSettings.runInsecureContent, hostPattern, '*',
+        hostSetting.allowActiveMixedContent ? '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.mixedContent !== undefined) {
+        windowState = windowState.setIn(path.concat(['security', 'isMixedContent']),
+                                        action.securityState.mixedContent)
+      }
       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_MIXED_CONTENT:
+      const blockedMixedContentPath =
+        ['frames', FrameStateUtil.getFramePropsIndex(windowState.get('frames'), action.frameProps)]
+      if (action.source) {
+        windowState =
+          windowState.setIn(blockedMixedContentPath.concat(['security', 'blockedMixedContent']), action.source)
+      } else {
+        windowState =
+          windowState.deleteIn(blockedMixedContentPath.concat(['security', 'blockedMixedContent']))
+      }
+      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;
     }