Merge pull request #20692 from overleaf/ar-limit-length-of-user-editable-fields

[web] limit length of user editable fields

GitOrigin-RevId: 239398dd05dcde7fea0ac8415e41396ef01c2b74

services/web/app/src/models/User.js

@@ -6,6 +6,7 @@ const { ObjectId } = Schema
 
 // See https://stackoverflow.com/questions/386294/what-is-the-maximum-length-of-a-valid-email-address/574698#574698
 const MAX_EMAIL_LENGTH = 254
+const MAX_NAME_LENGTH = 255
 
 const UserSchema = new Schema(
   {
@@ -26,8 +27,16 @@ const UserSchema = new Schema(
         reconfirmedAt: { type: Date },
       },
     ],
-    first_name: { type: String, default: '' },
-    last_name: { type: String, default: '' },
+    first_name: {
+      type: String,
+      default: '',
+      maxlength: MAX_NAME_LENGTH,
+    },
+    last_name: {
+      type: String,
+      default: '',
+      maxlength: MAX_NAME_LENGTH,
+    },
     role: { type: String, default: '' },
     institution: { type: String, default: '' },
     hashedPassword: String,

services/web/app/src/router.js

@@ -313,6 +313,12 @@ function initialize(webRouter, privateApiRouter, publicApiRouter) {
   webRouter.post(
     '/user/settings',
     AuthenticationController.requireLogin(),
+    validate({
+      body: Joi.object({
+        first_name: Joi.string().allow(null, '').max(255),
+        last_name: Joi.string().allow(null, '').max(255),
+      }).unknown(),
+    }),
     UserController.updateUserSettings
   )
   webRouter.post(

services/web/frontend/js/features/settings/components/account-info-section.tsx

@@ -88,6 +88,7 @@ function AccountInfoSection() {
           type="text"
           label={t('first_name')}
           value={firstName}
+          maxLength={255}
           handleChange={handleFirstNameChange}
           canEdit={canUpdateNames}
           required={false}
@@ -96,6 +97,7 @@ function AccountInfoSection() {
           id="last-name-input"
           type="text"
           label={t('last_name')}
+          maxLength={255}
           value={lastName}
           handleChange={handleLastNameChange}
           canEdit={canUpdateNames}
@@ -145,6 +147,7 @@ type ReadOrWriteFormGroupProps = {
   value?: string
   handleChange: (event: any) => void
   canEdit: boolean
+  maxLength?: number
   required: boolean
 }
 
@@ -155,6 +158,7 @@ function ReadOrWriteFormGroup({
   value,
   handleChange,
   canEdit,
+  maxLength,
   required,
 }: ReadOrWriteFormGroupProps) {
   const [validationMessage, setValidationMessage] = useState('')
@@ -186,6 +190,7 @@ function ReadOrWriteFormGroup({
         type={type}
         required={required}
         value={value}
+        maxLength={maxLength}
         data-ol-dirty={!!validationMessage}
         onChange={handleChangeAndValidity}
         onInvalid={handleInvalid}

services/web/test/acceptance/src/SettingsTests.js

@@ -48,4 +48,13 @@ describe('SettingsPage', function () {
       })
     })
   })
+
+  it('prevents first name from being updated to a string longer than 255 characters', function (done) {
+    const newFirstName = 'a'.repeat(256)
+    return this.user.updateSettings({ first_name: newFirstName }, error => {
+      expect(error).to.exist
+      expect(error.message).to.contain('update settings failed: status=400')
+      return done()
+    })
+  })
 })

services/web/test/acceptance/src/helpers/User.js

@@ -1142,7 +1142,7 @@ class User {
           if (response.statusCode !== 200) {
             return callback(
               new Error(
-                `login failed: status=${
+                `update settings failed: status=${
                   response.statusCode
                 } body=${JSON.stringify(body)}`
               )