[web] show proxy address, add websocket toggle

.gitattributes

@@ -1,2 +1,2 @@
-mitmproxy/web/static/**/* -diff
+mitmproxy/tools/web/static/**/* -diff
 web/src/js/filt/filt.js -diff

mitmproxy/tools/web/app.py

@@ -376,19 +376,22 @@ def get(self):
             no_upstream_cert=self.master.options.no_upstream_cert,
             rawtcp=self.master.options.rawtcp,
             http2=self.master.options.http2,
+            websocket=self.master.options.websocket,
             anticache=self.master.options.anticache,
             anticomp=self.master.options.anticomp,
             stickyauth=self.master.options.stickyauth,
             stickycookie=self.master.options.stickycookie,
             stream=self.master.options.stream_large_bodies,
-            contentViews=[v.name.replace(' ', '_') for v in contentviews.views]
+            contentViews=[v.name.replace(' ', '_') for v in contentviews.views],
+            listen_host=self.master.options.listen_host,
+            listen_port=self.master.options.listen_port,
         ))
 
     def put(self):
         update = self.json
         option_whitelist = {
             "intercept", "showhost", "no_upstream_cert",
-            "rawtcp", "http2", "anticache", "anticomp",
+            "rawtcp", "http2", "websocket", "anticache", "anticomp",
             "stickycookie", "stickyauth", "stream_large_bodies"
         }
         for k in update:

mitmproxy/tools/web/master.py

@@ -10,6 +10,7 @@
 from mitmproxy.addons import intercept
 from mitmproxy.addons import termlog
 from mitmproxy.addons import view
+from mitmproxy.options import Options  # noqa
 from mitmproxy.tools.web import app
 
 

web/src/js/components/Footer.jsx

@@ -7,7 +7,8 @@ Footer.propTypes = {
 }
 
 function Footer({ settings }) {
-    let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream_large_bodies} = settings;
+    let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, websocket, anticache, anticomp,
+            stickyauth, stickycookie, stream_large_bodies, listen_host, listen_port} = settings;
     return (
         <footer>
             {mode && mode != "regular" && (
@@ -25,8 +26,11 @@ function Footer({ settings }) {
             {rawtcp && (
                 <span className="label label-success">raw-tcp</span>
             )}
-            {!http2 && (
-                <span className="label label-success">no-http2</span>
+            {http2 && (
+                <span className="label label-success">http2</span>
+            )}
+            {!websocket && (
+                <span className="label label-success">no-websocket</span>
             )}
             {anticache && (
                 <span className="label label-success">anticache</span>
@@ -43,6 +47,11 @@ function Footer({ settings }) {
             {stream_large_bodies && (
                 <span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
             )}
+            <div className="pull-right">
+            <span className="label label-primary" title="HTTP Proxy Server Address">
+            [{listen_host || "*"}:{listen_port}]
+            </span>
+            </div>
         </footer>
     )
 }

web/src/js/components/Header/OptionMenu.jsx

@@ -31,6 +31,10 @@ function OptionMenu({ settings, updateSettings }) {
                     checked={settings.http2}
                     onToggle={() => updateSettings({ http2: !settings.http2 })}
                 />
+                <ToggleButton text="websocket"
+                    checked={settings.websocket}
+                    onToggle={() => updateSettings({ websocket: !settings.websocket })}
+                />
                 <ToggleButton text="anticache"
                     checked={settings.anticache}
                     onToggle={() => updateSettings({ anticache: !settings.anticache })}