Show passive mixed content as secure

js/components/frame.js

@@ -995,16 +995,20 @@ class Frame extends ImmutableComponent {
         windowActions.setNavigated(this.webview.getURL(), this.props.frameKey, true, this.frame.get('tabId'))
       }
     }
-    this.webview.addEventListener('did-change-security', (e) => {
+    this.webview.addEventListener('security-style-changed', (e) => {
       let isSecure = null
-      let runInsecureContent = false
-      if (e.securityState === 'secure' || e.securityState === 'warning') {
+      let runInsecureContent = this.runInsecureContent()
+      // 'warning' and 'passive mixed content' should never upgrade the
+      // security state from insecure to secure
+      if (e.securityState === 'secure' ||
+          (this.props.isSecure !== false &&
+           runInsecureContent !== true &&
+           ['warning', 'passive-mixed-content'].includes(e.securityState))) {
         isSecure = true
-        runInsecureContent = this.runInsecureContent()
-      } else if (e.securityState === 'insecure' || e.securityState === 'unknown') {
+      } else if (['broken', 'insecure'].includes(e.securityState)) {
         isSecure = false
       }
-      // TODO: handle 'warning' security state
+      // TODO: show intermediate UI for 'warning' and 'passive-mixed-content'
       windowActions.setSecurityState(this.frame, {
         secure: isSecure,
         runInsecureContent

js/components/main.js

@@ -1207,6 +1207,7 @@ class Main extends ImmutableComponent {
                         .includes(siteTags.BOOKMARK_FOLDER)) || emptyMap
                   : null}
                 isFullScreen={frame.get('isFullScreen')}
+                isSecure={frame.getIn(['security', 'isSecure'])}
                 showFullScreenWarning={frame.get('showFullScreenWarning')}
                 findbarShown={frame.get('findbarShown')}
                 findDetail={frame.get('findDetail')}

test/components/navigationBarTest.js

@@ -396,6 +396,18 @@ describe('navigationBar', function () {
           assert(!classes.includes('fa-lock'))
         )
     })
+    it('shows secure icon on a site with passive mixed content', function * () {
+      const page1Url = 'https://mixed.badssl.com/'
+      yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url)
+      yield this.app.client
+        .moveToObject(navigator)
+        .waitForExist(urlbarIcon)
+        .waitUntil(() =>
+          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+            classes.includes('fa-lock')
+          )
+        )
+    })
     it('Blocks running insecure content', function * () {
       const page1Url = 'https://mixed-script.badssl.com/'
       yield this.app.client.tabByUrl(Brave.newTabUrl)