Adding nofollow to links. Fixes #542 (#543)

* Adding nofollow to links. Fixes #542

* Running prettier.

src/shared/components/common/markdown-textarea.tsx

@@ -10,6 +10,7 @@ import {
   mdToHtml,
   pictrsDeleteToast,
   randomStr,
+  relTags,
   setupTippy,
   setupTribute,
   toast,
@@ -297,7 +298,7 @@ export class MarkdownTextArea extends Component<
               href={markdownHelpUrl}
               class="btn btn-sm text-muted font-weight-bold"
               title={i18n.t("formatting_help")}
-              rel="noopener"
+              rel={relTags}
             >
               <Icon icon="help-circle" classes="icon-inline" />
             </a>

src/shared/components/common/pictrs-image.tsx

@@ -32,8 +32,9 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           loading="lazy"
           className={classNames({
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
-            "banner": this.props.banner,
-            "thumbnail rounded": this.props.thumbnail && !this.props.icon && !this.props.banner,
+            banner: this.props.banner,
+            "thumbnail rounded":
+              this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,

src/shared/components/common/sort-select.tsx

@@ -1,7 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { SortType } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { randomStr, sortingHelpUrl } from "../../utils";
+import { randomStr, relTags, sortingHelpUrl } from "../../utils";
 import { Icon } from "./icon";
 
 interface SortSelectProps {
@@ -71,7 +71,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         <a
           className="text-muted"
           href={sortingHelpUrl}
-          rel="noopener"
+          rel={relTags}
           title={i18n.t("sorting_help")}
         >
           <Icon icon="help-circle" classes="icon-inline" />

src/shared/components/community/community-link.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { CommunitySafe } from "lemmy-js-client";
-import { hostname, showAvatars } from "../../utils";
+import { hostname, relTags, showAvatars } from "../../utils";
 import { PictrsImage } from "../common/pictrs-image";
 
 interface CommunityLinkProps {
@@ -48,6 +48,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
         title={apubName}
         className={`${this.props.muted ? "text-muted" : ""}`}
         href={link}
+        rel={relTags}
       >
         {this.avatarAndName(displayName)}
       </a>

src/shared/components/community/community.tsx

@@ -38,6 +38,7 @@ import {
   getPageFromProps,
   getSortTypeFromProps,
   notifyPost,
+  relTags,
   restoreScrollPosition,
   saveCommentRes,
   saveScrollPosition,
@@ -370,7 +371,7 @@ export class Community extends Component<any, State> {
         <span class="mr-2">
           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
         </span>
-        <a href={communityRss} title="RSS" rel="noopener">
+        <a href={communityRss} title="RSS" rel={relTags}>
           <Icon icon="rss" classes="text-muted small" />
         </a>
         <link rel="alternate" type="application/atom+xml" href={communityRss} />

src/shared/components/home/home.tsx

@@ -43,6 +43,7 @@ import {
   mdToHtml,
   notifyPost,
   numToSI,
+  relTags,
   restoreScrollPosition,
   saveCommentRes,
   saveScrollPosition,
@@ -695,7 +696,7 @@ export class Home extends Component<any, HomeState> {
         </span>
         {this.state.listingType == ListingType.All && (
           <>
-            <a href={allRss} rel="noopener" title="RSS">
+            <a href={allRss} rel={relTags} title="RSS">
               <Icon icon="rss" classes="text-muted small" />
             </a>
             <link rel="alternate" type="application/atom+xml" href={allRss} />
@@ -703,7 +704,7 @@ export class Home extends Component<any, HomeState> {
         )}
         {this.state.listingType == ListingType.Local && (
           <>
-            <a href={localRss} rel="noopener" title="RSS">
+            <a href={localRss} rel={relTags} title="RSS">
               <Icon icon="rss" classes="text-muted small" />
             </a>
             <link rel="alternate" type="application/atom+xml" href={localRss} />
@@ -712,7 +713,7 @@ export class Home extends Component<any, HomeState> {
         {UserService.Instance.myUserInfo &&
           this.state.listingType == ListingType.Subscribed && (
             <>
-              <a href={frontRss} title="RSS" rel="noopener">
+              <a href={frontRss} title="RSS" rel={relTags}>
                 <Icon icon="rss" classes="text-muted small" />
               </a>
               <link

src/shared/components/home/instances.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import { GetSiteResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { setIsoData } from "../../utils";
+import { relTags, setIsoData } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 
 interface InstancesState {
@@ -60,7 +60,7 @@ export class Instances extends Component<any, InstancesState> {
       <ul>
         {items.map(i => (
           <li>
-            <a href={`https://${i}`} rel="noopener">
+            <a href={`https://${i}`} rel={relTags}>
               {i}
             </a>
           </li>

src/shared/components/person/inbox.tsx

@@ -30,6 +30,7 @@ import {
   editCommentRes,
   fetchLimit,
   isBrowser,
+  relTags,
   saveCommentRes,
   setIsoData,
   setupTippy,
@@ -157,7 +158,7 @@ export class Inbox extends Component<any, InboxState> {
               <h5 class="mb-2">
                 {i18n.t("inbox")}
                 <small>
-                  <a href={inboxRss} title="RSS" rel="noopener">
+                  <a href={inboxRss} title="RSS" rel={relTags}>
                     <Icon icon="rss" classes="ml-2 text-muted small" />
                   </a>
                   <link

src/shared/components/person/person-listing.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { PersonSafe } from "lemmy-js-client";
-import { hostname, isCakeDay, showAvatars } from "../../utils";
+import { hostname, isCakeDay, relTags, showAvatars } from "../../utils";
 import { PictrsImage } from "../common/pictrs-image";
 import { CakeDay } from "./cake-day";
 
@@ -60,6 +60,7 @@ export class PersonListing extends Component<PersonListingProps, any> {
             title={apubName}
             className={this.props.muted ? "text-muted" : "text-info"}
             href={link}
+            rel={relTags}
           >
             {this.avatarAndName(displayName)}
           </a>

src/shared/components/person/profile.tsx

@@ -29,6 +29,7 @@ import {
   mdToHtml,
   numToSI,
   previewLines,
+  relTags,
   restoreScrollPosition,
   routeSortTypeToEnum,
   saveCommentRes,
@@ -346,7 +347,7 @@ export class Profile extends Component<any, ProfileState> {
           hideHot
           hideMostComments
         />
-        <a href={profileRss} rel="noopener" title="RSS">
+        <a href={profileRss} rel={relTags} title="RSS">
           <Icon icon="rss" classes="text-muted small mx-2" />
         </a>
         <link rel="alternate" type="application/atom+xml" href={profileRss} />
@@ -419,7 +420,7 @@ export class Profile extends Component<any, ProfileState> {
                     className={`d-flex align-self-start btn btn-secondary mr-2 ${
                       !pv.person.matrix_user_id && "invisible"
                     }`}
-                    rel="noopener"
+                    rel={relTags}
                     href={`https://matrix.to/#/${pv.person.matrix_user_id}`}
                   >
                     {i18n.t("send_secure_message")}

src/shared/components/person/settings.tsx

@@ -34,6 +34,7 @@ import {
   isBrowser,
   personSelectName,
   personToChoice,
+  relTags,
   setIsoData,
   setTheme,
   setupTippy,
@@ -464,7 +465,7 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <div class="form-group row">
             <label class="col-sm-5 col-form-label" htmlFor="matrix-user-id">
-              <a href={elementUrl} rel="noopener">
+              <a href={elementUrl} rel={relTags}>
                 {i18n.t("matrix_user_id")}
               </a>
             </label>

src/shared/components/post/metadata-card.tsx

@@ -1,6 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { Post } from "lemmy-js-client";
 import { i18n } from "../../i18next";
+import { relTags } from "../../utils";
 import { Icon } from "../common/icon";
 
 interface MetadataCardProps {
@@ -35,7 +36,7 @@ export class MetadataCard extends Component<
                 <div class="card-body">
                   {post.name !== post.embed_title && [
                     <h5 class="card-title d-inline">
-                      <a class="text-body" href={post.url} rel="noopener">
+                      <a class="text-body" href={post.url} rel={relTags}>
                         {post.embed_title}
                       </a>
                     </h5>,
@@ -43,7 +44,7 @@ export class MetadataCard extends Component<
                       <a
                         class="text-muted font-italic"
                         href={post.url}
-                        rel="noopener"
+                        rel={relTags}
                       >
                         {new URL(post.url).hostname}
                         <Icon icon="external-link" classes="ml-1" />

src/shared/components/post/post-form.tsx

@@ -33,6 +33,7 @@ import {
   isBrowser,
   isImage,
   pictrsDeleteToast,
+  relTags,
   setupTippy,
   toast,
   validTitle,
@@ -219,7 +220,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                       this.state.postForm.url
                     )}`}
                     class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
-                    rel="noopener"
+                    rel={relTags}
                   >
                     archive.org {i18n.t("archive_link")}
                   </a>
@@ -228,7 +229,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                       this.state.postForm.url
                     )}`}
                     class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
-                    rel="noopener"
+                    rel={relTags}
                   >
                     ghostarchive.org {i18n.t("archive_link")}
                   </a>
@@ -237,7 +238,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                       this.state.postForm.url
                     )}`}
                     class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
-                    rel="noopener"
+                    rel={relTags}
                   >
                     archive.today {i18n.t("archive_link")}
                   </a>

src/shared/components/post/post-listing.tsx

@@ -36,6 +36,7 @@ import {
   mdToHtml,
   numToSI,
   previewLines,
+  relTags,
   setupTippy,
   showScores,
   wsClient,
@@ -244,7 +245,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <a
           class="text-body d-inline-block position-relative mb-2"
           href={post.url}
-          rel="noopener"
+          rel={relTags}
           title={post.url}
         >
           {this.imgThumb(this.imageSrc)}
@@ -272,7 +273,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             className="text-body"
             href={post.url}
             title={post.url}
-            rel="noopener"
+            rel={relTags}
           >
             <div class="thumbnail rounded bg-light d-flex justify-content-center">
               <Icon icon="external-link" classes="d-flex align-items-center" />
@@ -335,7 +336,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 className="text-muted font-italic"
                 href={post_view.post.url}
                 title={post_view.post.url}
-                rel="noopener"
+                rel={relTags}
               >
                 {hostname(post_view.post.url)}
               </a>
@@ -418,7 +419,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               className={!post.stickied ? "text-body" : "text-primary"}
               href={post.url}
               title={post.url}
-              rel="noopener"
+              rel={relTags}
             >
               {post.name}
             </a>

src/shared/components/private_message/private-message-form.tsx

@@ -16,6 +16,7 @@ import {
   authField,
   capitalizeFirstLetter,
   isBrowser,
+  relTags,
   setupTippy,
   toast,
   wsClient,
@@ -141,7 +142,7 @@ export class PrivateMessageForm extends Component<
                     #
                     <a
                       class="alert-link"
-                      rel="noopener"
+                      rel={relTags}
                       href="https://element.io/get-started"
                     >
                       #

src/shared/utils.ts

@@ -75,6 +75,8 @@ export const postRefetchSeconds: number = 60 * 1000;
 export const fetchLimit = 20;
 export const mentionDropdownFetchLimit = 10;
 
+export const relTags = "noopener nofollow";
+
 export const themes = [
   "litera",
   "materia",