Change next message functionality to use localStorage to eliminate possibility of XSS vulnerability

Author: gausie

CHANGELOG.md

@@ -1,5 +1,5 @@
 ## 0.5.4
-- When reconnecting to an existing chat session, the bot will send any message contained in the `?send=<message>` URL parameter once it has restored the socket.io connection
+- When reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the `NEXT_MESSAGE` constant. The message should be stringified JSON with a `message` property describing the message and an `expiry` property set to a UNIX timestamp in milliseconds after which this message should not be sent.
 
 ## 0.5.3
 - Added the parameter hideWhenNotConnected to not display the widget when the server is not connected (defaults to true)

README.md

@@ -210,7 +210,7 @@ emit('bot_uttered', message, room=socket_id)
 
 ## Sending a message on page load
 
-When reconnecting to an existing chat session, the bot will send any message contained in the `?send=<message>` URL parameter once it has restored the socket.io connection. This is useful if you would like your bot to be able to offer your user to navigate around the site.
+When reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the `NEXT_MESSAGE` constant. The message should be stringified JSON with a `message` property describing the message and an `expiry` property set to a UNIX timestamp in milliseconds after which this message should not be sent. This is useful if you would like your bot to be able to offer your user to navigate around the site.
 
 
 ## API

src/components/Widget/index.js

@@ -22,7 +22,7 @@ import {
 import { isSnippet, isVideo, isImage, isQR, isText } from './msgProcessor';
 import WidgetLayout from './layout';
 import { storeLocalSession, getLocalSession } from '../../store/reducers/helper';
-import { SESSION_NAME } from 'constants';
+import { SESSION_NAME, NEXT_MESSAGE } from 'constants';
 
 class Widget extends Component {
 
@@ -74,12 +74,16 @@ class Widget extends Component {
       } else {
         // If this is an existing session, it's possible we changed pages and want to send a
         // user message when we land.
-        const params = (new URL(document.location)).searchParams;
-        const send = params.get('send');
+        const nextMessage = window.localStorage.getItem(NEXT_MESSAGE);
 
-        if (send) {
-          this.props.dispatch(addUserMessage(send));
-          this.props.dispatch(emitUserMessage(send));
+        if (nextMessage !== null) {
+          const { message, expiry } = JSON.parse(nextMessage);
+          window.localStorage.removeItem(NEXT_MESSAGE);
+
+          if (expiry === 0 || expiry > Date.now()) {
+            this.props.dispatch(addUserMessage(message));
+            this.props.dispatch(emitUserMessage(message));
+          }
         }
       }
     });

src/constants.js

@@ -23,6 +23,8 @@ export const MESSAGES_TYPES = {
   CUSTOM_COMPONENT: 'component'
 };
 
+export const NEXT_MESSAGE = 'mrbot_next_message';
+
 export const PROP_TYPES = {
 
   MESSAGE: ImmutablePropTypes.contains({