fix: xss on tippy fixes #2103

Co-authored-by: Liyas Thomas <hi@liyasthomas.com>

packages/hoppscotch-app/components/app/Header.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <header
-      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
+      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
     >
-      <div class="inline-flex items-center space-x-2">
+      <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
           label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
         />
         <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
       </div>
-      <div class="inline-flex items-center space-x-2">
+      <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
@@ -21,14 +21,14 @@
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click.native="invokeAction('modals.search.toggle')"
         />
         <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
@@ -47,7 +47,7 @@
           :label="t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="inline-flex items-center space-x-2">
+        <div v-else class="space-x-2 inline-flex items-center">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"
@@ -87,11 +87,11 @@
                   svg="user"
                 />
               </template>
-              <div class="flex flex-col px-2 text-tiny">
-                <span class="inline-flex font-semibold truncate">
+              <div class="flex flex-col text-tiny px-2">
+                <span class="font-semibold inline-flex truncate">
                   {{ currentUser.displayName }}
                 </span>
-                <span class="inline-flex truncate text-secondaryLight">
+                <span class="text-secondaryLight inline-flex truncate">
                   {{ currentUser.email }}
                 </span>
               </div>

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -8,14 +8,14 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.query") }}
           </label>
           <div class="flex">
             <ButtonSecondary
-              v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
               :title="`${t(
                 'request.run'
               )} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
@@ -26,7 +26,7 @@
             />
             <ButtonSecondary
               ref="saveRequest"
-              v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
               :title="`${t(
                 'request.save'
               )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
@@ -71,7 +71,7 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.variables") }}
@@ -114,7 +114,7 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("tab.headers") }}
@@ -154,7 +154,7 @@
           <div
             v-for="(header, index) in workingHeaders"
             :key="`header-${String(index)}`"
-            class="flex border-b divide-x divide-dividerLight border-dividerLight"
+            class="divide-x divide-dividerLight border-b border-dividerLight flex"
           >
             <SmartAutoComplete
               :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -180,7 +180,7 @@
               "
             />
             <input
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               :name="`value ${String(index)}`"
               :value="header.value"
@@ -232,15 +232,15 @@
           </div>
           <div
             v-if="workingHeaders.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_category.svg`"
               loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
               :alt="`${t('empty.headers')}`"
             />
-            <span class="pb-4 text-center">
+            <span class="text-center pb-4">
               {{ t("empty.headers") }}
             </span>
             <ButtonSecondary

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -251,6 +251,7 @@ export default defineComponent({
         tippy(t, {
           content: t.dataset["tippy-content"],
           theme: "tooltip",
+          allowHTML: true,
           popperOptions: {
             modifiers: {
               preventOverflow: {

packages/hoppscotch-app/plugins/v-tippy.js

@@ -5,6 +5,7 @@ Vue.use(VueTippy, {
   a11y: false,
   animateFill: false,
   arrowType: "round",
+  allowHTML: false,
   popperOptions: {
     modifiers: {
       preventOverflow: {