1. Add option to allow mixed content

2. Change icon of http and mixed content to fa-unlock
3. Remove twitch out of site hack
4. Add test

fix #3443
reuire brave/muon#47

Auditors: @bridiver

Test Plan:
Visit https://mixed-script.badssl.com/ and click the urlbar lock to
temporarily allow run insecure content and the background color will be red.

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

@@ -190,3 +190,6 @@ phone=Phone
 email=Email
 editAddress=Edit Address
 editCreditCard=Edit Credit Card
+denyRunInsecureContent=Stay Secure
+allowRunInsecureContent=Load Unsafe Scripts
+runInsecureContentWarning=This page is trying to load scripts from insecure sources. If you allow this content to run it will not be encrypted and it may transmit unencrypted data to other sites.

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,20 @@ class SiteInfo extends ImmutableComponent {
         <span data-l10n-args={JSON.stringify(l10nArgs)} data-l10n-id='sessionInfo' /></li>
     }
 
+    let runInsecureContentWarning = null
+    if (this.isBlockedRunInsecureContent) {
+      runInsecureContentWarning =
+        <li>
+          <ul>
+            <li><span className='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' /></li>
+            <li>
+              <Button l10nId='allowRunInsecureContent' className='secondaryAltButton allowRunInsecureContentButton' onClick={this.onAllowRunInsecureContent} />
+              <Button l10nId='denyRunInsecureContent' className='primaryButton denyRunInsecureContentButton' onClick={this.props.onHide} />
+            </li>
+          </ul>
+        </li>
+    }
+
     return <Dialog onHide={this.props.onHide} className='siteInfo' isClickDismiss>
       <ul onClick={(e) => e.stopPropagation()}>
       {
@@ -54,6 +85,9 @@ class SiteInfo extends ImmutableComponent {
       {
         partitionInfo
       }
+      {
+        runInsecureContentWarning
+      }
       </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;
     }