From 71ccbd5607101a108295332faf3ce48d78631eba Mon Sep 17 00:00:00 2001 From: sanlengjingvv Date: Mon, 22 Mar 2021 14:17:02 +0800 Subject: [PATCH] Display server ip address in flow detail tab --- mitmproxy/tools/web/static/app.js | 2 +- .../FlowView/__snapshots__/DetailsSpec.js.snap | 16 ++++++++++++++++ web/src/js/components/FlowView/Details.jsx | 12 ++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/mitmproxy/tools/web/static/app.js b/mitmproxy/tools/web/static/app.js index e02d7eb69..f97d73054 100644 --- a/mitmproxy/tools/web/static/app.js +++ b/mitmproxy/tools/web/static/app.js @@ -59,7 +59,7 @@ "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function FlowView(e){var r=e.flow,a=e.tabName,t=e.selectTab,s=["request","response","error"].filter(function(e){return r[e]});s.push("details"),s.indexOf(a)<0&&(a="response"===a&&r.error?"error":"error"===a&&r.response?"response":s[0]);var l=allTabs[_lodash2.default.capitalize(a)];return _react2.default.createElement("div",{className:"flow-detail"},_react2.default.createElement(_Nav2.default,{tabs:s,active:a,onSelectTab:t}),_react2.default.createElement(l,{flow:r}))}Object.defineProperty(exports,"__esModule",{value:!0}),exports.allTabs=void 0;var _react=require("react"),_react2=_interopRequireDefault(_react),_reactRedux=require("react-redux"),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_Nav=require("./FlowView/Nav"),_Nav2=_interopRequireDefault(_Nav),_Messages=require("./FlowView/Messages"),_Details=require("./FlowView/Details"),_Details2=_interopRequireDefault(_Details),_flow=require("../ducks/ui/flow"),allTabs=exports.allTabs={Request:_Messages.Request,Response:_Messages.Response,Error:_Messages.ErrorView,Details:_Details2.default};exports.default=(0,_reactRedux.connect)(function(e){return{flow:e.flows.byId[e.flows.selected[0]],tabName:e.ui.flow.tab}},{selectTab:_flow.selectTab})(FlowView); },{"../ducks/ui/flow":60,"./FlowView/Details":21,"./FlowView/Messages":23,"./FlowView/Nav":24,"lodash":"lodash","react":"react","react-redux":"react-redux"}],21:[function(require,module,exports){ -"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function TimeStamp(e){var t=e.t,a=e.deltaTo,r=e.title;return t?_react2.default.createElement("tr",null,_react2.default.createElement("td",null,r,":"),_react2.default.createElement("td",null,(0,_utils.formatTimeStamp)(t),a&&_react2.default.createElement("span",{className:"text-muted"},"(",(0,_utils.formatTimeDelta)(1e3*(t-a)),")"))):_react2.default.createElement("tr",null)}function ConnectionInfo(e){var t=e.conn;return _react2.default.createElement("table",{className:"connection-table"},_react2.default.createElement("tbody",null,_react2.default.createElement("tr",{key:"address"},_react2.default.createElement("td",null,"Address:"),_react2.default.createElement("td",null,t.address.join(":"))),t.sni&&_react2.default.createElement("tr",{key:"sni"},_react2.default.createElement("td",null,_react2.default.createElement("abbr",{title:"TLS Server Name Indication"},"TLS SNI:")),_react2.default.createElement("td",null,t.sni)),t.tls_version&&_react2.default.createElement("tr",{key:"tls_version"},_react2.default.createElement("td",null,"TLS version:"),_react2.default.createElement("td",null,t.tls_version)),t.cipher_name&&_react2.default.createElement("tr",{key:"cipher_name"},_react2.default.createElement("td",null,"cipher name:"),_react2.default.createElement("td",null,t.cipher_name)),t.alpn_proto_negotiated&&_react2.default.createElement("tr",{key:"ALPN"},_react2.default.createElement("td",null,_react2.default.createElement("abbr",{title:"ALPN protocol negotiated"},"ALPN:")),_react2.default.createElement("td",null,t.alpn_proto_negotiated))))}function CertificateInfo(e){var t=e.flow;return _react2.default.createElement("div",null,t.client_conn.cert&&[_react2.default.createElement("h4",{key:"name"},"Client Certificate"),_react2.default.createElement("pre",{key:"value",style:{maxHeight:100}},t.client_conn.cert)],t.server_conn.cert&&[_react2.default.createElement("h4",{key:"name"},"Server Certificate"),_react2.default.createElement("pre",{key:"value",style:{maxHeight:100}},t.server_conn.cert)])}function Timing(e){var t=e.flow,a=t.server_conn,r=t.client_conn,n=t.request,l=t.response,c=[{title:"Server conn. initiated",t:a.timestamp_start,deltaTo:n.timestamp_start},{title:"Server conn. TCP handshake",t:a.timestamp_tcp_setup,deltaTo:n.timestamp_start},{title:"Server conn. SSL handshake",t:a.timestamp_ssl_setup,deltaTo:n.timestamp_start},{title:"Client conn. established",t:r.timestamp_start,deltaTo:n.timestamp_start},{title:"Client conn. SSL handshake",t:r.timestamp_ssl_setup,deltaTo:n.timestamp_start},{title:"First request byte",t:n.timestamp_start},{title:"Request complete",t:n.timestamp_end,deltaTo:n.timestamp_start},l&&{title:"First response byte",t:l.timestamp_start,deltaTo:n.timestamp_start},l&&{title:"Response complete",t:l.timestamp_end,deltaTo:n.timestamp_start}];return _react2.default.createElement("div",null,_react2.default.createElement("h4",null,"Timing"),_react2.default.createElement("table",{className:"timing-table"},_react2.default.createElement("tbody",null,c.filter(function(e){return e}).sort(function(e,t){return e.t-t.t}).map(function(e){return _react2.default.createElement(TimeStamp,_extends({key:e.title},e))}))))}function Details(e){var t=e.flow;return _react2.default.createElement("section",{className:"detail"},_react2.default.createElement("h4",null,"Client Connection"),_react2.default.createElement(ConnectionInfo,{conn:t.client_conn}),_react2.default.createElement("h4",null,"Server Connection"),_react2.default.createElement(ConnectionInfo,{conn:t.server_conn}),_react2.default.createElement(CertificateInfo,{flow:t}),_react2.default.createElement(Timing,{flow:t}))}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.HeaderEditor=void 0;var _extends=Object.assign||function(e){for(var t=1;t0&&(r.preventDefault(),this.refs[e-1+"-value"].focus())}},{key:"render",value:function(){var e=this,t=this.props,r=t.message,n=t.readonly;return r[this.props.type]?_react2.default.createElement("table",{className:"header-table"},_react2.default.createElement("tbody",null,r[this.props.type].map(function(t,r){return _react2.default.createElement("tr",{key:r},_react2.default.createElement("td",{className:"header-name"},_react2.default.createElement(HeaderEditor,{ref:r+"-key",content:t[0],readonly:n,onDone:function(t){return e.onChange(r,0,t)},onRemove:function(t){return e.onRemove(r,0,t)},onTab:function(t){return e.onTab(r,0,t)}}),_react2.default.createElement("span",{className:"header-colon"},":")),_react2.default.createElement("td",{className:"header-value"},_react2.default.createElement(HeaderEditor,{ref:r+"-value",content:t[1],readonly:n,onDone:function(t){return e.onChange(r,1,t)},onRemove:function(t){return e.onRemove(r,1,t)},onTab:function(t){return e.onTab(r,1,t)}})))}))):_react2.default.createElement("table",{className:"header-table"},_react2.default.createElement("tbody",null))}}]),t}();Headers.propTypes={onChange:_propTypes2.default.func.isRequired,message:_propTypes2.default.object.isRequired,type:_propTypes2.default.string.isRequired},Headers.defaultProps={type:"headers"},exports.default=Headers; 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 94b4cef9d..418567758 100644 --- a/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap +++ b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap @@ -155,6 +155,22 @@ exports[`Details Component should render correctly 1`] = ` TLSv1.2 + + + Resolved address: + + + 192.168.0.1:22 + + + + + Source address: + + + address:22 + +
diff --git a/web/src/js/components/FlowView/Details.jsx b/web/src/js/components/FlowView/Details.jsx index f9c615922..d231afc71 100644 --- a/web/src/js/components/FlowView/Details.jsx +++ b/web/src/js/components/FlowView/Details.jsx @@ -52,6 +52,18 @@ export function ConnectionInfo({ conn }) { {conn.alpn_proto_negotiated} )} + {conn.ip_address && ( + + Resolved address: + {conn.ip_address.join(':')} + + )} + {conn.source_address && ( + + Source address: + {conn.source_address.join(':')} + + )} )