From 5aab823dc61515a4472c04a1e84caffbd1de5b45 Mon Sep 17 00:00:00 2001
From: liqiang <974923609@qq.com>
Date: Sat, 20 Feb 2021 14:27:59 +0800
Subject: [PATCH] optimization web addon frontend
---
addon/web/client/public/index.html | 2 +-
addon/web/client/src/App.css | 4 --
addon/web/client/src/App.js | 77 ++----------------------------
addon/web/client/src/index.css | 0
addon/web/client/src/index.js | 1 -
addon/web/client/src/utils.js | 68 ++++++++++++++++++++++++++
6 files changed, 73 insertions(+), 79 deletions(-)
delete mode 100644 addon/web/client/src/index.css
create mode 100644 addon/web/client/src/utils.js
diff --git a/addon/web/client/public/index.html b/addon/web/client/public/index.html
index 6063ce7..59d18b9 100644
--- a/addon/web/client/public/index.html
+++ b/addon/web/client/public/index.html
@@ -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`.
-->
- Mitm
+ go-mitmproxy
diff --git a/addon/web/client/src/App.css b/addon/web/client/src/App.css
index b08d9c6..6c8a22e 100644
--- a/addon/web/client/src/App.css
+++ b/addon/web/client/src/App.css
@@ -56,10 +56,6 @@
margin-left: 10px;
}
-/* .flow-detail .header-block {
- margin: 20px;
-} */
-
.flow-detail .header-block > p {
font-weight: bold;
}
diff --git a/addon/web/client/src/App.js b/addon/web/client/src/App.js
index 1cc2421..92a43ac 100644
--- a/addon/web/client/src/App.js
+++ b/addon/web/client/src/App.js
@@ -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() {
diff --git a/addon/web/client/src/index.css b/addon/web/client/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/addon/web/client/src/index.js b/addon/web/client/src/index.js
index 2d21ef6..c7e4f39 100644
--- a/addon/web/client/src/index.js
+++ b/addon/web/client/src/index.js
@@ -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'
diff --git a/addon/web/client/src/utils.js b/addon/web/client/src/utils.js
new file mode 100644
index 0000000..fb50dc9
--- /dev/null
+++ b/addon/web/client/src/utils.js
@@ -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
+}