Additional validation and escaping for file names.

This adds additional front and backend validations for task order file
names. We are now restricting file names to a whitelist regex of
[A-Za-z0-9\-_ \.] for simplicity.

Note:
On the frontend, the filename string must have at least one character.
This is not true in the backend validation; because of the way the
entire task order form is validated, requiring input would break the
business logic currently implemented.

js/components/__tests__/upload_input.test.js

@@ -70,7 +70,7 @@ describe('UploadInput Test', () => {
     })
 
     const component = wrapper.find(uploadinput)
-    const event = { target: { value: '', files: [{ name: '' }] } }
+    const event = { target: { value: '', files: [{ name: 'sample.pdf' }] } }
 
     component.setMethods({
       getUploader: async () => new MockUploader('token', 'objectName'),

js/components/upload_input.js

@@ -1,5 +1,6 @@
 import { buildUploader } from '../lib/upload'
 import { emitFieldChange } from '../lib/emitters'
+import inputValidations from '../lib/input_validations'
 
 export default {
   name: 'uploadinput',
@@ -28,6 +29,7 @@ export default {
       changed: false,
       uploadError: false,
       sizeError: false,
+      filenameError: false,
       downloadLink: '',
     }
   },
@@ -50,6 +52,10 @@ export default {
         this.sizeError = true
         return
       }
+      if (!this.validateFileName(file.name)) {
+        this.filenameError = true
+        return
+      }
 
       const uploader = await this.getUploader()
       const response = await uploader.upload(file)
@@ -71,6 +77,10 @@ export default {
         this.uploadError = true
       }
     },
+    validateFileName: function(name) {
+      const regex = inputValidations.restrictedFileName.match
+      return regex.test(name)
+    },
     removeAttachment: function(e) {
       e.preventDefault()
       this.attachment = null
@@ -118,7 +128,8 @@ export default {
       return (
         (!this.changed && this.initialErrors) ||
         this.uploadError ||
-        this.sizeError
+        this.sizeError ||
+        this.filenameError
       )
     },
     valid: function() {

js/lib/input_validations.js

@@ -104,4 +104,11 @@ export default {
     unmask: ['(', ')', '-', ' '],
     validationError: 'Please enter a 10-digit phone number',
   },
+  restrictedFileName: {
+    mask: false,
+    match: /^[A-Za-z0-9\-_ \.]+$/,
+    unmask: [],
+    validationError:
+      'File names can only contain the characters A-Z, 0-9, space, hyphen, underscore, and period.',
+  },
 }