aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/package.json1
-rw-r--r--frontend/src/components/ConnectionContent.js67
-rw-r--r--frontend/yarn.lock5
3 files changed, 57 insertions, 16 deletions
diff --git a/frontend/package.json b/frontend/package.json
index b13a7ea..a2d4166 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
"bootstrap": "^4.4.1",
"bs-custom-file-input": "^1.3.4",
"classnames": "^2.2.6",
+ "dompurify": "^2.1.1",
"eslint-config-react-app": "^5.2.1",
"lodash": "^4.17.20",
"node-sass": "^4.14.0",
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index ccaec0b..8667886 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -5,6 +5,7 @@ import MessageAction from "./MessageAction";
import backend from "../backend";
import ButtonField from "./fields/ButtonField";
import ChoiceField from "./fields/ChoiceField";
+import DOMPurify from 'dompurify';
const classNames = require('classnames');
@@ -21,7 +22,6 @@ class ConnectionContent extends Component {
};
this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"];
- this.setFormat = this.setFormat.bind(this);
}
componentDidMount() {
@@ -33,10 +33,15 @@ class ConnectionContent extends Component {
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.connection != null && (
this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) {
+ this.closeRenderWindow();
this.loadStream();
}
}
+ componentWillUnmount() {
+ this.closeRenderWindow();
+ }
+
loadStream = () => {
this.setState({loading: true});
// TODO: limit workaround.
@@ -48,13 +53,13 @@ class ConnectionContent extends Component {
});
};
- setFormat(format) {
+ setFormat = (format) => {
if (this.validFormats.includes(format)) {
this.setState({format: format});
}
- }
+ };
- tryParseConnectionMessage(connectionMessage) {
+ tryParseConnectionMessage = (connectionMessage) => {
if (connectionMessage.metadata == null) {
return connectionMessage.content;
}
@@ -87,22 +92,52 @@ class ConnectionContent extends Component {
default:
return connectionMessage.content;
}
- }
+ };
- connectionsActions(connectionMessage) {
- if (connectionMessage.metadata == null || connectionMessage.metadata["reproducers"] === undefined) {
+ connectionsActions = (connectionMessage) => {
+ if (connectionMessage.metadata == null) { //} || !connectionMessage.metadata["reproducers"]) {
return null;
}
- return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
- <ButtonField small key={actionName + "_button"} name={actionName} onClick={() => {
- this.setState({
- messageActionDialog: <MessageAction actionName={actionName} actionValue={actionValue}
- onHide={() => this.setState({messageActionDialog: null})}/>
- });
- }} />
- );
- }
+ const m = connectionMessage.metadata;
+ switch (m.type) {
+ case "http-request" :
+ if (!connectionMessage.metadata["reproducers"]) {
+ return;
+ }
+ return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
+ <ButtonField small key={actionName + "_button"} name={actionName} onClick={() => {
+ this.setState({
+ messageActionDialog: <MessageAction actionName={actionName} actionValue={actionValue}
+ onHide={() => this.setState({messageActionDialog: null})}/>
+ });
+ }} />
+ );
+ case "http-response":
+ if (m.headers && m.headers["Content-Type"].includes("text/html")) {
+ return <ButtonField small name="render_html" onClick={() => {
+ let w;
+ if (this.state.renderWindow && !this.state.renderWindow.closed) {
+ w = this.state.renderWindow;
+ } else {
+ w = window.open("", "", "width=900, height=600, scrollbars=yes");
+ this.setState({renderWindow: w});
+ }
+ w.document.body.innerHTML = DOMPurify.sanitize(m.body);
+ w.focus();
+ }} />;
+ }
+ break;
+ default:
+ return null;
+ }
+ };
+
+ closeRenderWindow = () => {
+ if (this.state.renderWindow) {
+ this.state.renderWindow.close();
+ }
+ };
render() {
let content = this.state.connectionContent;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6d111a3..0a754ad 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4068,6 +4068,11 @@ domhandler@^2.3.0:
dependencies:
domelementtype "1"
+dompurify@^2.1.1:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.1.1.tgz#b5aa988676b093a9c836d8b855680a8598af25fe"
+ integrity sha512-NijiNVkS/OL8mdQL1hUbCD6uty/cgFpmNiuFxrmJ5YPH2cXrPKIewoixoji56rbZ6XBPmtM8GA8/sf9unlSuwg==
+
domutils@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"