diff options
Diffstat (limited to 'libmproxy/web')
| -rw-r--r-- | libmproxy/web/__init__.py | 20 | ||||
| -rw-r--r-- | libmproxy/web/app.py | 55 | ||||
| -rw-r--r-- | libmproxy/web/static/css/app.css | 11 | ||||
| -rw-r--r-- | libmproxy/web/static/js/app.js | 133 |
4 files changed, 154 insertions, 65 deletions
diff --git a/libmproxy/web/__init__.py b/libmproxy/web/__init__.py index 4c36c009..ec3576db 100644 --- a/libmproxy/web/__init__.py +++ b/libmproxy/web/__init__.py @@ -123,7 +123,7 @@ class WebMaster(flow.FlowMaster): def __init__(self, server, options): self.options = options super(WebMaster, self).__init__(server, WebState()) - self.app = app.Application(self.state, self.options.wdebug) + self.app = app.Application(self, self.options.wdebug) def tick(self): flow.FlowMaster.tick(self, self.masterq, timeout=0) @@ -144,17 +144,23 @@ class WebMaster(flow.FlowMaster): except (Stop, KeyboardInterrupt): self.shutdown() + def _process_flow(self, f): + if self.state.intercept and self.state.intercept(f) and not f.request.is_replay: + f.intercept(self) + else: + f.reply() + def handle_request(self, f): super(WebMaster, self).handle_request(f) - if f: - f.reply() - return f + self._process_flow(f) def handle_response(self, f): super(WebMaster, self).handle_response(f) - if f: - f.reply() - return f + self._process_flow(f) + + def handle_error(self, f): + super(WebMaster, self).handle_error(f) + self._process_flow(f) def add_event(self, e, level="info"): super(WebMaster, self).add_event(e, level) diff --git a/libmproxy/web/app.py b/libmproxy/web/app.py index 37da4a42..7f1964ae 100644 --- a/libmproxy/web/app.py +++ b/libmproxy/web/app.py @@ -32,12 +32,30 @@ class WebSocketEventBroadcaster(tornado.websocket.WebSocketHandler): logging.error("Error sending message", exc_info=True) +class ClientConnection(WebSocketEventBroadcaster): + connections = set() + + class Flows(tornado.web.RequestHandler): def get(self): self.write(dict( data=[f.get_state(short=True) for f in self.application.state.flows] )) + +class AcceptFlows(tornado.web.RequestHandler): + def post(self): + self.application.state.flows.accept_all(self.application.master) + + +class AcceptFlow(tornado.web.RequestHandler): + def post(self, flow_id): + flow_id = str(flow_id) + for flow in self.application.state.flows: + if flow.id == flow_id: + flow.accept_intercept(self.application.master) + break + class Events(tornado.web.RequestHandler): def get(self): self.write(dict( @@ -49,28 +67,53 @@ class Settings(tornado.web.RequestHandler): def get(self): self.write(dict( data=dict( - showEventLog=True + showEventLog=True, + intercept=self.application.state.intercept_txt ) )) + def put(self, *update, **kwargs): + update = {} + for k, v in self.request.arguments.iteritems(): + if len(v) != 1: + print "Warning: Unknown length for setting {}: {}".format(k, v) + continue + + if k == "_xsrf": + continue + elif k == "intercept": + self.application.state.set_intercept(v[0]) + update[k] = v[0] + else: + print "Warning: Unknown setting {}: {}".format(k, v) + + ClientConnection.broadcast( + type="settings", + cmd="update", + data=update + ) + class Clear(tornado.web.RequestHandler): def post(self): self.application.state.clear() -class ClientConnection(WebSocketEventBroadcaster): - connections = set() +class Application(tornado.web.Application): + @property + def state(self): + return self.master.state -class Application(tornado.web.Application): - def __init__(self, state, debug): - self.state = state + def __init__(self, master, debug): + self.master = master handlers = [ (r"/", IndexHandler), (r"/updates", ClientConnection), (r"/events", Events), (r"/flows", Flows), + (r"/flows/accept", AcceptFlows), + (r"/flows/([0-9a-f\-]+)/accept", AcceptFlow), (r"/settings", Settings), (r"/clear", Clear), ] diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css index 5af87b67..4faf739b 100644 --- a/libmproxy/web/static/css/app.css +++ b/libmproxy/web/static/css/app.css @@ -174,7 +174,16 @@ header .menu { white-space: nowrap; text-overflow: ellipsis; } -.flow-table tr .col-tls { +.flow-table tr.intercepted:not(.has-response) .col-path, +.flow-table tr.intercepted:not(.has-response) .col-method { + color: #ff8000; +} +.flow-table tr.intercepted.has-response .col-status, +.flow-table tr.intercepted.has-response .col-size, +.flow-table tr.intercepted.has-response .col-time { + color: #ff8000; +} +.flow-table .col-tls { width: 10px; } .flow-table .col-tls-https { diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 4347ada5..440eec5d 100644 --- a/libmproxy/web/static/js/app.js +++ b/libmproxy/web/static/js/app.js @@ -90,11 +90,11 @@ var Key = { TAB: 9, SPACE: 32, BACKSPACE: 8, - J: 74, - K: 75, - H: 72, - L: 76 }; +// Add A-Z +for(var i=65; i <= 90; i++){ + Key[String.fromCharCode(i)] = i; +} var formatSize = function (bytes) { @@ -233,7 +233,11 @@ var ConnectionActions = { var SettingsActions = { update: function (settings) { - //TODO: Update server. + jQuery.ajax({ + type: "PUT", + url: "/settings", + data: settings + }); //Facebook Flux: We do an optimistic update on the client already. AppDispatcher.dispatchViewAction({ @@ -2355,7 +2359,6 @@ _.extend(StoreView.prototype, EventEmitter.prototype, { } } }); - function Connection(url) { if (url[0] === "/") { @@ -2495,7 +2498,7 @@ var xsrf = $.param({_xsrf: getCookie("_xsrf")}); //Tornado XSRF Protection. $.ajaxPrefilter(function (options) { - if (options.type === "post" && options.url[0] === "/") { + if (["post","put","delete"].indexOf(options.type.toLowerCase()) >= 0 && options.url[0] === "/") { if (options.data) { options.data += ("&" + xsrf); } else { @@ -2586,10 +2589,9 @@ var VirtualScrollMixin = { }; var FilterInput = React.createClass({displayName: 'FilterInput', getInitialState: function () { - // Focus: Show popover - // Mousefocus: Mouse over Tooltip - // onBlur is triggered before click on tooltip, - // hiding the tooltip before link is clicked. + // Consider both focus and mouseover for showing/hiding the tooltip, + // because onBlur of the input is triggered before the click on the tooltip + // finalized, hiding the tooltip just as the user clicks on it. return { value: this.props.value, focus: false, @@ -2604,16 +2606,14 @@ var FilterInput = React.createClass({displayName: 'FilterInput', this.setState({ value: nextValue }); - try { - Filt.parse(nextValue); - } catch (err) { - return; + // Only propagate valid filters upwards. + if (this.isValid(nextValue)) { + this.props.onChange(nextValue); } - this.props.onChange(nextValue); }, - isValid: function () { + isValid: function (filt) { try { - Filt.parse(this.state.value); + Filt.parse(filt || this.state.value); return true; } catch (e) { return false; @@ -2650,16 +2650,14 @@ var FilterInput = React.createClass({displayName: 'FilterInput', this.setState({mousefocus: false}); }, onKeyDown: function (e) { - if (e.target.value === "" && - e.keyCode === Key.BACKSPACE) { - e.preventDefault(); - this.remove(); + if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) { + this.blur(); + // If closed using ESC/ENTER, hide the tooltip. + this.setState({mousefocus: false}); } }, - remove: function () { - if (this.props.onRemove) { - this.props.onRemove(); - } + blur: function () { + this.refs.input.getDOMNode().blur(); }, focus: function () { this.refs.input.getDOMNode().select(); @@ -2686,7 +2684,7 @@ var FilterInput = React.createClass({displayName: 'FilterInput', React.createElement("span", {className: "input-group-addon"}, React.createElement("i", {className: icon, style: {color: this.props.color}}) ), - React.createElement("input", {type: "text", placeholder: "filter expression", className: "form-control", + React.createElement("input", {type: "text", placeholder: this.props.placeholder, className: "form-control", ref: "input", onChange: this.onChange, onFocus: this.onFocus, @@ -2701,12 +2699,6 @@ var FilterInput = React.createClass({displayName: 'FilterInput', var MainMenu = React.createClass({displayName: 'MainMenu', mixins: [Navigation, State], - getInitialState: function () { - return { - filter: this.getQuery()[Query.FILTER] || "", - highlight: this.getQuery()[Query.HIGHLIGHT] || "" - }; - }, statics: { title: "Traffic", route: "flows" @@ -2717,39 +2709,59 @@ var MainMenu = React.createClass({displayName: 'MainMenu', }); }, clearFlows: function () { - $.post("/clear"); + jQuery.post("/clear"); }, - applyFilter: function (filter, highlight) { + onFilterChange: function (val) { var d = {}; - d[Query.FILTER] = filter; - d[Query.HIGHLIGHT] = highlight; + d[Query.FILTER] = val; this.setQuery(d); }, - onFilterChange: function (val) { - this.setState({filter: val}); - this.applyFilter(val, this.state.highlight); - }, onHighlightChange: function (val) { - this.setState({highlight: val}); - this.applyFilter(this.state.filter, val); + var d = {}; + d[Query.HIGHLIGHT] = val; + this.setQuery(d); + }, + onInterceptChange: function (val) { + SettingsActions.update({intercept: val}); }, render: function () { + var filter = this.getQuery()[Query.FILTER] || ""; + var highlight = this.getQuery()[Query.HIGHLIGHT] || ""; + var intercept = this.props.settings.intercept || ""; + return ( React.createElement("div", null, React.createElement("button", {className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, React.createElement("i", {className: "fa fa-database"}), " Display Event Log" ), - " ", + React.createElement("span", null, " "), React.createElement("button", {className: "btn btn-default", onClick: this.clearFlows}, React.createElement("i", {className: "fa fa-eraser"}), " Clear Flows" ), - " ", + React.createElement("span", null, " "), React.createElement("form", {className: "form-inline", style: {display: "inline"}}, - React.createElement(FilterInput, {type: "filter", color: "black", value: this.state.filter, onChange: this.onFilterChange}), - " ", - React.createElement(FilterInput, {type: "tag", color: "hsl(48, 100%, 50%)", value: this.state.highlight, onChange: this.onHighlightChange}) + React.createElement(FilterInput, { + placeholder: "Filter", + type: "filter", + color: "black", + value: filter, + onChange: this.onFilterChange}), + React.createElement("span", null, " "), + React.createElement(FilterInput, { + placeholder: "Highlight", + type: "tag", + color: "hsl(48, 100%, 50%)", + value: highlight, + onChange: this.onHighlightChange}), + React.createElement("span", null, " "), + React.createElement(FilterInput, { + placeholder: "Intercept", + type: "pause", + color: "hsl(208, 56%, 53%)", + value: intercept, + onChange: this.onInterceptChange}) ) ) ); @@ -3067,6 +3079,15 @@ var FlowRow = React.createClass({displayName: 'FlowRow', if (this.props.highlighted) { className += " highlighted"; } + if (flow.intercepted) { + className += " intercepted"; + } + if (flow.request) { + className += " has-request"; + } + if (flow.response) { + className += " has-response"; + } return ( React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow)}, @@ -3544,12 +3565,12 @@ var MainView = React.createClass({displayName: 'MainView', var filt = Filt.parse(this.getQuery()[Query.FILTER] || ""); var highlightStr = this.getQuery()[Query.HIGHLIGHT]; var highlight = highlightStr ? Filt.parse(highlightStr) : false; - } catch(e){ + } catch (e) { console.error("Error when processing filter: " + e); } return function filter_and_highlight(flow) { - if(!this._highlight){ + if (!this._highlight) { this._highlight = {}; } this._highlight[flow.id] = highlight && highlight(flow); @@ -3671,6 +3692,13 @@ var MainView = React.createClass({displayName: 'MainView', this.refs.flowDetails.nextTab(+1); } break; + case Key.A: + if (e.shiftKey) { + $.post("/flows/accept"); + } else if(this.getSelected()) { + $.post("/flows/" + this.getSelected().id + "/accept"); + } + break; default: console.debug("keydown", e.keyCode); return; @@ -3855,9 +3883,12 @@ var EventLog = React.createClass({displayName: 'EventLog', var Footer = React.createClass({displayName: 'Footer', render: function () { var mode = this.props.settings.mode; + var intercept = this.props.settings.intercept; return ( React.createElement("footer", null, - mode != "regular" ? React.createElement("span", {className: "label label-success"}, mode, " mode") : null + mode != "regular" ? React.createElement("span", {className: "label label-success"}, mode, " mode") : null, + " ", + intercept ? React.createElement("span", {className: "label label-success"}, "Intercept: ", intercept) : null ) ); } |