improve lighthouse best practices audit (#863)

* improve safety of cross origin links

* add additional safety for cross origin links

* remove duplicates

ui/src/components/comment-form.tsx

@@ -185,6 +185,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted font-weight-bold"
                 title={i18n.t('formatting_help')}
+                rel="noopener"
               >
                 <svg class="icon icon-inline">
                   <use xlinkHref="#icon-help-circle"></use>

ui/src/components/community.tsx

@@ -217,6 +217,7 @@ export class Community extends Component<any, State> {
           }`}
           target="_blank"
           title="RSS"
+          rel="noopener"
         >
           <svg class="icon text-muted small">
             <use xlinkHref="#icon-rss">#</use>

ui/src/components/iframely-card.tsx

@@ -44,7 +44,12 @@ export class IFramelyCard extends Component<
                       </span>
                     ) : (
                       <span>
-                        <a class="text-body" target="_blank" href={post.url}>
+                        <a
+                          class="text-body"
+                          target="_blank"
+                          href={post.url}
+                          rel="noopener"
+                        >
                           {post.embed_title}
                         </a>
                       </span>
@@ -55,6 +60,7 @@ export class IFramelyCard extends Component<
                       class="text-muted font-italic"
                       target="_blank"
                       href={post.url}
+                      rel="noopener"
                     >
                       {new URL(post.url).hostname}
                       <svg class="ml-1 icon">

ui/src/components/inbox.tsx

@@ -109,6 +109,7 @@ export class Inbox extends Component<any, InboxState> {
                   href={`/feeds/inbox/${UserService.Instance.auth}.xml`}
                   target="_blank"
                   title="RSS"
+                  rel="noopener"
                 >
                   <svg class="icon ml-2 text-muted small">
                     <use xlinkHref="#icon-rss">#</use>

ui/src/components/main.tsx

@@ -452,6 +452,7 @@ export class Main extends Component<any, MainState> {
           <a
             href={`/feeds/all.xml?sort=${SortType[this.state.sort]}`}
             target="_blank"
+            rel="noopener"
             title="RSS"
           >
             <svg class="icon text-muted small">
@@ -467,6 +468,7 @@ export class Main extends Component<any, MainState> {
               }`}
               target="_blank"
               title="RSS"
+              rel="noopener"
             >
               <svg class="icon text-muted small">
                 <use xlinkHref="#icon-rss">#</use>

ui/src/components/post-form.tsx

@@ -222,6 +222,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   )}`}
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                  rel="noopener"
                 >
                   {i18n.t('archive_link')}
                 </a>
@@ -302,6 +303,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               <a
                 href={markdownHelpUrl}
                 target="_blank"
+                rel="noopener"
                 class="d-inline-block float-right text-muted font-weight-bold"
                 title={i18n.t('formatting_help')}
               >

ui/src/components/post-listing.tsx

@@ -197,6 +197,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           className="text-body"
           href={post.url}
           target="_blank"
+          rel="noopener"
           title={post.url}
         >
           {this.imgThumb(this.getImage(true))}
@@ -227,6 +228,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             href={post.url}
             target="_blank"
             title={post.url}
+            rel="noopener"
           >
             <svg class="icon thumbnail">
               <use xlinkHref="#icon-external-link"></use>
@@ -303,6 +305,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       href={post.url}
                       target="_blank"
                       title={post.url}
+                      rel="noopener"
                     >
                       {post.name}
                     </a>
@@ -323,6 +326,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       href={post.url}
                       target="_blank"
                       title={post.url}
+                      rel="noopener"
                     >
                       {hostname(post.url)}
                       <svg class="ml-1 icon icon-inline">

ui/src/components/private-message-form.tsx

@@ -175,6 +175,7 @@ export class PrivateMessageForm extends Component<
                     <a
                       class="alert-link"
                       target="_blank"
+                      rel="noopener"
                       href="https://about.riot.im/"
                     >
                       #
@@ -236,6 +237,7 @@ export class PrivateMessageForm extends Component<
                   <a
                     href={markdownHelpUrl}
                     target="_blank"
+                    rel="noopener"
                     class="text-muted"
                     title={i18n.t('formatting_help')}
                   >

ui/src/components/sort-select.tsx

@@ -47,6 +47,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           className="text-muted"
           href={sortingHelpUrl}
           target="_blank"
+          rel="noopener"
           title={i18n.t('sorting_help')}
         >
           <svg class={`icon icon-inline`}>

ui/src/components/sponsors.tsx

@@ -89,7 +89,7 @@ export class Sponsors extends Component<any, any> {
           {silver.map(s => (
             <div class="card col-12 col-md-2">
               <div>
-                <a href={s.link} target="_blank">
+                <a href={s.link} target="_blank" rel="noopener">
                   💎 {s.name}
                 </a>
               </div>

ui/src/components/user.tsx

@@ -317,6 +317,7 @@ export class User extends Component<any, UserState> {
             SortType[this.state.sort]
           }`}
           target="_blank"
+          rel="noopener"
           title="RSS"
         >
           <svg class="icon mx-2 text-muted small">
@@ -463,6 +464,7 @@ export class User extends Component<any, UserState> {
                     !this.state.user.matrix_user_id && 'disabled'
                   }`}
                   target="_blank"
+                  rel="noopener"
                   href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
                 >
                   {i18n.t('send_secure_message')}
@@ -586,7 +588,11 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group row">
                 <label class="col-lg-5 col-form-label">
-                  <a href="https://about.riot.im/" target="_blank">
+                  <a
+                    href="https://about.riot.im/"
+                    target="_blank"
+                    rel="noopener"
+                  >
                     {i18n.t('matrix_user_id')}
                   </a>
                 </label>