optimization web addon frontend

addon-dailer
liqiang 4 years ago
parent 657c5b382a
commit 5aab823dc6

@ -24,7 +24,7 @@
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`.
-->
<title>Mitm</title>
<title>go-mitmproxy</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

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

@ -2,77 +2,10 @@ import React from 'react'
import Table from 'react-bootstrap/Table'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import { FlowManager } from './flow'
import './App.css'
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(''))
}
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
}
import { FlowManager } from './flow'
import { isTextResponse, getSize, parseMessage, buildMessage } from './utils'
class App extends React.Component {
@ -90,6 +23,7 @@ class App extends React.Component {
interceptUriInputing: '',
interceptUri: '',
}
this.ws = null
}
@ -122,7 +56,7 @@ class App extends React.Component {
console.error('parse error:', evt.data)
return
}
console.log('msg:', msg)
// console.log('msg:', msg)
if (msg.type === 'request') {
const flow = { id: msg.id, request: msg.content, waitIntercept: msg.waitIntercept }
@ -147,9 +81,6 @@ class App extends React.Component {
this.ws.onerror = evt => {
console.log('ERROR:', evt)
}
// this.ws.send('msg')
// this.ws.close()
}
renderFlow() {

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

@ -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
}
Loading…
Cancel
Save