From 6846c8db338433b99091bb3518cb03ddf68052ab Mon Sep 17 00:00:00 2001
From: Samhita-sopho <samhitak@hotmail.com>
Date: Sun, 6 Dec 2020 06:56:53 -0600
Subject: [PATCH] Web UI shows blank for details tab when server address is
 blank  (#4248)

* updated changelog

* Web UI appears blank fix

* Updated DetailsSpec snapshot
---
 CHANGELOG.rst                                 |   2 +-
 .../components/FlowView/DetailsSpec.js        |  20 +++
 .../__snapshots__/DetailsSpec.js.snap         | 117 ++++++++++++++++++
 web/src/js/components/FlowView/Details.jsx    |  16 ++-
 4 files changed, 148 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 370634896..117c9f4e9 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -10,7 +10,7 @@ Unreleased: mitmproxy next
 * Addon to suppress unwanted error messages sent by mitmproxy. (@anneborcherding)
 * Updated imports and styles for web scanner helper addons. (@anneborcherding)
 * Inform when underscore-formatted options are used in client arg. (@jrblixt)
-
+* Fixed the web UI showing blank page on clicking details tab when server address is missing (@samhita-sopho)
 * --- TODO: add new PRs above this line ---
 
 * ... and various other fixes, documentation improvements, dependency version bumps, etc.
diff --git a/web/src/js/__tests__/components/FlowView/DetailsSpec.js b/web/src/js/__tests__/components/FlowView/DetailsSpec.js
index 1b0192cff..51be1ca72 100644
--- a/web/src/js/__tests__/components/FlowView/DetailsSpec.js
+++ b/web/src/js/__tests__/components/FlowView/DetailsSpec.js
@@ -47,4 +47,24 @@ describe('Details Component', () => {
             tree = details.toJSON()
         expect(tree).toMatchSnapshot()
     })
+
+    it('should render correctly when server address is missing', () => {
+        let tflowServerAddressNull = tflow
+
+        tflowServerAddressNull.server_conn.address = null
+        tflowServerAddressNull.server_conn.ip_address = null
+        tflowServerAddressNull.server_conn.alpn_proto_negotiated = null
+        tflowServerAddressNull.server_conn.sni = null
+        tflowServerAddressNull.server_conn.ssl_established = false
+        tflowServerAddressNull.server_conn.tls_version = null
+        tflowServerAddressNull.server_conn.timestamp_tcp_setup = null
+        tflowServerAddressNull.server_conn.timestamp_ssl_setup = null
+        tflowServerAddressNull.server_conn.timestamp_start = null
+        tflowServerAddressNull.server_conn.timestamp_end = null
+        
+        let details = renderer.create(<Details flow={tflowServerAddressNull}/>),
+            tree = details.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
 })
diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
index 5b3bc748a..94b4cef9d 100644
--- a/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
+++ b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
@@ -237,6 +237,123 @@ exports[`Details Component should render correctly 1`] = `
 </section>
 `;
 
+exports[`Details Component should render correctly when server address is missing 1`] = `
+<section
+  className="detail"
+>
+  <h4>
+    Client Connection
+  </h4>
+  <table
+    className="connection-table"
+  >
+    <tbody>
+      <tr>
+        <td>
+          Address:
+        </td>
+        <td>
+          127.0.0.1:22
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <abbr
+            title="TLS Server Name Indication"
+          >
+            TLS SNI:
+          </abbr>
+        </td>
+        <td>
+          address
+        </td>
+      </tr>
+      <tr>
+        <td>
+          TLS version:
+        </td>
+        <td>
+          TLSv1.2
+        </td>
+      </tr>
+      <tr>
+        <td>
+          cipher name:
+        </td>
+        <td>
+          cipher
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <abbr
+            title="ALPN protocol negotiated"
+          >
+            ALPN:
+          </abbr>
+        </td>
+        <td>
+          http/1.1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div />
+  <div>
+    <h4>
+      Timing
+    </h4>
+    <table
+      className="timing-table"
+    >
+      <tbody>
+        <tr />
+        <tr />
+        <tr />
+        <tr />
+        <tr />
+        <tr>
+          <td>
+            Client conn. established
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:01.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Client conn. SSL handshake
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:02.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            First response byte
+            :
+          </td>
+          <td>
+            2017-05-21 12:38:32.481
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Response complete
+            :
+          </td>
+          <td>
+            2017-05-21 12:38:32.481
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+`;
+
 exports[`TimeStamp Component should render correctly 1`] = `
 <tr>
   <td>
diff --git a/web/src/js/components/FlowView/Details.jsx b/web/src/js/components/FlowView/Details.jsx
index a09cf0d74..f9c615922 100644
--- a/web/src/js/components/FlowView/Details.jsx
+++ b/web/src/js/components/FlowView/Details.jsx
@@ -20,14 +20,14 @@ export function TimeStamp({ t, deltaTo, title }) {
     )
 }
 
-export function ConnectionInfo({ conn }) {
+export function ConnectionInfo({ conn }) {    
     return (
         <table className="connection-table">
             <tbody>
-                <tr key="address">
+                    <tr key="address">
                     <td>Address:</td>
                     <td>{conn.address.join(':')}</td>
-                </tr>
+                </tr>      
                 {conn.sni && (
                     <tr key="sni">
                         <td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td>
@@ -136,9 +136,13 @@ export default function Details({ flow }) {
             <h4>Client Connection</h4>
             <ConnectionInfo conn={flow.client_conn}/>
 
-            <h4>Server Connection</h4>
-            <ConnectionInfo conn={flow.server_conn}/>
-
+            {flow.server_conn.address && 
+                    [
+                        <h4>Server Connection</h4>,
+                        <ConnectionInfo conn={flow.server_conn}/>
+                    ]    
+            }
+            
             <CertificateInfo flow={flow}/>
 
             <Timing flow={flow}/>