View certificate on mixed content site

fix #8530

Auditors: @diracdeltas

Test Plan:
1. Go to https://mixed-script.badssl.com/
2. We should be able to view certificate
3. Click load unsafe scripts
4. We should still have option to view certificate

1. Go to https://wrong.host.badssl.com/
2. Click proceed to site
3. We should still have option to view certificate
4. Go to http://example.com/
5. We shouldn't be able to view certificate

app/browser/reducers/tabsReducer.js

@@ -133,7 +133,7 @@ const tabsReducer = (state, action) => {
     case windowConstants.WINDOW_SET_FRAME_ERROR:
       {
         const tabId = action.getIn(['frameProps', 'tabId'])
-        const tab = tabs.getWebContents(tabId)
+        const tab = getWebContents(tabId)
         if (tab) {
           let currentIndex = tab.getCurrentEntryIndex()
           let previousLocation = tab.getURL()

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

@@ -104,6 +104,7 @@ partiallySecureConnectionInfo=This page was loaded over HTTPS, but some elements
 insecureConnection=Using an insecure connection
 insecureConnectionInfo=Your connection to this site is not private. An eavesdropper may be able to tamper with this page and read your data.
 phishingConnectionInfo=javascript:, data:, and blob: URLs are not secure and may be used for phishing attacks. Be careful when entering passwords and sensitive information!
+certErrConnectionInfo={{site}} does not have a valid HTTPS certificate. This may be caused by a misconfiguration or an attacker intercepting your connection.
 blockedTrackingElements={{blockedTrackingElementsSize}} Blocked tracking elements
 replacedAds={{replacedAdsSize}} Ads replaced
 blockedAds={{blockedAdsSize}} Ads blocked

app/index.js

@@ -399,11 +399,9 @@ app.on('ready', () => {
     ipcMain.on(messages.CHECK_CERT_ERROR_ACCEPTED, (event, host, frameKey) => {
       // If the host is associated with a URL with a cert error, update the
       // security state to insecure
-      if (acceptCertDomains[host]) {
-        event.sender.send(messages.SET_SECURITY_STATE, frameKey, {
-          secure: false
-        })
-      }
+      event.sender.send(messages.SET_SECURITY_STATE, frameKey, {
+        secure: 2
+      })
     })
 
     ipcMain.on(messages.GET_CERT_ERROR_DETAIL, (event, url) => {

app/renderer/components/navigation/urlBarIcon.js

@@ -31,7 +31,7 @@ class UrlBarIcon extends ImmutableComponent {
       // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
       if (this.props.isSecure === true) {
         return ['fa-lock']
-      } else if (this.props.isSecure === false) {
+      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
         return ['fa-unlock', 'insecure-color']
       } else if (this.props.isSecure === 1) {
         return ['fa-unlock']

docs/state.md

@@ -473,7 +473,7 @@ WindowStore
     showFullScreenWarning: boolean, // true if a warning should be shown about full screen
     security: {
       blockedRunInsecureContent: Array<string>, // sources of blocked active mixed content
-      isSecure: (boolean|number), // true = fully secure, false = fully insecure, 1 = partially secure
+      isSecure: (boolean|number), // true = fully secure, false = fully insecure, 1 = partially secure, 2 = cert error
       loginRequiredDetail: {
         isProxy: boolean,
         host: string,

js/components/frame.js

@@ -759,8 +759,12 @@ class Frame extends ImmutableComponent {
       let runInsecureContent = this.runInsecureContent()
       if (e.securityState === 'secure') {
         isSecure = true
-      } else if (['broken', 'insecure'].includes(e.securityState)) {
+      } else if (e.securityState === 'insecure') {
         isSecure = false
+      } else if (e.securityState === 'broken') {
+        isSecure = false
+        const parsedUrl = urlParse(this.props.location)
+        ipc.send(messages.CHECK_CERT_ERROR_ACCEPTED, parsedUrl.host, this.props.frameKey)
       } else if (this.props.isSecure !== false &&
         ['warning', 'passive-mixed-content'].includes(e.securityState)) {
         // Passive mixed content should not upgrade an insecure connection to a
@@ -772,11 +776,6 @@ class Frame extends ImmutableComponent {
         secure: runInsecureContent ? false : isSecure,
         runInsecureContent
       })
-      if (isSecure) {
-        // Check that there isn't a cert error.
-        const parsedUrl = urlParse(this.props.location)
-        ipc.send(messages.CHECK_CERT_ERROR_ACCEPTED, parsedUrl.host, this.props.frameKey)
-      }
     })
     this.webview.addEventListener('load-start', (e) => {
       loadStart(e)

js/components/siteInfo.js

@@ -137,6 +137,10 @@ class SiteInfo extends ImmutableComponent {
     let connectionInfo = null
     let viewCertificateButton = null
 
+    const certErrl10nArgs = {
+      site: this.location
+    }
+
     // TODO(Anthony): Hide it until muon support linux
     if (!platformUtil.isLinux()) {
       viewCertificateButton =
@@ -170,6 +174,7 @@ class SiteInfo extends ImmutableComponent {
               onClick={this.props.onHide}
             />
           </div>
+          {viewCertificateButton}
         </div>
     } else if (this.runInsecureContent) {
       connectionInfo =
@@ -187,6 +192,7 @@ class SiteInfo extends ImmutableComponent {
               onClick={this.onDenyRunInsecureContent}
             />
           </div>
+          {viewCertificateButton}
         </div>
     } else if (this.isSecure === true) {
       connectionInfo =
@@ -200,6 +206,12 @@ class SiteInfo extends ImmutableComponent {
           <div data-l10n-id='partiallySecureConnectionInfo' />
           {viewCertificateButton}
         </div>
+    } else if (this.isSecure === 2) {
+      connectionInfo =
+        <div className={css(styles.connectionInfo__wrapper)}>
+          <div data-l10n-id='certErrConnectionInfo' data-l10n-args={JSON.stringify(certErrl10nArgs)} />
+          {viewCertificateButton}
+        </div>
     } else {
       connectionInfo =
         <div className={css(styles.connectionInfo__wrapper)}>