web addon add request body

addon/web/client/src/App.css

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

addon/web/client/src/App.js

@@ -63,6 +63,12 @@ class App extends React.Component {
         this.flowMgr.add(flow)
         this.setState({ flows: this.flowMgr.showList() })
       }
+      else if (msg.type === 'requestBody') {
+        const flow = this.flowMgr.get(msg.id)
+        if (!flow) return
+        flow.request.body = msg.content
+        this.setState({ flows: this.state.flows })
+      }
       else if (msg.type === 'response') {
         const flow = this.flowMgr.get(msg.id)
         if (!flow) return
@@ -124,19 +130,21 @@ class App extends React.Component {
                 </div>
               </div>
 
-              <div className="header-block">
-                <p>Response Headers</p>
-                <div className="header-block-content">
-                  {
-                    !(response.header) ? null :
-                    Object.keys(response.header).map(key => {
-                      return (
-                        <p key={key}>{key}: {response.header[key].join(' ')}</p>
-                      )
-                    })
-                  }
+              {
+                !(response.header) ? null :
+                <div className="header-block">
+                  <p>Response Headers</p>
+                  <div className="header-block-content">
+                    {
+                      Object.keys(response.header).map(key => {
+                        return (
+                          <p key={key}>{key}: {response.header[key].join(' ')}</p>
+                        )
+                      })
+                    }
+                  </div>
                 </div>
-              </div>
+              }
 
               <div className="header-block">
                 <p>Request Headers</p>
@@ -151,6 +159,22 @@ class App extends React.Component {
                   }
                 </div>
               </div>
+
+              {
+                !(request.body && request.body.byteLength) ? null :
+                <div className="header-block">
+                  <p>Request Body</p>
+                  <div className="header-block-content">
+                    <p>
+                      {
+                        !(isTextResponse(request)) ? "Not text" :
+                        new TextDecoder().decode(request.body)
+                      }
+                    </p>
+                  </div>
+                </div>
+              }
+
             </div>
           }
 

addon/web/client/src/utils.js

@@ -25,22 +25,36 @@ export const getSize = response => {
   return `${(len/(1024*1024)).toFixed(2)} MB`
 }
 
+const messageEnum = {
+  'request': 1,
+  'requestBody': 2,
+  'response': 3,
+  'responseBody': 4,
+}
+
+const allMessageBytes = Object.keys(messageEnum).map(k => messageEnum[k])
+
+const messageByteMap = Object.keys(messageEnum).reduce((m, k) => {
+  m[messageEnum[k]] = k
+  return m
+}, {})
+
 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
+  if (!allMessageBytes.includes(type)) return null
   const id = new TextDecoder().decode(data.slice(3, 39))
 
   const resp = {
-    type: ['request', 'response', 'responseBody'][type-1],
+    type: messageByteMap[type],
     id,
     waitIntercept: meta[2] === 1,
   }
   if (data.byteLength === 39) return resp
-  if (type === 3) {
+  if (type === messageEnum['requestBody'] || type === messageEnum['responseBody']) {
     resp.content = data.slice(39)
     return resp
   }

addon/web/message.go

@@ -10,20 +10,33 @@ import (
 
 const messageVersion = 1
 
-type messageType int
+type messageType byte
 
 const (
 	messageTypeRequest      messageType = 1
-	messageTypeResponse     messageType = 2
-	messageTypeResponseBody messageType = 3
+	messageTypeRequestBody  messageType = 2
+	messageTypeResponse     messageType = 3
+	messageTypeResponseBody messageType = 4
+
+	messageTypeChangeRequest messageType = 11
 
-	messageTypeChangeRequest      messageType = 11
 	messageTypeChangeInterceptUri messageType = 21
 )
 
+var allMessageTypes = []messageType{
+	messageTypeRequest,
+	messageTypeRequestBody,
+	messageTypeResponse,
+	messageTypeResponseBody,
+	messageTypeChangeRequest,
+	messageTypeChangeInterceptUri,
+}
+
 func validMessageType(t byte) bool {
-	if t == byte(messageTypeRequest) || t == byte(messageTypeResponse) || t == byte(messageTypeResponseBody) || t == byte(messageTypeChangeRequest) || t == byte(messageTypeChangeInterceptUri) {
-		return true
+	for _, v := range allMessageTypes {
+		if t == byte(v) {
+			return true
+		}
 	}
 	return false
 }
@@ -72,6 +85,10 @@ func newMessageRequest(f *flow.Flow) *message {
 	return newMessage(messageTypeRequest, f.Id, content)
 }
 
+func newMessageRequestBody(f *flow.Flow) *message {
+	return newMessage(messageTypeRequestBody, f.Id, f.Request.Body)
+}
+
 func newMessageResponse(f *flow.Flow) *message {
 	content, err := json.Marshal(f.Response)
 	if err != nil {

addon/web/web.go

@@ -113,12 +113,18 @@ func (web *WebAddon) sendFlow(f *flow.Flow, msgFn func() *message) bool {
 	return true
 }
 
-func (web *WebAddon) Request(f *flow.Flow) {
+func (web *WebAddon) Requestheaders(f *flow.Flow) {
 	web.sendFlow(f, func() *message {
 		return newMessageRequest(f)
 	})
 }
 
+func (web *WebAddon) Request(f *flow.Flow) {
+	web.sendFlow(f, func() *message {
+		return newMessageRequestBody(f)
+	})
+}
+
 func (web *WebAddon) Responseheaders(f *flow.Flow) {
 	web.sendFlow(f, func() *message {
 		return newMessageResponse(f)