Add a way to view TLS certificates when error

Fix brave#1057

app/extensions/brave/content/scripts/brave-about.js

@@ -70,6 +70,12 @@
     })
     window.dispatchEvent(event)
   })
+  ipcRenderer.on('set-cert-error-detail', (e, details) => {
+    const event = new window.CustomEvent('set-cert-error-detail', {
+      detail: details
+    })
+    window.dispatchEvent(event)
+  })
 
   window.addEventListener('dispatch-action', (e) => {
     ipcRenderer.send('dispatch-action', e.detail)
@@ -83,6 +89,9 @@
   window.addEventListener('cert-error-accepted', (e) => {
     ipcRenderer.send('cert-error-accepted', e.detail.url)
   })
+  window.addEventListener('get-cert-error-detail', (e) => {
+    ipcRenderer.send('get-cert-error-detail', e.detail.url)
+  })
   window.addEventListener('new-frame', (e) => {
     ipcRenderer.sendToHost('new-frame', e.detail.frameOpts, e.detail.openInForeground)
   })

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

@@ -25,6 +25,7 @@ certErrorText=This site cannot be loaded due to a certificate error:
 certErrorAdvanced=Advanced settings
 certErrorSafety=Back to safety
 certErrorButtonText=Ignore certificate error (dangerous!)
+certErrorShowCertificate=Show Certificate
 safebrowsingError=Dangerous Site Blocked
 safebrowsingErrorText=For your safety, Brave has blocked this site because it is distributing malware or stealing login credentials.
 safebrowsingErrorAdvanced=Advanced

app/index.js

@@ -55,6 +55,7 @@ let lastWindowClosed = false
 
 // Domains to accept bad certs for. TODO: Save the accepted cert fingerprints.
 let acceptCertDomains = {}
+let errorCerts = {}
 // URLs to callback for auth.
 let authCallbacks = {}
 // Don't show the keytar prompt more than once per 24 hours
@@ -208,6 +209,8 @@ app.on('ready', () => {
       return
     }
 
+    errorCerts[url] = cert
+
     // Tell the page to show an unlocked icon. Note this is sent to the main
     // window webcontents, not the webview webcontents
     let sender = webContents.hostWebContents || webContents
@@ -450,6 +453,12 @@ app.on('ready', () => {
       }
     })
 
+    ipcMain.on(messages.GET_CERT_ERROR_DETAIL, (event, url) => {
+      event.sender.send(messages.SET_CERT_ERROR_DETAIL, {
+        cert: errorCerts[url]
+      })
+    })
+
     // save app state every 5 minutes regardless of update frequency
     setInterval(initiateSessionStateSave, 1000 * 60 * 5)
     AppStore.addChangeListener(() => {

js/about/aboutActions.js

@@ -101,6 +101,20 @@ const AboutActions = {
     window.dispatchEvent(event)
   },
 
+  /**
+   * Get certificate detail when error.
+   *
+   * @param {string} url - The URL with the cert error
+   */
+  getCertErrorDetail: function (url) {
+    const event = new window.CustomEvent(messages.GET_CERT_ERROR_DETAIL, {
+      detail: {
+        url
+      }
+    })
+    window.dispatchEvent(event)
+  },
+
   /**
    * Opens a context menu
    */

js/about/certerror.js

@@ -15,8 +15,11 @@ class CertErrorPage extends React.Component {
   constructor () {
     super()
     this.state = {
-      advanced: false
+      advanced: false,
+      cert: null
     }
+    this.onSetCertErrorDetail = this.onSetCertErrorDetail.bind(this)
+    window.addEventListener('set-cert-error-detail', this.onSetCertErrorDetail)
   }
 
   onAccept () {
@@ -40,6 +43,17 @@ class CertErrorPage extends React.Component {
     this.setState({advanced: true})
   }
 
+  onDetail () {
+    aboutActions.getCertErrorDetail(this.state.url)
+  }
+
+  onSetCertErrorDetail (e) {
+    e.stopPropagation()
+    this.setState({
+      cert: e.detail.cert
+    })
+  }
+
   render () {
     return <div className='errorContent'>
       <svg width='75' height='75' className='errorLogo' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
@@ -49,12 +63,30 @@ class CertErrorPage extends React.Component {
         <span data-l10n-id='certErrorText'></span>&nbsp;
         <span className='errorUrl'>{this.state.url || ''}</span>
         <span className='errorText'>{this.state.error || ''}</span>
+        {this.state.cert
+          ? (<div>
+            <span className='certErrorText'>{'Issued To'}</span>
+            <span className='errorText'>{'Common Name (CN): '}</span>
+            <span className='errorText'>{'Organization (O): '}</span>
+            <span className='errorText'>{'Organization Unit(OU): '}</span>
+            <span className='errorText'>{'Serial Number: '}</span>
+            <span className='certErrorText'>{'Issued By'}</span>
+            <span className='errorText'>{'Common Name (CN): ' + this.state.cert.issuerName}</span>
+            <span className='errorText'>{'Organization (O): '}</span>
+            <span className='errorText'>{'Organization Unit(OU): '}</span>
+            <span className='certErrorText'>{'Period of Validity'}</span>
+            <span className='errorText'>{'Begins On: '}</span>
+            <span className='errorText'>{'Expires On: '}</span>
+          </div>) : null}
       </div>
       <div className='buttons'>
         <Button l10nId='certErrorSafety' className='actionButton' onClick={this.onSafety.bind(this)} />
-        {this.state.url ? (this.state.advanced
-                  ? <Button l10nId='certErrorButtonText' className='subtleButton' onClick={this.onAccept.bind(this)} />
-                  : <Button l10nId='certErrorAdvanced' className='subtleButton' onClick={this.onAdvanced.bind(this)} />) : null}
+          {this.state.url ? (this.state.advanced
+            ? (<div>
+              <Button l10nId='certErrorButtonText' className='subtleButton' onClick={this.onAccept.bind(this)} />
+              <Button l10nId='certErrorShowCertificate' className='subtleButton' onClick={this.onDetail.bind(this)} />
+            </div>)
+            : <Button l10nId='certErrorAdvanced' className='subtleButton' onClick={this.onAdvanced.bind(this)} />) : null}
       </div>
     </div>
   }

js/constants/messages.js

@@ -125,6 +125,8 @@ const messages = {
   // HTTPS
   CERT_ERROR_ACCEPTED: _, /** @arg {string} url where a cert error was accepted */
   CHECK_CERT_ERROR_ACCEPTED: _, /** @arg {string} url to check cert error, @arg {number} key of frame */
+  GET_CERT_ERROR_DETAIL: _,
+  SET_CERT_ERROR_DETAIL: _,
   SET_SECURITY_STATE: _, /** @arg {number} key of frame, @arg {Object} security state */
   HTTPSE_RULE_APPLIED: _, /** @arg {string} name of ruleset file, @arg {Object} details of rewritten request */
   // Bookmarks

package.json

@@ -77,6 +77,7 @@
     "keytar": "^3.0.0",
     "l20n": "^3.5.1",
     "lru_cache": "^1.0.0",
+    "node-forge": "^0.6.4",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-stickynode": "^1.1.2",