From 772582518e8690201244edc8465d531c1b41e004 Mon Sep 17 00:00:00 2001
From: Anthony Tseng <darkdh@gmail.com>
Date: Sat, 9 Jul 2016 16:18:49 +0800
Subject: [PATCH] Add a way to view TLS certificates when error

Fix #1057
---
 .../brave/content/scripts/brave-about.js      |  3 ++
 .../brave/locales/en-US/app.properties        |  1 +
 app/index.js                                  |  9 +++++
 js/about/aboutActions.js                      | 14 +++++++
 js/about/certerror.js                         | 40 +++++++++++++++++--
 js/constants/messages.js                      |  2 +
 package.json                                  |  1 +
 7 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/app/extensions/brave/content/scripts/brave-about.js b/app/extensions/brave/content/scripts/brave-about.js
index 52825f22efa..5c213be8540 100644
--- a/app/extensions/brave/content/scripts/brave-about.js
+++ b/app/extensions/brave/content/scripts/brave-about.js
@@ -16,6 +16,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)
   })
diff --git a/app/extensions/brave/locales/en-US/app.properties b/app/extensions/brave/locales/en-US/app.properties
index 46ab66a6624..3599208c618 100644
--- a/app/extensions/brave/locales/en-US/app.properties
+++ b/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
diff --git a/app/index.js b/app/index.js
index 1ff7e4539c8..5eb719f835f 100644
--- a/app/index.js
+++ b/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(() => {
diff --git a/js/about/aboutActions.js b/js/about/aboutActions.js
index 3ece6a6a0af..aead0b61d96 100644
--- a/js/about/aboutActions.js
+++ b/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
    */
diff --git a/js/about/certerror.js b/js/about/certerror.js
index 5793edc59ea..014c4eeaec4 100644
--- a/js/about/certerror.js
+++ b/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>
   }
diff --git a/js/constants/messages.js b/js/constants/messages.js
index 32e6ce56597..0d94350974b 100644
--- a/js/constants/messages.js
+++ b/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
diff --git a/package.json b/package.json
index 8fb1aef2ab1..a9dfb552333 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,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",