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 +}