Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2025-02-01 07:49:10 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2504 from MatthewShao/static-viewer

Browse Source 
[WIP] [web] Static viewer for mitmweb
This commit is contained in:
Maximilian Hils 2017-08-08 16:59:07 +02:00 committed by GitHub
commit 802e8cb341
15 changed files with 90 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mitmproxy/tools/web/static/static.js vendored Normal file
View File

@ -0,0 +1 @@
MITMWEB_STATIC = false;

6
web/package.json
View File

@ -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",

1
web/src/js/__tests__/components/Header/FlowMenuSpec.js
View File

@ -7,7 +7,6 @@ import { TFlow, TStore }from '../../ducks/tutils'
import { MessageUtils } from "../../../flow/utils"
import { Provider } from 'react-redux'
describe('FlowMenu Component', () => {
let actions = {
resumeFlow: jest.fn(),

1
web/src/js/__tests__/components/Header/OptionMenuSpec.js
View File

@ -4,7 +4,6 @@ import { Provider } from 'react-redux'
import OptionMenu from '../../../components/Header/OptionMenu'
import { TStore } from '../../ducks/tutils'
describe('OptionMenu Component', () => {
it('should render correctly', () => {
let store = TStore(),

8
web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap
View File

@ -72,17 +72,9 @@ exports[`FileMenu Component should render correctly 1`] = `
/>
 Options
</a>
</li>
<li>
<hr
className="divider"
/>
</li>
<li>
<a
href="http://mitm.it/"
target="_blank"

5
web/src/js/app.jsx
View File

@ -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)
if (MITMWEB_STATIC) {
window.backend = new StaticBackend(store)
} else {
window.backend = new WebSocketBackend(store)
}
window.addEventListener('error', msg => {
store.dispatch(addLog(msg))

33
web/src/js/backends/static.js Normal file
View File

@ -0,0 +1,33 @@
/*
* This backend uses the REST API only to host static instances,
* without any Websocket connection.
*/
import { fetchApi } from "../utils"
export default class StaticBackend {
constructor(store) {
this.store = store
this.onOpen()
}
onOpen() {
this.fetchData("settings")
this.fetchData("flows")
this.fetchData("events")
this.fetchData("options")
}
fetchData(resource) {
fetchApi(`/${resource}`)
.then(res => res.json())
.then(json => {
this.receive(resource, json)
})
}
receive(resource, data) {
let type = `${resource}_RECEIVE`.toUpperCase()
this.store.dispatch({ type, cmd: "receive", resource, data })
}
}

10
web/src/js/components/Footer.jsx
View File

@ -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,11 +50,14 @@ function Footer({ settings }) {
<span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
)}
<div className="pull-right">
{server && (
<HideInStatic>
{
server && (
<span className="label label-primary" title="HTTP Proxy Server Address">
{listen_host||"*"}:{listen_port}
</span>
)}
</span>)
}
</HideInStatic>
<span className="label label-info" title="Mitmproxy Version">
v{version}
</span>

3
web/src/js/components/Header.jsx
View File

@ -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}
</a>
))}
<HideInStatic>
<ConnectionIndicator/>
</HideInStatic>
</nav>
<div>
<Active/>

4
web/src/js/components/Header/FileMenu.jsx
View File

@ -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,
@ -36,17 +37,18 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {
&nbsp;Save...
</a>
<HideInStatic>
<a href="#" onClick={e => { e.preventDefault(); openModal(); }}>
<i className="fa fa-fw fa-cog"></i>
&nbsp;Options
</a>
<Divider/>
<a href="http://mitm.it/" target="_blank">
<i className="fa fa-fw fa-external-link"></i>
&nbsp;Install Certificates...
</a>
</HideInStatic>
</Dropdown>
)
}

7
web/src/js/components/Header/FlowMenu.jsx
View File

@ -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,6 +23,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
return <div/>
return (
<div>
<HideInStatic>
<div className="menu-group">
<div className="menu-content">
<Button title="[r]eplay flow" icon="fa-repeat text-primary"
@ -43,6 +45,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
</div>
<div className="menu-legend">Flow Modification</div>
</div>
</HideInStatic>
<div className="menu-group">
<div className="menu-content">
<Button title="download" icon="fa-download"
@ -52,6 +56,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
</div>
<div className="menu-legend">Export</div>
</div>
<HideInStatic>
<div className="menu-group">
<div className="menu-content">
<Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
@ -65,6 +71,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
</div>
<div className="menu-legend">Interception</div>
</div>
</HideInStatic>
</div>

8
web/src/js/components/Header/OptionMenu.jsx
View File

@ -3,12 +3,14 @@ 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 (
<div>
<HideInStatic>
<div className="menu-group">
<div className="menu-content">
<SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
@ -17,6 +19,7 @@ export default function OptionMenu() {
</div>
<div className="menu-legend">Protocol Support</div>
</div>
<div className="menu-group">
<div className="menu-content">
<SettingsToggle setting="anticache">
@ -29,12 +32,17 @@ export default function OptionMenu() {
</div>
<div className="menu-legend">HTTP Options</div>
</div>
</HideInStatic>
<div className="menu-group">
<div className="menu-content">
<HideInStatic>
<SettingsToggle setting="showhost">
Use Host Header <i className="fa fa-question-circle"
title="Use the Host header to construct URLs for display."></i>
</SettingsToggle>
</HideInStatic>
<EventlogToggle/>
</div>
<div className="menu-legend">View Options</div>

5
web/src/js/components/common/HideInStatic.jsx Normal file
View File

@ -0,0 +1,5 @@
import React from 'react'
export default function HideInStatic({ children }) {
return global.MITMWEB_STATIC ? null : [children]
}

1
web/src/templates/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="/static/vendor.css"/>
<link rel="stylesheet" href="/static/app.css"/>
<link rel="icon" href="/static/images/favicon.ico" type="image/x-icon"/>
<script src="/static/static.js"></script>
<script src="/static/vendor.js"></script>
<script src="/static/app.js"></script>
</head>

24
web/yarn.lock
View File

@ -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"