1. Add option to allow mixed content

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

fix #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

docs/state.md

@@ -261,8 +261,9 @@ 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
+      allowMixedContent: string // allow mixed content of the source
     },
     parentFrameKey: number, // the key of the frame this frame was opened from
     modalPromptDetail: {...},

js/actions/windowActions.js

@@ -986,6 +986,32 @@ 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
+    })
+  },
+
+  /**
+   * Sets allow mixed content on a page.
+   * @param {Object} frameProps - The frame to set blocked info on
+   * @param {string} source - Source of mixed content
+   */
+  setAllowdMixedContent: function (frameProps, source) {
+    dispatch({
+      actionType: WindowConstants.WINDOW_SET_ALLOW_MIXED_CONTENT,
+      frameProps,
+      source
+    })
   }
 }
 

js/components/frame.js

@@ -161,7 +161,8 @@ class Frame extends ImmutableComponent {
 
   allowRunningInsecureContent () {
     let hack = siteHacks[urlParse(this.props.location).hostname]
-    return !!(hack && hack.allowRunningInsecureContent)
+    const userAllow = this.props.allowMixedContent
+    return !!(userAllow || (hack && hack.allowRunningInsecureContent))
   }
 
   allowRunningPlugins (url) {
@@ -557,6 +558,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.allowRunningInsecureContent()) {
+        windowActions.setBlockedMixedContent(this.frame, e.details[1])
       }
     })
     this.webview.addEventListener('context-menu', (e) => {
@@ -621,9 +624,11 @@ class Frame extends ImmutableComponent {
       }
     })
     this.webview.addEventListener('destroyed', (e) => {
+      windowActions.setAllowdMixedContent(this.frame)
       this.props.onCloseFrame(this.frame)
     })
     this.webview.addEventListener('close', () => {
+      windowActions.setAllowdMixedContent(this.props.frame)
       this.props.onCloseFrame(this.frame)
     })
     this.webview.addEventListener('page-favicon-updated', (e) => {
@@ -733,9 +738,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.allowRunningInsecureContent()
         windowActions.setSecurityState(this.frame, {
-          secure: isSecure
+          secure: isSecure,
+          mixedContent: isMixedContent
         })
         if (isSecure) {
           // Check that there isn't a cert error.

js/components/main.js

@@ -950,6 +950,7 @@ class Main extends ImmutableComponent {
               aboutDetails={frame.get('aboutDetails')}
               unloaded={frame.get('unloaded')}
               audioMuted={frame.get('audioMuted')}
+              allowMixedContent={frame.getIn(['security', 'allowMixedContent'])}
               passwords={this.props.appState.get('passwords')}
               adblock={this.props.appState.get('adblock')}
               safeBrowsing={this.props.appState.get('safeBrowsing')}

js/components/siteInfo.js

@@ -6,8 +6,18 @@ const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
 const cx = require('../lib/classSet.js')
 const Dialog = require('./dialog')
+const Button = require('./button')
+const windowActions = require('../actions/windowActions')
 
 class SiteInfo extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onAllowMixedContent = this.onAllowMixedContent.bind(this)
+  }
+  onAllowMixedContent () {
+    windowActions.setAllowdMixedContent(this.props.frameProps, this.isMixedContentBlocked)
+    this.props.onHide()
+  }
   get isExtendedValidation () {
     return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
   }
@@ -17,6 +27,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 +43,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 +59,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 +73,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

@@ -67,7 +67,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/data/siteHacks.js

@@ -64,6 +64,9 @@ module.exports = {
   'www.twitch.tv': {
     allowRunningInsecureContent: true
   },
+  'forgetfulbc.blogspot.com': {
+    allowRunningInsecureContent: false
+  },
   'imasdk.googleapis.com': {
     enableForAdblock: true,
     onBeforeRequest: function (details) {

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)
@@ -770,6 +774,28 @@ 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
+    case WindowConstants.WINDOW_SET_ALLOW_MIXED_CONTENT:
+      const allowMixedContentPath =
+        ['frames', FrameStateUtil.getFramePropsIndex(windowState.get('frames'), action.frameProps)]
+      if (action.source) {
+        windowState =
+          windowState.setIn(allowMixedContentPath.concat(['security', 'allowMixedContent']), action.source)
+      } else {
+        windowState =
+          windowState.deleteIn(allowMixedContentPath.concat(['security', 'allowMixedContent']))
+      }
+      break
     default:
   }