feat(cookies): improve parsing of cookie values quasarframework#12578

pdanpdan · Apr 4, 2023 · f4b0a43 · f4b0a43
1 parent 342bf3c
commit f4b0a43
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git a/ui/dev/src/pages/other/cookies.vue b/ui/dev/src/pages/other/cookies.vue
@@ -7,8 +7,16 @@
     <br>
     <q-btn label="Refresh" no-caps @click="refresh" color="accent" class="q-ma-sm" />
     <q-btn label="DEL ssr_cookie" no-caps @click="del('ssr_cookie')" color="accent" class="q-ma-sm" />
+    <q-btn label="Set test cookies" no-caps @click="setTestCookies" color="info" class="q-ma-sm" />
+    <q-btn label="DEL test cookies" no-caps @click="clearTestCookies" color="info" class="q-ma-sm" />
     <br><br>
     <q-markup-table flat bordered>
+      <colgroup>
+        <col width="10em" />
+        <col width="*" />
+        <col width="10em" />
+      </colgroup>
+
       <thead>
         <tr>
           <th class="text-left">
@@ -17,36 +25,63 @@
           <th class="text-left">
             Value
           </th>
+          <th class="text-center">
+            Type
+          </th>
         </tr>
       </thead>
 
       <tbody>
-        <tr v-for="(value, name) in cookies" :key="name">
+        <tr v-for="([ name, value ]) in cookies" :key="name">
           <td>{{ name }}</td>
-          <td>{{ value }}</td>
+          <td><pre class="q-ma-none">{{ value }}</pre></td>
+          <td class="text-center">{{ typeof value }}</td>
         </tr>
       </tbody>
     </q-markup-table>
   </div>
 </template>
 
 <script>
+function objToSortedArr (obj) {
+  return Object.keys(obj).sort().map(key => ([key, obj[key]]))
+}
+
 export default {
   data () {
     return {
-      cookies: this.$q.cookies.getAll()
+      cookies: objToSortedArr(this.$q.cookies.getAll())
     }
   },
   methods: {
     refresh () {
-      this.cookies = this.$q.cookies.getAll()
+      this.cookies = objToSortedArr(this.$q.cookies.getAll())
     },
     add (name) {
       this.$q.cookies.set(name, 'val')
       this.refresh()
     },
     del (name) {
       this.$q.cookies.remove(name)
+      this.refresh()
+    },
+
+    setTestCookies () {
+      this.$q.cookies.set('testSN', '19007199254740992')
+      this.$q.cookies.set('testS1', '190 071992\n " 54740992')
+      this.$q.cookies.set('testS2', 'j:123 - testing strings starting with "j:"')
+      this.$q.cookies.set('testN', 19007199254740992)
+      this.$q.cookies.set('testO', { a: 1 })
+      this.$q.cookies.set('testA', [1, '2', 3])
+
+      this.refresh()
+    },
+
+    clearTestCookies () {
+      ['testSN', 'testS1', 'testS2', 'testN', 'testO', 'testA'].forEach(name => {
+        this.$q.cookies.remove(name)
+      })
+
       this.refresh()
     }
   },
@@ -55,6 +90,8 @@ export default {
       console.log('setting ssr_cookie')
       this.$q.cookies.set('ssr_cookie', 'yes')
       this.$q.cookies.set('ssr_cookie-second', 'yes')
+
+      this.setTestCookies()
     }
   }
 }

diff --git a/ui/src/plugins/Cookies.js b/ui/src/plugins/Cookies.js
@@ -9,7 +9,11 @@ function decode (string) {
 }
 
 function stringifyCookieValue (value) {
-  return encode(value === Object(value) ? JSON.stringify(value) : '' + value)
+  return encode(
+    typeof value === 'string' && value.slice(0, 2) !== 'j:'
+      ? value
+      : 'j:' + JSON.stringify(value)
+  )
 }
 
 function read (string, reviverFn) {
@@ -27,12 +31,23 @@ function read (string, reviverFn) {
   // If we can't parse the cookie, ignore it, it's unusable.
   string = decode(string.replace(/\+/g, ' '))
 
-  try {
-    string = JSON.parse(string, reviverFn)
+  if (string.slice(0, 2) === 'j:') {
+    try {
+      return JSON.parse(string.slice(2), reviverFn)
+    }
+    catch (e) {}
   }
-  catch (e) {}
 
-  return string
+  try {
+    const parsed = JSON.parse(string, reviverFn)
+
+    return reviverFn !== void 0 || parsed === Object(parsed) || Array.isArray(parsed) === true
+      ? parsed
+      : string
+  }
+  catch (e) {
+    return string
+  }
 }
 
 function getString (msOffset) {