caj
/
go-mitmproxy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimization web addon frontend

Browse Source
addon-dailer
liqiang 4 years ago
parent 657c5b382a
commit 5aab823dc6
6 changed files with 73 additions and 79 deletions
Show Stats Download Patch File Download Diff File

2
addon/web/client/public/index.html
Unescape Escape View File

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Mitm</title> <title>go-mitmproxy</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

4
addon/web/client/src/App.css
Unescape Escape View File

@ -56,10 +56,6 @@
margin-left: 10px; margin-left: 10px;
} }
/* .flow-detail .header-block {
margin: 20px;
} */
.flow-detail .header-block > p { .flow-detail .header-block > p {
font-weight: bold; font-weight: bold;
} }

77
addon/web/client/src/App.js
Unescape Escape View File

@ -2,77 +2,10 @@ import React from 'react'
import Table from 'react-bootstrap/Table' import Table from 'react-bootstrap/Table'
import Form from 'react-bootstrap/Form' import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button' import Button from 'react-bootstrap/Button'
import { FlowManager } from './flow'
import './App.css' import './App.css'
const isTextResponse = response => { import { FlowManager } from './flow'
if (!response) return false import { isTextResponse, getSize, parseMessage, buildMessage } from './utils'
if (!response.header) return false
if (!response.header['Content-Type']) return false
return /text|javascript|json/.test(response.header['Content-Type'].join(''))
}
const getSize = response => {
if (!response) return '0'
if (!response.header) return '0'
if (!response.header['Content-Length']) return '0'
const len = parseInt(response.header['Content-Length'][0])
if (isNaN(len)) return '0'
if (len <= 0) return '0'
if (len < 1024) return `${len} B`
if (len < 1024*1024) return `${(len/1024).toFixed(2)} KB`
return `${(len/(1024*1024)).toFixed(2)} MB`
}
const parseMessage = data => {
if (data.byteLength < 39) return null
const meta = new Int8Array(data.slice(0, 3))
const version = meta[0]
if (version !== 1) return null
const type = meta[1]
if (![1, 2, 3].includes(type)) return null
const id = new TextDecoder().decode(data.slice(3, 39))
const resp = {
type: ['request', 'response', 'responseBody'][type-1],
id,
waitIntercept: meta[2] === 1,
}
if (data.byteLength === 39) return resp
if (type === 3) {
resp.content = data.slice(39)
return resp
}
let content = new TextDecoder().decode(data.slice(39))
try {
content = JSON.parse(content)
} catch (err) {
return null
}
resp.content = content
return resp
}
/**
*
* @param {number} messageType
* @param {string} id
* @param {string} content
*/
const buildMessage = (messageType, id, content) => {
content = new TextEncoder().encode(content)
const data = new Uint8Array(39 + content.byteLength)
data[0] = 1
data[1] = messageType
data[2] = 0
data.set(new TextEncoder().encode(id), 3)
data.set(content, 39)
return data
}
class App extends React.Component { class App extends React.Component {
@ -90,6 +23,7 @@ class App extends React.Component {
interceptUriInputing: '', interceptUriInputing: '',
interceptUri: '', interceptUri: '',
} }
this.ws = null this.ws = null
} }
@ -122,7 +56,7 @@ class App extends React.Component {
console.error('parse error:', evt.data) console.error('parse error:', evt.data)
return return
} }
console.log('msg:', msg) // console.log('msg:', msg)
if (msg.type === 'request') { if (msg.type === 'request') {
const flow = { id: msg.id, request: msg.content, waitIntercept: msg.waitIntercept } const flow = { id: msg.id, request: msg.content, waitIntercept: msg.waitIntercept }
@ -147,9 +81,6 @@ class App extends React.Component {
this.ws.onerror = evt => { this.ws.onerror = evt => {
console.log('ERROR:', evt) console.log('ERROR:', evt)
} }
// this.ws.send('msg')
// this.ws.close()
} }
renderFlow() { renderFlow() {

0
addon/web/client/src/index.css
Unescape Escape View File

1
addon/web/client/src/index.js
Unescape Escape View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'
import App from './App' import App from './App'
import reportWebVitals from './reportWebVitals' import reportWebVitals from './reportWebVitals'

68
addon/web/client/src/utils.js
Unescape Escape View File

@ -0,0 +1,68 @@
export const isTextResponse = response => {
if (!response) return false
if (!response.header) return false
if (!response.header['Content-Type']) return false
return /text|javascript|json/.test(response.header['Content-Type'].join(''))
}
export const getSize = response => {
if (!response) return '0'
if (!response.header) return '0'
if (!response.header['Content-Length']) return '0'
const len = parseInt(response.header['Content-Length'][0])
if (isNaN(len)) return '0'
if (len <= 0) return '0'
if (len < 1024) return `${len} B`
if (len < 1024*1024) return `${(len/1024).toFixed(2)} KB`
return `${(len/(1024*1024)).toFixed(2)} MB`
}
export const parseMessage = data => {
if (data.byteLength < 39) return null
const meta = new Int8Array(data.slice(0, 3))
const version = meta[0]
if (version !== 1) return null
const type = meta[1]
if (![1, 2, 3].includes(type)) return null
const id = new TextDecoder().decode(data.slice(3, 39))
const resp = {
type: ['request', 'response', 'responseBody'][type-1],
id,
waitIntercept: meta[2] === 1,
}
if (data.byteLength === 39) return resp
if (type === 3) {
resp.content = data.slice(39)
return resp
}
let content = new TextDecoder().decode(data.slice(39))
try {
content = JSON.parse(content)
} catch (err) {
return null
}
resp.content = content
return resp
}
/**
*
* @param {number} messageType
* @param {string} id
* @param {string} content
*/
export const buildMessage = (messageType, id, content) => {
content = new TextEncoder().encode(content)
const data = new Uint8Array(39 + content.byteLength)
data[0] = 1
data[1] = messageType
data[2] = 0
data.set(new TextEncoder().encode(id), 3)
data.set(content, 39)
return data
}
Write Preview
Loading…
Cancel
Save