ui: fix userdata base64 encoding

ui/src/utils/plugins.js

@@ -484,6 +484,14 @@ export const genericUtilPlugin = {
       const regexExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi
       return regexExp.test(uuid)
     }
+
+    app.config.globalProperties.$toBase64AndURIEncoded = function (text) {
+      const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/
+      if (base64regex.test(text)) {
+        return text
+      }
+      return encodeURIComponent(btoa(unescape(encodeURIComponent(text))))
+    }
   }
 }
 

ui/src/views/compute/AutoScaleVmProfile.vue

@@ -519,7 +519,7 @@ export default {
         params.autoscaleuserid = this.autoscaleuserid
       }
       if (this.userdata && this.userdata.length > 0) {
-        params.userdata = encodeURIComponent(btoa(this.sanitizeReverse(this.userdata)))
+        params.userdata = this.$toBase64AndURIEncoded(this.userdata)
       }
 
       const httpMethod = params.userdata ? 'POST' : 'GET'
@@ -539,14 +539,6 @@ export default {
         this.loading = false
       })
     },
-    sanitizeReverse (value) {
-      const reversedValue = value
-        .replace(/&/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-
-      return reversedValue
-    },
     decodeUserData (userdata) {
       const decodedData = Buffer.from(userdata, 'base64')
       return decodedData.toString('utf-8')

ui/src/views/compute/CreateAutoScaleVmGroup.vue

@@ -2425,7 +2425,7 @@ export default {
         createVmGroupData.keypairs = this.sshKeyPairs.join(',')
         createVmGroupData.affinitygroupids = (values.affinitygroupids || []).join(',')
         if (values.userdata && values.userdata.length > 0) {
-          createVmGroupData.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.userdata)))
+          createVmGroupData.userdata = this.$toBase64AndURIEncoded(values.userdata)
         }
 
         // vm profile details
@@ -2702,14 +2702,6 @@ export default {
       this.params[name].options = { ...this.params[name].options, ...options }
       this.fetchOptions(this.params[name], name)
     },
-    sanitizeReverse (value) {
-      const reversedValue = value
-        .replace(/&/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-
-      return reversedValue
-    },
     fetchTemplateNics (template) {
       var nics = []
       this.nicToNetworkSelection = []

ui/src/views/compute/DeployVM.vue

@@ -836,7 +836,6 @@ import UserDataSelection from '@views/compute/wizard/UserDataSelection'
 import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import InstanceNicsNetworkSelectListView from '@/components/view/InstanceNicsNetworkSelectListView.vue'
-import { sanitizeReverse } from '@/utils/util'
 
 export default {
   name: 'Wizard',
@@ -1971,7 +1970,7 @@ export default {
         deployVmData.iothreadsenabled = values.iothreadsenabled
         deployVmData.iodriverpolicy = values.iodriverpolicy
         if (values.userdata && values.userdata.length > 0) {
-          deployVmData.userdata = encodeURIComponent(btoa(sanitizeReverse(values.userdata)))
+          deployVmData.userdata = this.$toBase64AndURIEncoded(values.userdata)
         }
         // step 2: select template/iso
         if (this.tabKey === 'templateid') {

ui/src/views/compute/EditVM.vue

@@ -123,7 +123,6 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
-import { sanitizeReverse } from '@/utils/util'
 
 export default {
   name: 'EditVM',
@@ -317,7 +316,7 @@ export default {
           params.group = values.group
         }
         if (values.userdata && values.userdata.length > 0) {
-          params.userdata = encodeURIComponent(btoa(sanitizeReverse(values.userdata)))
+          params.userdata = this.$toBase64AndURIEncoded(values.userdata)
         }
         this.loading = true
 

ui/src/views/compute/RegisterUserData.vue

@@ -184,14 +184,6 @@ export default {
     handleDomainChanged (domain) {
       this.selectedDomain = domain
     },
-    sanitizeReverse (value) {
-      const reversedValue = value
-        .replace(/&/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-
-      return reversedValue
-    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return
@@ -209,7 +201,7 @@ export default {
         if (this.isValidValueForKey(values, 'account') && values.account.length > 0) {
           params.account = values.account
         }
-        params.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.userdata)))
+        params.userdata = this.$toBase64AndURIEncoded(values.userdata)
 
         if (values.params != null && values.params.length > 0) {
           var userdataparams = values.params.join(',')

ui/src/views/compute/ResetUserData.vue

@@ -289,14 +289,6 @@ export default {
       this[type] = key
       this.userDataParams = []
     },
-    sanitizeReverse (value) {
-      const reversedValue = value
-        .replace(/&/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-
-      return reversedValue
-    },
     isUserAllowedToListUserDatas () {
       return Boolean('listUserData' in this.$store.getters.apis)
     },
@@ -346,7 +338,7 @@ export default {
         id: this.resource.id
       }
       if (values.userdata && values.userdata.length > 0) {
-        params.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.userdata)))
+        params.userdata = this.$toBase64AndURIEncoded(values.userdata)
       }
       if (values.userdataid) {
         params.userdataid = values.userdataid