fix: use noreferrer instead of noopener, also fix external link detec…

…tion in appdir footer noreferrer implies noopener. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/noreferrer and discussion here: jsx-eslint/eslint-plugin-react#2022
republik · Dec 11, 2023 · eaf288a · eaf288a
1 parent c404c30
commit eaf288a
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 15 deletions.
diff --git a/apps/www/components/Events/Detail.js b/apps/www/components/Events/Detail.js
@@ -82,7 +82,7 @@ const Event = withT(
       !!where && intersperse(where.split('\n'), (d, i) => <br key={i} />)
     if (locationLink && location) {
       location = (
-        <A href={locationLink} target='_blank' rel='noopener'>
+        <A href={locationLink} target='_blank' rel='noreferrer'>
           {location}
         </A>
       )
@@ -111,7 +111,7 @@ const Event = withT(
           />
           {!!link && (
             <P>
-              <A href={link} target='_blank' rel='noopener'>
+              <A href={link} target='_blank' rel='noreferrer'>
                 {link}
               </A>
             </P>

diff --git a/apps/www/components/Footer/index.js b/apps/www/components/Footer/index.js
@@ -271,7 +271,7 @@ const Footer = ({ t, me, signOut, isOnMarketingPage, hasActiveMembership }) => {
                 <a
                   {...navLinkStyle}
                   href='https://project-r.construction/'
-                  rel='noopener'
+                  rel='noreferrer'
                   target='_blank'
                 >
                   {t('footer/about/projecR')}
@@ -348,7 +348,7 @@ const Footer = ({ t, me, signOut, isOnMarketingPage, hasActiveMembership }) => {
               {...navLinkStyle}
               style={{ ...fontStyles.sansSerifRegular14 }}
               href='https://github.com/republik/plattform'
-              rel='noopener'
+              rel='noreferrer'
               target='_blank'
             >
               {t('footer/opensource')}

diff --git a/apps/www/components/Frame/PureFooter.js b/apps/www/components/Frame/PureFooter.js
@@ -68,15 +68,19 @@ const Footer = ({ en }) => (
         <A
           href='https://project-r.construction/'
           target='_blank'
-          rel='noopener'
+          rel='noreferrer'
         >
           Project R
         </A>
       </div>
     </div>
 
     <address {...styles.address} style={{ marginBottom: 20 }}>
-      <A href='https://goo.gl/maps/j1F8cXQhrmo' target='_blank' rel='noopener'>
+      <A
+        href='https://goo.gl/maps/j1F8cXQhrmo'
+        target='_blank'
+        rel='noreferrer'
+      >
         Republik AG
         <br />
         Sihlhallenstrasse 1<br />

diff --git a/apps/www/pages/mitteilung.js b/apps/www/pages/mitteilung.js
@@ -140,7 +140,7 @@ const Page = ({ router: { query: rawQuery }, me, inNativeApp }) => {
   const logo = isProjectR ? (
     <a
       href='https://project-r.construction/'
-      rel='noopener'
+      rel='noreferrer'
       target='_blank'
       {...styles.logoProjectR}
     >

diff --git a/apps/www/src/app/veranstaltungen/components/event-teaser.tsx b/apps/www/src/app/veranstaltungen/components/event-teaser.tsx
@@ -123,7 +123,7 @@ export const EventTeaser = ({ isPage, isMember, event }: EventProps) => {
             <dt>Wo</dt>
             <dd>
               {event.locationLink ? (
-                <Link href={event.locationLink} rel='noopener noreferrer'>
+                <Link href={event.locationLink} rel='noreferrer'>
                   {event.location}
                 </Link>
               ) : (

diff --git a/apps/www/src/components/layout/footer/index.tsx b/apps/www/src/components/layout/footer/index.tsx
@@ -26,8 +26,8 @@ function isLinkOfSameHost(link: string | UrlObject, host: string) {
     }
     return new URL(link).hostname === new URL(host).hostname
   } catch (e) {
-    // console.error(e)
-    return false
+    // Relative links fail to parse with new URL(), so we assume they are in fact relative
+    return true
   }
 }
 
@@ -291,14 +291,14 @@ export default async function Footer() {
 
                       const baseURL = process.env.NEXT_PUBLIC_BASE_URL
 
-                      const isExternalLink = isLinkOfSameHost(link, baseURL)
+                      const isExternalLink = !isLinkOfSameHost(link, baseURL)
 
                       return (
                         <li key={name}>
                           <Link
                             href={link}
                             target={isExternalLink ? '_blank' : undefined}
-                            rel={isExternalLink ? 'noopener' : undefined}
+                            rel={isExternalLink ? 'noreferrer' : undefined}
                           >
                             {name}
                           </Link>
@@ -359,7 +359,7 @@ export default async function Footer() {
             />
             <a
               href='https://github.com/republik/plattform'
-              rel='noopener'
+              rel='noreferrer'
               target='_blank'
             >
               Der Republik Code ist Open Source

diff --git a/apps/www/src/components/share/share-overlay.tsx b/apps/www/src/components/share/share-overlay.tsx
@@ -42,7 +42,7 @@ function ShareButton({
       target='_blank'
       href={href}
       onClick={onClick}
-      rel='noopener noreferrer'
+      rel='noreferrer'
     >
       <Icon size={24} />
       <span>{label}</span>

diff --git a/packages/styleguide/src/components/IconButton/index.tsx b/packages/styleguide/src/components/IconButton/index.tsx
@@ -75,7 +75,7 @@ const IconButton = React.forwardRef<
         onMouseDown={onMouseDown}
         href={href}
         target={target}
-        rel={target === '_blank' ? 'noopener' : ''}
+        rel={target === '_blank' ? 'noreferrer' : ''}
         ref={ref}
         title={title}
         disabled={disabled}