Rooba
/
mitmproxy
mirror of https://github.com/mitmproxy/mitmproxy.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Web UI shows blank for details tab when server address is blank (#4248) 

* updated changelog

* Web UI appears blank fix

* Updated DetailsSpec snapshot
This commit is contained in:
Samhita-sopho 2020-12-06 06:56:53 -06:00 committed by GitHub
parent 1ed3f95067
commit 6846c8db33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 148 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.rst
View File

@ -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.

20
web/src/js/__tests__/components/FlowView/DetailsSpec.js
View File

@ -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()
})
})

117
web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
View File

@ -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>

16
web/src/js/components/FlowView/Details.jsx
View File

@ -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}/>