diff --git a/cuckoo/web/src/scripts/analysis_network.js b/cuckoo/web/src/scripts/analysis_network.js index aee679e4bb..54d997dc2b 100644 --- a/cuckoo/web/src/scripts/analysis_network.js +++ b/cuckoo/web/src/scripts/analysis_network.js @@ -171,7 +171,8 @@ class HexView { var displayBody, outputMode, - content = this.raw; + content = this.raw, + textArea = true; let body = this.displayBody; let output = this.displayOutput; @@ -188,7 +189,7 @@ class HexView { // this.container.removeClass('empty-body'); } - this.container.empty().text(content); + this.container.empty().text(HexView.unescapeHTML(content)); } @@ -245,6 +246,15 @@ class HexView { } } + // http://stackoverflow.com/questions/22279231/using-js-jquery-how-can-i-unescape-html-and-put-quotes-back-in-the-str + static unescapeHTML(safe) { + return safe.replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); + } + } /* @@ -352,6 +362,7 @@ class RequestDisplay { this.el.removeClass('is-loading'); summaryElement.find('.fa-chevron-right').removeClass('fa-spinner fa-spin'); + this.hex_view = new HexView(this.el, { request: self.request_body, response: self.response_body @@ -359,6 +370,8 @@ class RequestDisplay { container: '[data-draw="source"]' }).initialise(); + console.log(this.hex_view) + self.open(); } @@ -680,15 +693,19 @@ $(function() { network_nav.transition('network-analysis-http'); if($("#network-analysis-tcp").length) { + let packet_display_tcp = new PacketDisplay($("#network-analysis-tcp"), { skip_empty: true }); + } if($("#network-analysis-udp").length) { + let packet_display_udp = new PacketDisplay($('#network-analysis-udp'), { skip_empty: true }); + } $("#http-requests .network-display__request").each(function() { diff --git a/cuckoo/web/src/scss/components/_cuckoo-analysis.scss b/cuckoo/web/src/scss/components/_cuckoo-analysis.scss index e48345b24a..a123927cef 100644 --- a/cuckoo/web/src/scss/components/_cuckoo-analysis.scss +++ b/cuckoo/web/src/scss/components/_cuckoo-analysis.scss @@ -8,6 +8,8 @@ font-family: "Roboto"; background-color: #fafafa; + margin-top: -20px; + padding-top: 80px; &:focus { outline: none; @@ -35,7 +37,7 @@ font-size: 36px; color: #555; margin: 0; - padding-top: 30px; + padding-top: 0px; @include cuckoo-theme('cyborg') { color: $cyborg_text_color; } @include cuckoo-theme('night') { color: $night_text_color; } diff --git a/cuckoo/web/src/scss/components/_network-display.scss b/cuckoo/web/src/scss/components/_network-display.scss index 216fcc42ae..497a69ff12 100644 --- a/cuckoo/web/src/scss/components/_network-display.scss +++ b/cuckoo/web/src/scss/components/_network-display.scss @@ -311,6 +311,12 @@ padding: 15px; border-bottom: 1px solid #D8D8D8; + textarea { + font-family: monospace; + overflow-x: scroll; + width: 100%; + } + pre { padding: 0; margin: 0; diff --git a/cuckoo/web/src/scss/main.scss b/cuckoo/web/src/scss/main.scss index 24d5972284..c7217992ef 100644 --- a/cuckoo/web/src/scss/main.scss +++ b/cuckoo/web/src/scss/main.scss @@ -52,8 +52,8 @@ body#analysis { @import "components/app-nav"; @import "components/buttons"; @import "components/analysis-sidebar"; -@import "components/cuckoo-analysis"; @import "components/flex-navigation"; +@import "components/cuckoo-analysis"; @import "components/network-http-request"; @import "components/dndupload"; @import "components/nav"; diff --git a/cuckoo/web/static/css/main.css b/cuckoo/web/static/css/main.css index 5779bb5aff..1ae562054c 100644 --- a/cuckoo/web/static/css/main.css +++ b/cuckoo/web/static/css/main.css @@ -3891,6 +3891,87 @@ body.cyborg .button, body.cyborg .button--lg { min-height: 460px; } +/* + Copyright (C) 2016 Cuckoo Foundation. + This file is part of Cuckoo Sandbox - http://www.cuckoosandbox.org + see the file 'docs/LICENSE' for copying permission. + */ +.flex-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + width: 100vw; + height: calc(100vh - 30px); +} +.flex-nav__nav { + background-color: #444; + overflow: hidden; + -ms-flex-preferred-size: 65px; + flex-basis: 65px; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-transition: -webkit-flex-basis 200ms ease-in-out; + transition: -webkit-flex-basis 200ms ease-in-out; + transition: flex-basis 200ms ease-in-out; + transition: flex-basis 200ms ease-in-out, -webkit-flex-basis 200ms ease-in-out, -ms-flex-preferred-size 200ms ease-in-out; + overflow-y: auto; +} +.flex-nav__nav .cuckoo-nav { + -webkit-transition: -webkit-transform 0 linear; + transition: -webkit-transform 0 linear; + transition: transform 0 linear; + transition: transform 0 linear, -webkit-transform 0 linear; +} +.flex-nav__nav .cuckoo-nav em, .flex-nav__nav .cuckoo-nav span, .flex-nav__nav .cuckoo-nav button { + opacity: 0; + -webkit-transition: opacity 100ms linear; + transition: opacity 100ms linear; +} +.flex-nav__nav.open, .flex-nav__nav.locked, .flex-nav__nav.locked-silent { + -ms-flex-preferred-size: 280px; + flex-basis: 280px; +} +.flex-nav__nav.open .cuckoo-nav em, .flex-nav__nav.open .cuckoo-nav span, .flex-nav__nav.open .cuckoo-nav input, .flex-nav__nav.open .cuckoo-nav button, .flex-nav__nav.locked .cuckoo-nav em, .flex-nav__nav.locked .cuckoo-nav span, .flex-nav__nav.locked .cuckoo-nav input, .flex-nav__nav.locked .cuckoo-nav button, .flex-nav__nav.locked-silent .cuckoo-nav em, .flex-nav__nav.locked-silent .cuckoo-nav span, .flex-nav__nav.locked-silent .cuckoo-nav input, .flex-nav__nav.locked-silent .cuckoo-nav button { + opacity: 1; +} +.flex-nav__body, .flex-nav__body--disable-overflow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + overflow-y: auto; + padding: 15px 0 0 0; +} +[id^="analysis"] .flex-nav__body > .container-fluid, [id^="analysis"] .flex-nav__body--disable-overflow > .container-fluid { + width: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + margin-bottom: 30px; +} +.flex-nav__body--disable-overflow { + overflow-y: hidden; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; +} +.flex-nav__body--disable-overflow .cuckoo-analysis__header { + -ms-flex-preferred-size: 99px; + flex-basis: 99px; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; +} + /* Copyright (C) 2016-2017 Cuckoo Foundation. This file is part of Cuckoo Sandbox - http://www.cuckoosandbox.org @@ -3899,6 +3980,8 @@ body.cyborg .button, body.cyborg .button--lg { .cuckoo-analysis { font-family: "Roboto"; background-color: #fafafa; + margin-top: -20px; + padding-top: 80px; } .cuckoo-analysis:focus { outline: none; @@ -3928,7 +4011,7 @@ body.cyborg .button, body.cyborg .button--lg { font-size: 36px; color: #555; margin: 0; - padding-top: 30px; + padding-top: 0px; } body.cyborg .cuckoo-analysis__header > h1 { color: #d7d7d7; @@ -4175,87 +4258,6 @@ body.night .cuckoo-analysis__panel.danger > a { color: #D43237; } -/* - Copyright (C) 2016 Cuckoo Foundation. - This file is part of Cuckoo Sandbox - http://www.cuckoosandbox.org - see the file 'docs/LICENSE' for copying permission. - */ -.flex-nav { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - width: 100vw; - height: calc(100vh - 30px); -} -.flex-nav__nav { - background-color: #444; - overflow: hidden; - -ms-flex-preferred-size: 65px; - flex-basis: 65px; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-transition: -webkit-flex-basis 200ms ease-in-out; - transition: -webkit-flex-basis 200ms ease-in-out; - transition: flex-basis 200ms ease-in-out; - transition: flex-basis 200ms ease-in-out, -webkit-flex-basis 200ms ease-in-out, -ms-flex-preferred-size 200ms ease-in-out; - overflow-y: auto; -} -.flex-nav__nav .cuckoo-nav { - -webkit-transition: -webkit-transform 0 linear; - transition: -webkit-transform 0 linear; - transition: transform 0 linear; - transition: transform 0 linear, -webkit-transform 0 linear; -} -.flex-nav__nav .cuckoo-nav em, .flex-nav__nav .cuckoo-nav span, .flex-nav__nav .cuckoo-nav button { - opacity: 0; - -webkit-transition: opacity 100ms linear; - transition: opacity 100ms linear; -} -.flex-nav__nav.open, .flex-nav__nav.locked, .flex-nav__nav.locked-silent { - -ms-flex-preferred-size: 280px; - flex-basis: 280px; -} -.flex-nav__nav.open .cuckoo-nav em, .flex-nav__nav.open .cuckoo-nav span, .flex-nav__nav.open .cuckoo-nav input, .flex-nav__nav.open .cuckoo-nav button, .flex-nav__nav.locked .cuckoo-nav em, .flex-nav__nav.locked .cuckoo-nav span, .flex-nav__nav.locked .cuckoo-nav input, .flex-nav__nav.locked .cuckoo-nav button, .flex-nav__nav.locked-silent .cuckoo-nav em, .flex-nav__nav.locked-silent .cuckoo-nav span, .flex-nav__nav.locked-silent .cuckoo-nav input, .flex-nav__nav.locked-silent .cuckoo-nav button { - opacity: 1; -} -.flex-nav__body, .flex-nav__body--disable-overflow { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - overflow-y: auto; - padding: 15px 0 0 0; -} -[id^="analysis"] .flex-nav__body > .container-fluid, [id^="analysis"] .flex-nav__body--disable-overflow > .container-fluid { - width: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - margin-bottom: 30px; -} -.flex-nav__body--disable-overflow { - overflow-y: hidden; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -} -.flex-nav__body--disable-overflow .cuckoo-analysis__header { - -ms-flex-preferred-size: 99px; - flex-basis: 99px; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; -} - /* Copyright (C) 2016 Cuckoo Foundation. This file is part of Cuckoo Sandbox - http://www.cuckoosandbox.org @@ -5994,6 +5996,11 @@ body.night .network-display__request-summary:hover .fa-long-arrow-right { padding: 15px; border-bottom: 1px solid #D8D8D8; } +.network-display__request-details .detail-field__body textarea, .network-display__request-details--single .detail-field__body textarea { + font-family: monospace; + overflow-x: scroll; + width: 100%; +} .network-display__request-details .detail-field__body pre, .network-display__request-details--single .detail-field__body pre { padding: 0; margin: 0;