Merge pull request #4521 from sanlengjingvv/remote-ip

Display server ip address in flow detail tab

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<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e};exports.TimeStamp=TimeStamp,exports.ConnectionInfo=ConnectionInfo,exports.CertificateInfo=CertificateInfo,exports.Timing=Timing,exports.default=Details;var _react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../../utils.js");
+"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)),t.ip_address&&_react2.default.createElement("tr",{key:"ip_address"},_react2.default.createElement("td",null,"Resolved address:"),_react2.default.createElement("td",null,t.ip_address.join(":"))),t.source_address&&_react2.default.createElement("tr",{key:"source_address"},_react2.default.createElement("td",null,"Source address:"),_react2.default.createElement("td",null,t.source_address.join(":")))))}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,l=t.request,n=t.response,c=[{title:"Server conn. initiated",t:a.timestamp_start,deltaTo:l.timestamp_start},{title:"Server conn. TCP handshake",t:a.timestamp_tcp_setup,deltaTo:l.timestamp_start},{title:"Server conn. SSL handshake",t:a.timestamp_ssl_setup,deltaTo:l.timestamp_start},{title:"Client conn. established",t:r.timestamp_start,deltaTo:l.timestamp_start},{title:"Client conn. SSL handshake",t:r.timestamp_ssl_setup,deltaTo:l.timestamp_start},{title:"First request byte",t:l.timestamp_start},{title:"Request complete",t:l.timestamp_end,deltaTo:l.timestamp_start},n&&{title:"First response byte",t:n.timestamp_start,deltaTo:l.timestamp_start},n&&{title:"Response complete",t:n.timestamp_end,deltaTo:l.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}),t.server_conn.address&&[_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<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e};exports.TimeStamp=TimeStamp,exports.ConnectionInfo=ConnectionInfo,exports.CertificateInfo=CertificateInfo,exports.Timing=Timing,exports.default=Details;var _react=require("react"),_react2=_interopRequireDefault(_react),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../../utils.js");
 
 },{"../../utils.js":70,"lodash":"lodash","react":"react"}],22:[function(require,module,exports){
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _objectWithoutProperties(e,t){var r={};for(var n in e)t.indexOf(n)>=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;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_ValueEditor=require("../ValueEditor/ValueEditor"),_ValueEditor2=_interopRequireDefault(_ValueEditor),_utils=require("../../utils"),HeaderEditor=exports.HeaderEditor=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.onKeyDown=r.onKeyDown.bind(r),r}return _inherits(t,_react.Component),_createClass(t,[{key:"render",value:function(){var e=this.props,t=(e.onTab,_objectWithoutProperties(e,["onTab"]));return _react2.default.createElement(_ValueEditor2.default,_extends({},t,{onKeyDown:this.onKeyDown}))}},{key:"focus",value:function(){_reactDom2.default.findDOMNode(this).focus()}},{key:"onKeyDown",value:function(e){switch(e.keyCode){case _utils.Key.BACKSPACE:var t=window.getSelection().getRangeAt(0);0===t.startOffset&&0===t.endOffset&&this.props.onRemove(e);break;case _utils.Key.ENTER:case _utils.Key.TAB:e.shiftKey||this.props.onTab(e)}}}]),t}(),Headers=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return _inherits(t,_react.Component),_createClass(t,[{key:"onChange",value:function(e,t,r){var n=_.cloneDeep(this.props.message[this.props.type]);n[e][t]=r,n[e][0]||n[e][1]||(1===n.length?(n[0][0]="Name",n[0][1]="Value"):(n.splice(e,1),e===n.length&&(this._nextSel=e-1+"-value"))),this.props.onChange(n)}},{key:"edit",value:function(){this.refs["0-key"].focus()}},{key:"onTab",value:function(e,t,r){var n=this.props.message[this.props.type];if(0!==t)if(e===n.length-1){r.preventDefault();var o=_.cloneDeep(this.props.message[this.props.type]);o.push(["Name","Value"]),this.props.onChange(o),this._nextSel=e+1+"-key"}else this._nextSel=e+1+"-key";else this._nextSel=e+"-value"}},{key:"componentDidUpdate",value:function(){this._nextSel&&this.refs[this._nextSel]&&(this.refs[this._nextSel].focus(),this._nextSel=void 0)}},{key:"onRemove",value:function(e,t,r){1===t?(r.preventDefault(),this.refs[e+"-key"].focus()):e>0&&(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;

web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap

@@ -155,6 +155,22 @@ exports[`Details Component should render correctly 1`] = `
           TLSv1.2
         </td>
       </tr>
+      <tr>
+        <td>
+          Resolved address:
+        </td>
+        <td>
+          192.168.0.1:22
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Source address:
+        </td>
+        <td>
+          address:22
+        </td>
+      </tr>
     </tbody>
   </table>
   <div />

web/src/js/components/FlowView/Details.jsx

@@ -52,6 +52,18 @@ export function ConnectionInfo({ conn }) {
                         <td>{conn.alpn_proto_negotiated}</td>
                     </tr>
                 )}
+                {conn.ip_address && (
+                    <tr key="ip_address">
+                        <td>Resolved address:</td>
+                        <td>{conn.ip_address.join(':')}</td>
+                    </tr>
+                )}
+                {conn.source_address && (
+                    <tr key="source_address">
+                        <td>Source address:</td>
+                        <td>{conn.source_address.join(':')}</td>
+                    </tr>
+                )}
             </tbody>
         </table>
     )