Security issue fix

src/components/assets/DynamicLinks.vue

@@ -6,7 +6,7 @@
         :key="index"
         class="card"
         :style="`background-image: url('${t.background}'); background-size: cover; background-position: center;`"
-        @click="goToLink(t.link)"
+        @click="navigateInNewTab(t.link)"
       >
         <div class="card--info">
           <div
@@ -28,6 +28,7 @@ import linksData from 'src/data/dynamic_links.json';
 import { useI18n } from 'vue-i18n';
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
+import { navigateInNewTab } from 'src/util-general';
 
 interface Data {
   background: string;
@@ -86,14 +87,10 @@ export default defineComponent({
       { immediate: true }
     );
 
-    const goToLink = (link: string): void => {
-      window.open(link, '_blank');
-    };
-
     return {
       truncate,
       items,
-      goToLink,
+      navigateInNewTab,
     };
   },
 });

src/components/assets/SideAds.vue

@@ -4,7 +4,9 @@
       <swiper-slide v-for="(item, index) in combinedCampaigns" :key="index">
         <div
           class="card--swiper"
-          @click="item.link !== undefined ? goToLink(item.link) : goDappPageLink(item.address)"
+          @click="
+            item.link !== undefined ? navigateInNewTab(item.link) : goDappPageLink(item.address)
+          "
         >
           <img :src="item.img" class="card__img" />
           <div class="card__bottom">
@@ -34,6 +36,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Autoplay } from 'swiper/modules';
+import { navigateInNewTab } from 'src/util-general';
+
 export default defineComponent({
   components: {
     Swiper,
@@ -42,9 +46,6 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const { combinedCampaigns } = useCampaign();
-    const goToLink = (link: string): void => {
-      window.open(link, '_blank');
-    };
     const goDappPageLink = (address: string | undefined): void => {
       const base = networkParam + Path.DappStaking + Path.Dapp;
       const url = `${base}?dapp=${address?.toLowerCase()}`;
@@ -53,7 +54,7 @@ export default defineComponent({
     return {
       modules: [Autoplay],
       combinedCampaigns,
-      goToLink,
+      navigateInNewTab,
       goDappPageLink,
     };
   },

src/components/common/Notification/NotificationBar.vue

@@ -44,6 +44,7 @@ import { AlertType } from 'src/store/general/state';
 import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs, PropType, computed, ref } from 'vue';
 import { AlertMsg } from 'src/modules/toast';
+import { navigateInNewTab } from 'src/util-general';
 
 export default defineComponent({
   name: 'NotificationBar',
@@ -92,7 +93,7 @@ export default defineComponent({
     const isCopiedType = computed<boolean>(() => props.alertType === AlertType.Copied);
 
     const goToSubscan = (): void => {
-      window.open(props.explorerUrl, '_blank');
+      navigateInNewTab(props.explorerUrl);
     };
 
     return {

src/components/header/mobile/BlogPosts.vue

@@ -5,7 +5,7 @@
         v-for="(t, index) in items"
         :key="index"
         class="card--blog-post"
-        @click="goToLink(t.link)"
+        @click="navigateInNewTab(t.link)"
       >
         <img :src="t.img" :alt="t.title" />
       </div>
@@ -16,6 +16,7 @@
 import { defineComponent, ref, watch } from 'vue';
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
+import { navigateInNewTab } from 'src/util-general';
 
 interface Data {
   img: string;
@@ -55,13 +56,9 @@ export default defineComponent({
       { immediate: true }
     );
 
-    const goToLink = (link: string): void => {
-      window.open(link, '_blank');
-    };
-
     return {
       items,
-      goToLink,
+      navigateInNewTab,
     };
   },
 });

src/components/header/styles/modal-network-wallet.scss

@@ -43,7 +43,7 @@
 }
 
 .card--astar {
-  width: 212px;
+  width: 100%;
   height: 140px;
   border-radius: 16px;
   box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
@@ -62,7 +62,7 @@
 
 .line--bottom-bg {
   position: absolute;
-  width: 95%;
+  width: 98%;
   height: 5px;
   border-radius: 0 0 16px 16px / 0 0 6px 6px;
   bottom: 0;

src/components/sidenav/SidebarOption.vue

@@ -180,6 +180,7 @@ import { useStore } from 'src/store';
 import { socialUrl, docsUrl } from 'src/links';
 import { CultureCode, languagesSelector } from 'src/i18n';
 import { i18n } from 'src/boot/i18n';
+import { navigateInNewTab } from 'src/util-general';
 
 export default defineComponent({
   components: {
@@ -199,7 +200,7 @@ export default defineComponent({
 
     const selectLinkIdx = ref(-1);
     const goLink = (url: string) => {
-      window.open(url, '_blank');
+      navigateInNewTab(url);
     };
 
     const goToLink = (linkIdx: number) => {

src/staking-v3/components/DynamicAdsArea.vue

@@ -30,7 +30,9 @@
           <swiper-slide v-for="(item, index) in combinedCampaigns" :key="index">
             <div
               class="card--swiper"
-              @click="item.link !== undefined ? goToLink(item.link) : goDappPageLink(item.address)"
+              @click="
+                item.link !== undefined ? navigateInNewTab(item.link) : goDappPageLink(item.address)
+              "
             >
               <img :src="item.img" class="card__img" />
               <div class="card__bottom">
@@ -57,6 +59,7 @@ import { defineComponent } from 'vue';
 import { networkParam, Path } from 'src/router/routes';
 import { useRouter } from 'vue-router';
 import { useCampaign } from '../hooks';
+import { navigateInNewTab } from 'src/util-general';
 
 // Import Swiper
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -73,10 +76,6 @@ export default defineComponent({
     const router = useRouter();
     const { combinedCampaigns } = useCampaign();
 
-    const goToLink = (link: string): void => {
-      window.open(link, '_blank');
-    };
-
     const goDappPageLink = (address: string | undefined): void => {
       const base = networkParam + Path.DappStaking + Path.Dapp;
       const url = `${base}?dapp=${address?.toLowerCase()}`;
@@ -86,7 +85,7 @@ export default defineComponent({
     return {
       modules: [Navigation],
       combinedCampaigns,
-      goToLink,
+      navigateInNewTab,
       goDappPageLink,
     };
   },

src/staking-v3/components/dapp/DappV3.vue

@@ -78,13 +78,7 @@ export default defineComponent({
     const { getDapp, registeredDapps } = useDapps();
     const { navigateToVote, navigateToHome } = useDappStakingNavigation();
     const store = useStore();
-
     const dappAddress = computed<string>(() => route.query.dapp as string);
-
-    const goLink = (url: string) => {
-      window.open(url, '_blank');
-    };
-
     const dapp = computed<CombinedDappInfo | undefined>(() => getDapp(dappAddress.value));
 
     // Fetch full dApp model from API. Initially, store contains dapp with props required for the main page.
@@ -134,7 +128,6 @@ export default defineComponent({
     return {
       Path,
       dapp,
-      goLink,
       navigateToVote,
       isZkEvm,
       twitterUrl,

src/staking-v3/components/dapp/ProjectDetails.vue

@@ -15,7 +15,7 @@
             :width="140"
             :height="25"
             class="button--website"
-            @click="goLink(dapp.extended?.url ?? '/')"
+            @click="navigateInNewTab(dapp.extended?.url ?? '/')"
           >
             {{ $t('dappStaking.dappPage.goToWebsite') }}
           </astar-irregular-button>
@@ -194,6 +194,7 @@ import { computed, defineComponent, PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { CommunityType } from '@astar-network/astar-sdk-core';
 import { CombinedDappInfo } from 'src/staking-v3/logic';
+import { navigateInNewTab } from 'src/util-general';
 
 export default defineComponent({
   props: {
@@ -243,15 +244,11 @@ export default defineComponent({
       }
     });
 
-    const goLink = (url: string) => {
-      window.open(url, '_blank');
-    };
-
     return {
       sanitizeData,
       getShortenAddress,
       copyAddress,
-      goLink,
+      navigateInNewTab,
       explorerUrl,
       communities,
       virtualMachineTags,

src/util-general.ts

@@ -1,3 +1,5 @@
+const sanitizeUrl = (url: string): string => url.replace(/[^-A-Za-z0-9+&@#/%?=~_|!:,.;()]/g, '');
+
 export const navigateInNewTab = (url: string): void => {
-  window.open(url, '_blank', 'noopener noreferrer');
+  window.open(sanitizeUrl(url), '_blank', 'noopener noreferrer');
 };