Maintenance: Improve clipboard handling of website chat

public/assets/chat/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:8-alpine
+
+ENV GULP_DIR "/tmp/gulp"
+
+RUN apk update && apk add bash
+SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+CMD bash # If you want to override CMD
+RUN npm install -g gulp
+
+COPY docker-entrypoint.sh /
+
+# enable volume to generate build files into the hosts FS
+VOLUME ["$GULP_DIR"]
+
+# start
+ENTRYPOINT ["/docker-entrypoint.sh"]

public/assets/chat/README.md

@@ -0,0 +1,5 @@
+# Zammad Chat build
+
+This folder contains a `docker` image and the required files to build the Zammad Chat from coffeescript and eco files. This workaround is required for now because of the outdated NodeJS 8 dependency.
+
+The build process can easily be started by executing the `build.sh` file. There is nothing more to it except of having `docker` installed and running.

public/assets/chat/build.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+set -o errexit
+set -o pipefail
+
+docker build --no-cache -t zammad/chat-build:latest .
+
+docker run --rm -v "$(pwd)/:/tmp/gulp" zammad/chat-build:latest

public/assets/chat/chat-no-jquery.coffee

@@ -762,7 +762,11 @@ do(window) ->
       console.log('p', docType, text)
       if docType is 'html'
         html = document.createElement('div')
-        html.innerHTML = text
+        # can't log because might contain malicious content
+        # @log.debug 'HTML clipboard', text
+        sanitized = DOMPurify.sanitize(text)
+        @log.debug 'sanitized HTML clipboard', sanitized
+        html.innerHTML = sanitized
         match = false
         htmlTmp = text
         regex = new RegExp('<(/w|w)\:[A-Za-z]')

public/assets/chat/chat.coffee

@@ -718,7 +718,9 @@ do($ = window.jQuery, window) ->
           text = text.replace(/<div><\/div>/g, '<div><br></div>')
         console.log('p', docType, text)
         if docType is 'html'
-          html = $("<div>#{text}</div>")
+          sanitized = DOMPurify.sanitize(text)
+          @log.debug 'sanitized HTML clipboard', sanitized
+          html = $("<div>#{sanitized}</div>")
           match = false
           htmlTmp = text
           regex = new RegExp('<(/w|w)\:[A-Za-z]')

public/assets/chat/chat.css

@@ -314,6 +314,7 @@
   line-height: 1.4em;
   font-size: inherit;
   -webkit-appearance: none;
+  -moz-appearance: none;
   appearance: none;
   border: none;
   background: none;
@@ -329,6 +330,7 @@
 
 .zammad-chat-button {
   -webkit-appearance: none;
+  -moz-appearance: none;
   appearance: none;
   font-family: inherit;
   font-size: inherit;
@@ -349,6 +351,7 @@
 
 .zammad-chat-button:disabled,
 .zammad-chat-input:disabled {
+  cursor: not-allowed;
   opacity: 0.3; }
 
 .zammad-chat-is-hidden {

public/assets/chat/docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+cd "${GULP_DIR}" || exit
+
+gulp js css no-jquery

public/assets/chat/gulpfile.js

@@ -25,11 +25,14 @@ gulp.task('js', function(){
   var templates = gulp.src('views/*.eco')
     .pipe(eco({namespace: 'zammadChatTemplates'}));
 
+  var purify = gulp.src('purify.min.js');
+
   var js = gulp.src('chat.coffee')
     .pipe(plumber())
     .pipe(coffee({bare: true}).on('error', gutil.log));
 
   return merge(templates, js)
+    .add(purify)
     .pipe(concat('chat.js'))
     .pipe(gulp.dest('./'))
     .pipe(uglify())
@@ -42,11 +45,14 @@ gulp.task('no-jquery', function(){
   var templates = gulp.src('views/*.eco')
     .pipe(eco({namespace: 'zammadChatTemplates'}));
 
+  var purify = gulp.src('purify.min.js');
+
   var js = gulp.src('chat-no-jquery.coffee')
     .pipe(plumber())
     .pipe(coffee({bare: true}).on('error', gutil.log));
 
   return merge(templates, js)
+    .add(purify)
     .pipe(concat('chat-no-jquery.js'))
     .pipe(gulp.dest('./'))
     .pipe(uglify())