pref: Use rel="noopener noreferrer nofollow ugc" on user links

Author: HowieHz

packages/comment-widget/package.json

@@ -45,6 +45,7 @@
     "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
     "@tiptap/core": "^3.10.4",
+    "@tiptap/extension-link": "^3.10.4",
     "@tiptap/extensions": "^3.10.4",
     "@tiptap/pm": "^3.10.4",
     "@tiptap/starter-kit": "^3.10.4",

packages/comment-widget/src/base-comment-item.ts

@@ -62,7 +62,7 @@ export class BaseCommentItem extends LitElement {
                 class="item-author font-medium text-sm text-text-1 hover:underline"
                 target="_blank"
                 href=${ifDefined(this.userWebsite)}
-                rel="noopener noreferrer"
+                rel="noopener noreferrer nofollow ugc"
               >
                 ${this.userDisplayName}
               </a>

packages/comment-widget/src/comment-content.ts

@@ -9,6 +9,16 @@ export class CommentContent extends LitElement {
   @property({ type: String })
   content: string = '';
 
+  private applyLinkAttributes() {
+    const anchors =
+      this.shadowRoot?.querySelectorAll<HTMLAnchorElement>('.content a');
+
+    anchors?.forEach((anchor) => {
+      anchor.target = '_blank';
+      anchor.rel = 'noopener noreferrer nofollow ugc';
+    });
+  }
+
   protected override firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
@@ -38,6 +48,11 @@ export class CommentContent extends LitElement {
     );
   }
 
+  protected override updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    this.applyLinkAttributes();
+  }
+
   private extractLanguageFromCodeElement(codeElement: Element): string | null {
     const supportedPrefixes = ['language-', 'lang-'];
 

packages/comment-widget/src/comment-editor.ts

@@ -95,12 +95,12 @@ export class CommentEditor extends LitElement {
 
   async createEditor() {
     const { Editor } = await import('@tiptap/core');
-    const { Placeholder } = await import('@tiptap/extensions');
+    const { CharacterCount, Placeholder } = await import('@tiptap/extensions');
+    const { Link } = await import('@tiptap/extension-link');
     const { StarterKit } = await import('@tiptap/starter-kit');
     const { CodeBlockShiki } = await import(
       'tiptap-extension-code-block-shiki'
     );
-    const { CharacterCount } = await import('@tiptap/extensions');
 
     this.loading = false;
 
@@ -119,6 +119,15 @@ export class CommentEditor extends LitElement {
           placeholder: this.placeholder || msg('Write a comment'),
         }),
 
+        Link.configure({
+          openOnClick: false,
+          defaultProtocol: 'https',
+          HTMLAttributes: {
+            target: '_blank',
+            rel: 'noopener noreferrer nofollow ugc',
+          },
+        }),
+
         CodeBlockShiki.configure({
           defaultTheme: 'github-dark',
         }),

packages/comment-widget/src/user-avatar.ts

@@ -67,7 +67,7 @@ export class UserAvatar extends LitElement {
 
   override render() {
     if (this.href) {
-      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer">
+      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer nofollow ugc">
         ${this.renderAvatarContent()}
       </a>`;
     }