fix: Improve External Link Security - Meeds-io/MIPs#159

Prior to this change, the target external link of sidebar items was all time 'NEW TAB Strategy' and without a 'rel' attribute. This change will fix the behavior of 'External Link Target' in addition to the Security fix of missing 'rel' attribute.
Meeds-io · Dec 9, 2024 · cec2456 · cec2456
1 parent 2b42af0
commit cec2456
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 1 deletion.
diff --git a/webapp/src/main/webapp/vue-apps/common/js/NavigationUtils.js b/webapp/src/main/webapp/vue-apps/common/js/NavigationUtils.js
@@ -31,3 +31,8 @@ export function getNavigationNodeTarget(navigation) {
   navigation.nodeTarget = navigation?.target === 'SAME_TAB' && '_self' || '_blank';
   return navigation.nodeTarget;
 }
+
+export function getNavigationNodeRel(navigation) {
+  navigation.nodeRel = navigation?.target === 'NEW_TAB' && 'nofollow noreferrer noopener' || null;
+  return navigation.nodeRel;
+}
diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListItem.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListItem.vue
@@ -270,7 +270,10 @@ export default {
       const attributes = {};
       if (this.isUrl) {
         attributes.href = this.url;
-        attributes.target = this.item.target;
+        attributes.target = this.target;
+        if (attributes.target === '_blank') {
+          attributes.rel = 'nofollow noreferrer noopener';
+        }
       }
       return attributes;
     },

diff --git a/webapp/src/main/webapp/vue-apps/site-details/components/SiteNavigationItem.vue b/webapp/src/main/webapp/vue-apps/site-details/components/SiteNavigationItem.vue
@@ -19,6 +19,7 @@
   <a
     :href="uri"
     :target="target"
+    :rel="rel"
     :ripple="false"
     class="d-flex px-0"
     @mouseover="showAction = true"
@@ -108,6 +109,9 @@ export default {
     target() {
       return this.navigation?.target === 'SAME_TAB' && '_self' || '_blank';
     },
+    rel() {
+      return this.target === '_blank' && 'nofollow noreferrer noopener' || null;
+    },
     icon() {
       return this.navigation?.icon || 'fas fa-folder';
     },

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue
@@ -34,6 +34,7 @@
         v-if="hasPage || hasChildren && childrenHasPage"
         :href="navigationNodeUri"
         :target="navigationNodeTarget"
+        :rel="navigationNodeRel"
         :link="hasPage"
         :aria-label="navigation.label"
         :class="`mx-auto text-break ${notClickable}`"
@@ -111,6 +112,9 @@ export default {
     navigationNodeTarget() {
       return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
     },
+    navigationNodeRel() {
+      return this.$navigationUtils.getNavigationNodeRel(this.navigation);
+    },
     childrenHasPage() {
       return this.checkChildrenHasPage(this.navigation);
     },

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue
@@ -27,6 +27,7 @@
       v-if="hasPage || hasChildren && childrenHasPage"
       :href="navigationNodeUri"
       :target="navigationNodeTarget"
+      :rel="navigationNodeRel"
       :link="!!hasPage"
       class="pt-0 pb-0"
       @click="checkLink">
@@ -123,6 +124,9 @@ export default {
     navigationNodeTarget() {
       return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
     },
+    navigationNodeRel() {
+      return this.$navigationUtils.getNavigationNodeRel(this.navigation);
+    },
     isSelected() {
       return this.navigationNodeUri === this.selectedPath;
     },

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue
@@ -30,6 +30,7 @@
         v-bind="attrs"
         :href="navigationNodeUri"
         :target="navigationNodeTarget"
+        :rel="navigationNodeRel"
         :disabled="!hasPage && !hasChildren"
         :link="hasPage"
         :aria-label="navigation.label"
@@ -100,6 +101,9 @@ export default {
     navigationNodeTarget() {
       return this.$navigationUtils.getNavigationNodeTarget(this.navigation);
     },
+    navigationNodeRel() {
+      return this.$navigationUtils.getNavigationNodeRel(this.navigation);
+    },
   },
   methods: {
     updateNavigationState(value) {

diff --git a/...p/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuSubItem.vue b/...p/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuSubItem.vue
@@ -49,6 +49,7 @@
               :key="nav.id"
               :href="nav.nodeUri || $navigationUtils.getNavigationNodeUri(baseSiteUri, nav)"
               :target="nav.nodeTarget || $navigationUtils.getNavigationNodeTarget(nav)"
+              :rel="nav.nodeRel || $navigationUtils.getNavigationNodeRel(nav)"
               :link="!!nav.pageKey"
               @click="checkLink(nav, $event)">
               <v-list-item-content>