added hints from mhils

mitmproxy/web/app.py

@@ -345,24 +345,6 @@ class FlowContentView(RequestHandler):
     def get(self, flow_id, message, content_view):
         message = getattr(self.flow, message)
 
-        original_cd = message.headers.get("Content-Disposition", None)
-        filename = None
-        if original_cd:
-            filename = re.search("filename=([\w\" \.\-\(\)]+)", original_cd)
-            if filename:
-                filename = filename.group(1)
-        if not filename:
-            filename = self.flow.request.path.split("?")[0].split("/")[-1]
-
-        filename = re.sub(r"[^\w\" \.\-\(\)]", "", filename)
-        cd = "attachment; filename={}".format(filename)
-        self.set_header("Content-Disposition", cd)
-        self.set_header("Content-Type", "application/json")
-        self.set_header("X-Content-Type-Options", "nosniff")
-        self.set_header("X-Frame-Options", "DENY")
-
-        self.set_header("Content-Encoding", "")
-
         description, lines, error = contentviews.get_message_content_view(
             contentviews.get(content_view.replace('_', ' ')), message
         )

web/src/css/flowdetail.less

@@ -14,7 +14,9 @@
     }
 
     section {
-        padding: 5px 12px;
+        display: flex;
+        flex-direction: column;
+        padding: 0 !important;
     }
 
     .first-line {
@@ -40,25 +42,20 @@
         margin: 0 0 5px;
     }
 
+    article {
+        overflow: auto;
+        padding: 5px 12px 0;
+    }
+
+    footer {
+        box-shadow: 0 0 3px gray;
+        padding: 2px;
+        margin: 0;
+        height:23px;
+    }
+
 }
 
-.flowview-container{
-    display: flex;
-    flex-direction: column;
-    padding: 0 !important;
-}
-
-.flowview-body{
-    overflow: auto;
-    padding: 5px 12px 0;
-}
-
-.flowview-footer{
-    box-shadow: 0 0 3px gray;
-    padding: 2px;
-    margin: 0;
-    height:23px;
-}
 
 .inline-input {
     display: inline;

web/src/js/components/ContentView/ContentViews.jsx

@@ -37,6 +37,7 @@ class ViewServer extends Component {
     componentWillMount(){
         this.setContentView(this.props)
     }
+
     componentWillReceiveProps(nextProps){
         this.setContentView(nextProps)
     }

web/src/js/components/ContentView/ShowFullContentButton.jsx

@@ -14,7 +14,7 @@ ShowFullContentButton.propTypes = {
 function ShowFullContentButton ( {setShowFullContent, showFullContent} ){
 
     return (
-        !showFullContent && <Button className="view-all-content-btn" isXs={true} onClick={() => setShowFullContent(true)} text="Show full content"/>
+        !showFullContent && <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/>
     )
 }
 

web/src/js/components/ContentView/ViewSelector.jsx

@@ -2,8 +2,7 @@ import React, { PropTypes, Component } from 'react'
 import classnames from 'classnames'
 import { connect } from 'react-redux'
 import * as ContentViews from './ContentViews'
-import { setContentView, setContentViewSelectorOpen } from "../../ducks/ui/flow";
+import { setContentView } from "../../ducks/ui/flow";
-
 
 function ViewItem({ name, setContentView, children }) {
     return (
@@ -29,24 +28,25 @@ class ViewSelector extends Component {
       constructor(props, context) {
         super(props, context)
         this.close = this.close.bind(this)
+        this.state = {open: false}
     }
     close() {
-        this.props.setContentViewSelectorOpen(false)
+        this.setState({open: false})
         document.removeEventListener('click', this.close)
     }
 
     onDropdown(e){
         e.preventDefault()
-        this.props.setContentViewSelectorOpen(!this.props.isContentViewSelectorOpen)
+        this.setState({open: !this.state.open})
         document.addEventListener('click', this.close)
     }
 
     render() {
-        const {contentViews, activeView, isEdit, isContentViewSelectorOpen, setContentViewSelectorOpen, setContentView} = this.props
+        const {contentViews, activeView, isEdit, setContentView} = this.props
         let edit = ContentViews.Edit.displayName
 
         return (
-            <div className={classnames('dropup pull-left', { open: isContentViewSelectorOpen })}>
+            <div className={classnames('dropup pull-left', { open: this.state.open })}>
                 <a className="btn btn-default btn-xs"
                    onClick={ e => this.onDropdown(e) }
                    href="#">
@@ -74,9 +74,7 @@ export default connect (
         contentViews: state.settings.contentViews,
         activeView: state.ui.flow.contentView,
         isEdit: !!state.ui.flow.modifiedFlow,
-        isContentViewSelectorOpen: state.ui.flow.isContentViewSelectorOpen
     }), {
         setContentView,
-        setContentViewSelectorOpen
     }
 )(ViewSelector)

web/src/js/components/FlowView/Messages.jsx

@@ -84,8 +84,8 @@ export class Request extends Component {
         const { flow, isEdit, updateFlow, uploadContent } = this.props
         let noContent =  !isEdit && (flow.request.contentLength == 0 || flow.request.contentLength == null)
         return (
-            <section className="request flowview-container">
+            <section className="request">
-                <div className="flowview-body">
+                <article>
                     <ToggleEdit/>
                     <RequestLine
                         flow={flow}
@@ -103,14 +103,16 @@ export class Request extends Component {
                         flow={flow}
                         onContentChange={content => updateFlow({ request: {content}})}
                         message={flow.request}/>
-                </div>
+                </article>
-                <div hidden={noContent} className="flowview-footer">
+                {!noContent &&
-                    <ContentViewOptions
+                    <footer>
-                        flow={flow}
+                        <ContentViewOptions
-                        readonly={!isEdit}
+                            flow={flow}
-                        message={flow.request}
+                            readonly={!isEdit}
-                        uploadContent={content => uploadContent(flow, content, "request")}/>
+                            message={flow.request}
-                </div>
+                            uploadContent={content => uploadContent(flow, content, "request")}/>
+                    </footer>
+                }
             </section>
         )
     }
@@ -149,8 +151,8 @@ export class Response extends Component {
         let noContent =  !isEdit && (flow.response.contentLength == 0 || flow.response.contentLength == null)
 
         return (
-            <section className="response flowview-container">
+            <section className="response">
-                <div className="flowview-body">
+                <article>
                     <ToggleEdit/>
                     <ResponseLine
                         flow={flow}
@@ -168,14 +170,16 @@ export class Response extends Component {
                         onContentChange={content => updateFlow({ response: {content}})}
                         message={flow.response}
                     />
-                </div>
+                </article>
-                <div hidden={noContent} className="flowview-footer">
+                {!noContent &&
-                    <ContentViewOptions
+                    <footer >
-                        flow={flow}
+                        <ContentViewOptions
-                        message={flow.response}
+                            flow={flow}
-                        uploadContent={content => uploadContent(flow, content, "response")}
+                            message={flow.response}
-                        readonly={!isEdit}/>
+                            uploadContent={content => uploadContent(flow, content, "response")}
-                </div>
+                            readonly={!isEdit}/>
+                    </footer>
+                }
             </section>
         )
     }

web/src/js/components/common/Button.jsx

@@ -7,9 +7,9 @@ Button.propTypes = {
     icon: PropTypes.string
 }
 
-export default function Button({ onClick, text, icon, disabled, isXs, className }) {
+export default function Button({ onClick, text, icon, disabled, className }) {
     return (
-        <div className={classnames(className, 'btn btn-default', { 'btn-xs': isXs})}
+        <div className={classnames(className, 'btn btn-default')}
              onClick={onClick}
              disabled={disabled}>
             {icon && (<i className={"fa fa-fw " + icon}/> )}

web/src/js/ducks/ui/flow.js

@@ -10,15 +10,13 @@ export const SET_CONTENT_VIEW               = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
              UPDATE_EDIT                    = 'UI_FLOWVIEW_UPDATE_EDIT',
              UPLOAD_CONTENT                 = 'UI_FLOWVIEW_UPLOAD_CONTENT',
              SET_SHOW_FULL_CONTENT          = 'UI_SET_SHOW_FULL_CONTENT',
-             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION",
+             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION"
-             SET_CONTENT_VIEW_SELECTOR      = "UI_SET_CONTENT_VIEW_SELECTOR"
 
 
 const defaultState = {
     displayLarge: false,
     contentViewDescription: '',
     showFullContent: false,
-    isContentViewSelectorOpen: false,
     modifiedFlow: false,
     contentView: 'Auto',
     tab: 'request',
@@ -81,13 +79,6 @@ export default function reducer(state = defaultState, action) {
                 showFullContent: action.show
             }
 
-
-        case SET_CONTENT_VIEW_SELECTOR:
-            return {
-                ...state,
-                isContentViewSelectorOpen: action.contentViewSelector
-            }
-
         case SET_TAB:
             return {
                 ...state,
@@ -141,10 +132,6 @@ export function setShowFullContent(show) {
     return { type: SET_SHOW_FULL_CONTENT, show }
 }
 
-export function setContentViewSelectorOpen(open){
-    return {type: SET_CONTENT_VIEW_SELECTOR, contentViewSelector: open}
-}
-
 export function updateEdit(update) {
     return { type: UPDATE_EDIT, update }
 }