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

web addon optimization

Browse Source
addon-dailer
lqqyt2423 4 years ago
parent 97e6f6bb49
commit 4d2bc21cfe
6 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File

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

@ -29,7 +29,7 @@
<body> <body>
<!-- https://tholman.com/github-corners/ --> <!-- https://tholman.com/github-corners/ -->
<a href="https://github.com/lqqyt2423/go-mitmproxy" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <a href="https://github.com/lqqyt2423/go-mitmproxy" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 100;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>

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

@ -8,9 +8,17 @@
white-space: nowrap; white-space: nowrap;
} }
/* https://css-tricks.com/position-sticky-and-table-headers/ */
.main-table-wrap table th {
background-color: white;
position: sticky;
top: -1px;
}
.top-control { .top-control {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px;
} }
.top-control > div { .top-control > div {
@ -40,10 +48,15 @@
overflow-y: auto; overflow-y: auto;
word-break: break-all; word-break: break-all;
border-left: 2px solid #dee2e6;
} }
.flow-detail .header-tabs { .flow-detail .header-tabs {
display: flex; display: flex;
position: sticky;
top: 0;
background-color: white;
padding: 5px 0;
} }
.flow-detail .header-tabs span { .flow-detail .header-tabs span {

14
addon/web/client/src/App.tsx
Unescape Escape View File

@ -207,8 +207,8 @@ class App extends React.Component<any, IState> {
<div className="header-block-content"> <div className="header-block-content">
<p> <p>
{ {
!(isTextBody(request)) ? 'Not text' : !(flow.isTextRequest()) ? <span style={{ color: 'gray' }}>Not text</span> :
new TextDecoder().decode(request.body) flow.requestBody()
} }
</p> </p>
</div> </div>
@ -220,10 +220,10 @@ class App extends React.Component<any, IState> {
{ {
!(flowTab === 'Response') ? null : !(flowTab === 'Response') ? null :
!(response.body && response.body.byteLength) ? <div>No response</div> : !(response.body && response.body.byteLength) ? <div style={{ color: 'gray' }}>No response</div> :
!(isTextBody(response)) ? <div>Not text response</div> : !(flow.isTextResponse()) ? <div style={{ color: 'gray' }}>Not text response</div> :
<div> <div>
{new TextDecoder().decode(response.body)} {flow.responseBody()}
</div> </div>
} }
</div> </div>
@ -264,9 +264,9 @@ class App extends React.Component<any, IState> {
<thead> <thead>
<tr> <tr>
<th style={{ width: '50px' }}>No</th> <th style={{ width: '50px' }}>No</th>
<th style={{ width: '200px' }}>Host</th>
<th style={{ width: '500px' }}>Path</th>
<th style={{ width: '80px' }}>Method</th> <th style={{ width: '80px' }}>Method</th>
<th style={{ width: '200px' }}>Host</th>
<th style={{ width: '600px' }}>Path</th>
<th style={{ width: '80px' }}>Status</th> <th style={{ width: '80px' }}>Status</th>
<th style={{ width: '90px' }}>Size</th> <th style={{ width: '90px' }}>Size</th>
<th style={{ width: '90px' }}>Time</th> <th style={{ width: '90px' }}>Time</th>

2
addon/web/client/src/components/FlowPreview.tsx
Unescape Escape View File

@ -30,9 +30,9 @@ class FlowPreview extends React.Component<IProps> {
}} }}
> >
<td>{fp.no}</td> <td>{fp.no}</td>
<td>{fp.method}</td>
<td>{fp.host}</td> <td>{fp.host}</td>
<td>{fp.path}</td> <td>{fp.path}</td>
<td>{fp.method}</td>
<td>{fp.statusCode}</td> <td>{fp.statusCode}</td>
<td>{fp.size}</td> <td>{fp.size}</td>
<td>{fp.costTime}</td> <td>{fp.costTime}</td>

53
addon/web/client/src/message.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import { getSize } from './utils' import { getSize, isTextBody } from './utils'
export enum MessageType { export enum MessageType {
REQUEST = 1, REQUEST = 1,
@ -61,6 +61,13 @@ export class Flow {
public static curNo = 0 public static curNo = 0
private status: MessageType = MessageType.REQUEST
private _isTextRequest: boolean | null
private _isTextResponse: boolean | null
private _requestBody: string | null
private _responseBody: string | null
constructor(msg: IMessage) { constructor(msg: IMessage) {
this.no = ++Flow.curNo this.no = ++Flow.curNo
this.id = msg.id this.id = msg.id
@ -69,15 +76,22 @@ export class Flow {
this.url = new URL(this.request.url) this.url = new URL(this.request.url)
this.path = this.url.pathname + this.url.search this.path = this.url.pathname + this.url.search
this._isTextRequest = null
this._isTextResponse = null
this._requestBody = null
this._responseBody = null
} }
public addRequestBody(msg: IMessage): Flow { public addRequestBody(msg: IMessage): Flow {
this.status = MessageType.REQUEST_BODY
this.waitIntercept = msg.waitIntercept this.waitIntercept = msg.waitIntercept
this.request.body = msg.content as ArrayBuffer this.request.body = msg.content as ArrayBuffer
return this return this
} }
public addResponse(msg: IMessage): Flow { public addResponse(msg: IMessage): Flow {
this.status = MessageType.RESPONSE
this.waitIntercept = msg.waitIntercept this.waitIntercept = msg.waitIntercept
this.response = msg.content as IResponse this.response = msg.content as IResponse
@ -91,6 +105,7 @@ export class Flow {
} }
public addResponseBody(msg: IMessage): Flow { public addResponseBody(msg: IMessage): Flow {
this.status = MessageType.RESPONSE_BODY
this.waitIntercept = msg.waitIntercept this.waitIntercept = msg.waitIntercept
if (this.response) this.response.body = msg.content as ArrayBuffer if (this.response) this.response.body = msg.content as ArrayBuffer
this.endTime = Date.now() this.endTime = Date.now()
@ -116,6 +131,42 @@ export class Flow {
costTime: this.costTime, costTime: this.costTime,
} }
} }
public isTextRequest(): boolean {
if (this._isTextRequest !== null) return this._isTextRequest
this._isTextRequest = isTextBody(this.request)
return this._isTextRequest
}
public requestBody(): string {
if (this._requestBody !== null) return this._requestBody
if (!this.isTextRequest()) {
this._requestBody = ''
return this._requestBody
}
if (this.status < MessageType.REQUEST_BODY) return ''
this._requestBody = new TextDecoder().decode(this.request.body)
return this._requestBody
}
public isTextResponse(): boolean | null {
if (this.status < MessageType.RESPONSE) return null
if (this._isTextResponse !== null) return this._isTextResponse
this._isTextResponse = isTextBody(this.response as IResponse)
return this._isTextResponse
}
public responseBody(): string {
if (this._responseBody !== null) return this._responseBody
if (this.status < MessageType.RESPONSE) return ''
if (!this.isTextResponse()) {
this._responseBody = ''
return this._responseBody
}
if (this.status < MessageType.RESPONSE_BODY) return ''
this._responseBody = new TextDecoder().decode(this.response?.body)
return this._responseBody
}
} }
const allMessageBytes = [ const allMessageBytes = [

2
addon/web/client/src/utils.ts
Unescape Escape View File

@ -5,7 +5,7 @@ export const isTextBody = (payload: IRequest | IResponse) => {
if (!payload.header) return false if (!payload.header) return false
if (!payload.header['Content-Type']) return false if (!payload.header['Content-Type']) return false
return /text|javascript|json/.test(payload.header['Content-Type'].join('')) return /text|javascript|json|x-www-form-urlencoded/.test(payload.header['Content-Type'].join(''))
} }
export const getSize = (len: number) => { export const getSize = (len: number) => {

Write Preview
Loading…
Cancel
Save