From 27f4c6d394f611b2b975a99751a306e09d17d68c Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 7 Aug 2017 10:53:13 +0800 Subject: [PATCH 1/9] [web] Add static.js to index.html, containing MITMWEB_STATIC var. --- mitmproxy/tools/web/static/static.js | 1 + web/src/templates/index.html | 1 + 2 files changed, 2 insertions(+) create mode 100644 mitmproxy/tools/web/static/static.js diff --git a/mitmproxy/tools/web/static/static.js b/mitmproxy/tools/web/static/static.js new file mode 100644 index 000000000..4ffedbcf2 --- /dev/null +++ b/mitmproxy/tools/web/static/static.js @@ -0,0 +1 @@ +MITMWEB_STATIC = false; \ No newline at end of file diff --git a/web/src/templates/index.html b/web/src/templates/index.html index db9d2ecb7..d2d017764 100644 --- a/web/src/templates/index.html +++ b/web/src/templates/index.html @@ -7,6 +7,7 @@ + From 94a0b82ceedf1847a9bc67a6338369583f8410f9 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 7 Aug 2017 10:57:12 +0800 Subject: [PATCH 2/9] [web] Add static backend. --- web/src/js/app.jsx | 7 ++++- web/src/js/backends/static.js | 54 +++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 web/src/js/backends/static.js diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx index 767201248..ee660fd6a 100644 --- a/web/src/js/app.jsx +++ b/web/src/js/app.jsx @@ -9,6 +9,7 @@ import rootReducer from './ducks/index' import { add as addLog } from './ducks/eventLog' import useUrlState from './urlState' import WebSocketBackend from './backends/websocket' +import StaticBackend from './backends/static' import { logger } from 'redux-logger' @@ -25,7 +26,11 @@ const store = createStore( ) useUrlState(store) -window.backend = new WebSocketBackend(store) +if (MITMWEB_STATIC) { + window.backend = new StaticBackend(store) +} else { + window.backend = new WebSocketBackend(store) +} window.addEventListener('error', msg => { store.dispatch(addLog(msg)) diff --git a/web/src/js/backends/static.js b/web/src/js/backends/static.js new file mode 100644 index 000000000..676468ce5 --- /dev/null +++ b/web/src/js/backends/static.js @@ -0,0 +1,54 @@ +/* + * This backend uses the REST API only to host static instances, + * without any Websocket connection. + */ +import { fetchApi } from "../utils" + +const CMD_RESET = 'reset' + +export default class StaticBackend { + constructor(store) { + this.activeFetches = {} + this.store = store + this.onOpen() + } + + onOpen() { + this.fetchData("settings") + this.fetchData("flows") + this.fetchData("events") + this.fetchData("options") + } + + fetchData(resource) { + let queue = [] + this.activeFetches[resource] = queue + fetchApi(`/${resource}`) + .then(res => res.json()) + .then(json => { + if (this.activeFetches[resource] === queue) + this.receive(resource, json) + }) + } + + onMessage(msg) { + if (msg.cmd === CMD_RESET) { + return this.fetchData(msg.resource) + } + if (msg.resource in this.activeFetches) { + this.activeFetches[msg.resource].push(msg) + } else { + let type = `${msg.resource}_${msg.cmd}`.toUpperCase() + this.store.dispatch({ type, ...msg}) + } + } + + receive(resource, data) { + let type = `${resource}_RECEIVE`.toUpperCase() + this.store.dispatch({ type, cmd: "receive", resource, data }) + let queue = this.activeFetches[resource] + delete this.activeFetches[resource] + queue.forEach(msg => this.onMessage(msg)) + } + +} From f7b494ccf2a90d8c54df760e5142f34f11f8cf3c Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 7 Aug 2017 11:05:02 +0800 Subject: [PATCH 3/9] [web] Add HideInStatic Component HideInStaic compoent will check the MITMWEB_STATIC var, and hide the responsive components in static mode. --- web/src/js/components/Footer.jsx | 8 +++++--- web/src/js/components/Header.jsx | 5 ++++- web/src/js/components/Header/FileMenu.jsx | 2 +- web/src/js/components/Header/FlowMenu.jsx | 11 +++++++---- web/src/js/components/Header/OptionMenu.jsx | 14 ++++++++++---- web/src/js/components/common/HideInStatic.jsx | 5 +++++ 6 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 web/src/js/components/common/HideInStatic.jsx diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 08d154962..9a2f6cf48 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -49,11 +49,13 @@ function Footer({ settings }) { stream: {formatSize(stream_large_bodies)} )}
- {server && ( + { MITMWEB_STATIC ? + (Static): + server && ( {listen_host||"*"}:{listen_port} - - )} + ) + } v{version} diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index ebe7453c0..9b7354eb5 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -8,6 +8,7 @@ import FileMenu from './Header/FileMenu' import FlowMenu from './Header/FlowMenu' import {setActiveMenu} from '../ducks/ui/header' import ConnectionIndicator from "./Header/ConnectionIndicator" +import HideInStatic from './common/HideInStatic' class Header extends Component { static entries = [MainMenu, OptionMenu] @@ -40,7 +41,9 @@ class Header extends Component { {Entry.title} ))} - + + +
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index 62f721cff..cf3463434 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -5,6 +5,7 @@ import FileChooser from '../common/FileChooser' import Dropdown, {Divider} from '../common/Dropdown' import * as flowsActions from '../../ducks/flows' import * as modalActions from '../../ducks/ui/modal' +import HideInStatic from "../common/HideInStatic"; FileMenu.propTypes = { clearFlows: PropTypes.func.isRequired, @@ -40,7 +41,6 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {  Options - diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 8f1042136..dc8221501 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -4,6 +4,7 @@ import { connect } from "react-redux" import Button from "../common/Button" import { MessageUtils } from "../../flow/utils.js" import * as flowsActions from "../../ducks/flows" +import HideInStatic from "../common/HideInStatic"; FlowMenu.title = 'Flow' @@ -22,7 +23,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow return
return (
-
+
Flow Modification
-
+ +
-
+ +
Interception
-
+
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index b33d578d2..566db42f9 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -3,21 +3,23 @@ import PropTypes from 'prop-types' import { connect } from "react-redux" import { SettingsToggle, EventlogToggle } from "./MenuToggle" import DocsLink from "../common/DocsLink" +import HideInStatic from "../common/HideInStatic"; OptionMenu.title = 'Options' export default function OptionMenu() { return (
-
+
HTTP/2.0 WebSockets Raw TCP
Protocol Support
-
-
+ + +
Disable Caching @@ -28,13 +30,17 @@ export default function OptionMenu() {
HTTP Options
-
+ +
+ Use Host Header + +
View Options
diff --git a/web/src/js/components/common/HideInStatic.jsx b/web/src/js/components/common/HideInStatic.jsx new file mode 100644 index 000000000..9f515c972 --- /dev/null +++ b/web/src/js/components/common/HideInStatic.jsx @@ -0,0 +1,5 @@ +import React from 'react' + +export default function HideInStatic({className, children }) { + return MITMWEB_STATIC ? null : (
{children}
) +} From c6385e81c85447dda96e5c467de182c0ea40fcc9 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 7 Aug 2017 11:08:19 +0800 Subject: [PATCH 4/9] [web] Update tests to ensure they won't be disturbed by static mode --- .../components/Header/FlowMenuSpec.js | 1 + .../components/Header/OptionMenuSpec.js | 1 + .../__snapshots__/OptionMenuSpec.js.snap | 30 +++++++++++-------- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/web/src/js/__tests__/components/Header/FlowMenuSpec.js b/web/src/js/__tests__/components/Header/FlowMenuSpec.js index 1278d8ee4..03b0f59db 100644 --- a/web/src/js/__tests__/components/Header/FlowMenuSpec.js +++ b/web/src/js/__tests__/components/Header/FlowMenuSpec.js @@ -7,6 +7,7 @@ import { TFlow, TStore }from '../../ducks/tutils' import { MessageUtils } from "../../../flow/utils" import { Provider } from 'react-redux' +global.MITMWEB_STATIC = false describe('FlowMenu Component', () => { let actions = { diff --git a/web/src/js/__tests__/components/Header/OptionMenuSpec.js b/web/src/js/__tests__/components/Header/OptionMenuSpec.js index b84fce6e5..729f42f24 100644 --- a/web/src/js/__tests__/components/Header/OptionMenuSpec.js +++ b/web/src/js/__tests__/components/Header/OptionMenuSpec.js @@ -4,6 +4,7 @@ import { Provider } from 'react-redux' import OptionMenu from '../../../components/Header/OptionMenu' import { TStore } from '../../ducks/tutils' +global.MITMWEB_STATIC = false describe('OptionMenu Component', () => { it('should render correctly', () => { diff --git a/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap index 9299e69f2..ec305862f 100644 --- a/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap +++ b/web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap @@ -107,20 +107,24 @@ exports[`OptionMenu Component should render correctly 1`] = ` className="menu-content" >
- +
+ +
Date: Tue, 8 Aug 2017 21:55:57 +0800 Subject: [PATCH 5/9] [web] Update react,react-dom,react-test-renderer to 16-beta.3 --- web/package.json | 6 +++--- web/yarn.lock | 24 ++++++++++++------------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/web/package.json b/web/package.json index a42abf897..d92245302 100644 --- a/web/package.json +++ b/web/package.json @@ -28,11 +28,11 @@ "lodash": "^4.17.4", "mock-xmlhttprequest": "^1.1.0", "prop-types": "^15.5.10", - "react": "^15.5.4", + "react": "16.0.0-beta.3", "react-codemirror": "^1.0.0", - "react-dom": "^15.4.2", + "react-dom": "16.0.0-beta.3", "react-redux": "^5.0.5", - "react-test-renderer": "^15.5.4", + "react-test-renderer": "16.0.0-beta.3", "redux": "^3.6.0", "redux-logger": "^3.0.6", "redux-mock-store": "^1.2.3", diff --git a/web/yarn.lock b/web/yarn.lock index f841e38bd..6efd88858 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -4309,7 +4309,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6: version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" dependencies: @@ -4404,14 +4404,14 @@ react-codemirror@^1.0.0: lodash.isequal "^4.5.0" prop-types "^15.5.4" -react-dom@^15.4.2: - version "15.5.4" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da" +react-dom@16.0.0-beta.3: + version "16.0.0-beta.3" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0-beta.3.tgz#6b662e8db127d14565b98799c13532044c7768b9" dependencies: fbjs "^0.8.9" loose-envify "^1.1.0" object-assign "^4.1.0" - prop-types "~15.5.7" + prop-types "^15.5.6" react-redux@^5.0.5: version "5.0.5" @@ -4425,21 +4425,21 @@ react-redux@^5.0.5: loose-envify "^1.1.0" prop-types "^15.5.10" -react-test-renderer@^15.5.4: - version "15.5.4" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc" +react-test-renderer@16.0.0-beta.3: + version "16.0.0-beta.3" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0-beta.3.tgz#334a97818c0fd841bb377da34bc2e5a0284772fb" dependencies: fbjs "^0.8.9" object-assign "^4.1.0" -react@^15.5.4: - version "15.5.4" - resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047" +react@16.0.0-beta.3: + version "16.0.0-beta.3" + resolved "https://registry.yarnpkg.com/react/-/react-16.0.0-beta.3.tgz#f3974ce09dfef8e7debaba87c063a35aa09878a4" dependencies: fbjs "^0.8.9" loose-envify "^1.1.0" object-assign "^4.1.0" - prop-types "^15.5.7" + prop-types "^15.5.6" read-only-stream@^2.0.0: version "2.0.0" From 756b734ae294da09041303be52f9e9ced0b40d2d Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 8 Aug 2017 21:57:42 +0800 Subject: [PATCH 6/9] [web] update HideInStatic and some components. --- web/src/js/components/Footer.jsx | 6 ++++-- web/src/js/components/Header/FileMenu.jsx | 2 ++ web/src/js/components/Header/FlowMenu.jsx | 8 ++++++-- web/src/js/components/Header/OptionMenu.jsx | 8 ++++++-- web/src/js/components/common/HideInStatic.jsx | 4 ++-- 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 9a2f6cf48..db9afe6f4 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -2,6 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { formatSize } from '../utils.js' +import HideInStatic from '../components/common/HideInStatic' Footer.propTypes = { settings: PropTypes.object.isRequired, @@ -49,13 +50,14 @@ function Footer({ settings }) { stream: {formatSize(stream_large_bodies)} )}
- { MITMWEB_STATIC ? - (Static): + + { server && ( {listen_host||"*"}:{listen_port} ) } + v{version} diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx index cf3463434..5cb8e507a 100644 --- a/web/src/js/components/Header/FileMenu.jsx +++ b/web/src/js/components/Header/FileMenu.jsx @@ -37,6 +37,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {  Save... + { e.preventDefault(); openModal(); }}>  Options @@ -47,6 +48,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {  Install Certificates... + ) } diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index dc8221501..70c8bfcfe 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -23,7 +23,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow return
return (
- + +
Flow Modification
+
@@ -55,7 +57,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
Export
- + +
Interception
+
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 566db42f9..78519a340 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -10,16 +10,19 @@ OptionMenu.title = 'Options' export default function OptionMenu() { return (
- + +
HTTP/2.0 WebSockets Raw TCP
Protocol Support
+
- + +
Disable Caching @@ -30,6 +33,7 @@ export default function OptionMenu() {
HTTP Options
+
diff --git a/web/src/js/components/common/HideInStatic.jsx b/web/src/js/components/common/HideInStatic.jsx index 9f515c972..c5f3bf472 100644 --- a/web/src/js/components/common/HideInStatic.jsx +++ b/web/src/js/components/common/HideInStatic.jsx @@ -1,5 +1,5 @@ import React from 'react' -export default function HideInStatic({className, children }) { - return MITMWEB_STATIC ? null : (
{children}
) +export default function HideInStatic({ children }) { + return global.MITMWEB_STATIC ? null : [children] } From dd43722c184ea90be805b1fd6b6248a18e5d880e Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 8 Aug 2017 21:59:07 +0800 Subject: [PATCH 7/9] [web] Remove MITMWEB_STATIC var in tests, and update them. --- .../components/Header/FlowMenuSpec.js | 2 -- .../components/Header/OptionMenuSpec.js | 2 -- .../Header/__snapshots__/FileMenuSpec.js.snap | 8 ----- .../__snapshots__/OptionMenuSpec.js.snap | 30 ++++++++----------- 4 files changed, 13 insertions(+), 29 deletions(-) diff --git a/web/src/js/__tests__/components/Header/FlowMenuSpec.js b/web/src/js/__tests__/components/Header/FlowMenuSpec.js index 03b0f59db..65fde2136 100644 --- a/web/src/js/__tests__/components/Header/FlowMenuSpec.js +++ b/web/src/js/__tests__/components/Header/FlowMenuSpec.js @@ -7,8 +7,6 @@ import { TFlow, TStore }from '../../ducks/tutils' import { MessageUtils } from "../../../flow/utils" import { Provider } from 'react-redux' -global.MITMWEB_STATIC = false - describe('FlowMenu Component', () => { let actions = { resumeFlow: jest.fn(), diff --git a/web/src/js/__tests__/components/Header/OptionMenuSpec.js b/web/src/js/__tests__/components/Header/OptionMenuSpec.js index 729f42f24..980285ef1 100644 --- a/web/src/js/__tests__/components/Header/OptionMenuSpec.js +++ b/web/src/js/__tests__/components/Header/OptionMenuSpec.js @@ -4,8 +4,6 @@ import { Provider } from 'react-redux' import OptionMenu from '../../../components/Header/OptionMenu' import { TStore } from '../../ducks/tutils' -global.MITMWEB_STATIC = false - describe('OptionMenu Component', () => { it('should render correctly', () => { let store = TStore(), diff --git a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap index 15c1afbc2..ef9359149 100644 --- a/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap +++ b/web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap @@ -72,17 +72,9 @@ exports[`FileMenu Component should render correctly 1`] = ` />  Options - - -
  • -
    - -
    • -
  • -
    -
    - -
    +
    Date: Tue, 8 Aug 2017 22:33:41 +0800 Subject: [PATCH 8/9] [web] Remove activeFetches and onMessage in StaticBackend. --- web/src/js/backends/static.js | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/web/src/js/backends/static.js b/web/src/js/backends/static.js index 676468ce5..1de6b2946 100644 --- a/web/src/js/backends/static.js +++ b/web/src/js/backends/static.js @@ -21,34 +21,16 @@ export default class StaticBackend { } fetchData(resource) { - let queue = [] - this.activeFetches[resource] = queue fetchApi(`/${resource}`) .then(res => res.json()) .then(json => { - if (this.activeFetches[resource] === queue) - this.receive(resource, json) + this.receive(resource, json) }) } - onMessage(msg) { - if (msg.cmd === CMD_RESET) { - return this.fetchData(msg.resource) - } - if (msg.resource in this.activeFetches) { - this.activeFetches[msg.resource].push(msg) - } else { - let type = `${msg.resource}_${msg.cmd}`.toUpperCase() - this.store.dispatch({ type, ...msg}) - } - } - receive(resource, data) { let type = `${resource}_RECEIVE`.toUpperCase() this.store.dispatch({ type, cmd: "receive", resource, data }) - let queue = this.activeFetches[resource] - delete this.activeFetches[resource] - queue.forEach(msg => this.onMessage(msg)) } } From 0ad552ead46ae501b8af0a28820aad40b927cba7 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Tue, 8 Aug 2017 22:46:47 +0800 Subject: [PATCH 9/9] [web] Minor fixes. --- web/src/js/backends/static.js | 3 --- web/src/js/components/Header/OptionMenu.jsx | 2 -- 2 files changed, 5 deletions(-) diff --git a/web/src/js/backends/static.js b/web/src/js/backends/static.js index 1de6b2946..6657fecf1 100644 --- a/web/src/js/backends/static.js +++ b/web/src/js/backends/static.js @@ -4,11 +4,8 @@ */ import { fetchApi } from "../utils" -const CMD_RESET = 'reset' - export default class StaticBackend { constructor(store) { - this.activeFetches = {} this.store = store this.onOpen() } diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 78519a340..c41c9d99c 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -19,9 +19,7 @@ export default function OptionMenu() {
    Protocol Support
    • -     -