Add anchor tag conversion to open in new tab in email display (#603)

browser-extensions/chrome/src/app/pages/EmailDetails.tsx

@@ -8,6 +8,7 @@ import { useMinDurationLoading } from '../hooks/useMinDurationLoading';
 import EncryptionUtility from '../../shared/EncryptionUtility';
 import { Attachment } from '../../shared/types/webapi/Attachment';
 import { useLoading } from '../context/LoadingContext';
+import ConversionUtility from '../utils/ConversionUtility';
 
 /**
  * Email details page.
@@ -227,7 +228,7 @@ const EmailDetails: React.FC = () => {
         <div className="bg-white">
           {email.messageHtml ? (
             <iframe
-              srcDoc={email.messageHtml}
+              srcDoc={ConversionUtility.convertAnchorTagsToOpenInNewTab(email.messageHtml)}
               className="w-full min-h-[500px] border-0"
               title="Email content"
             />

browser-extensions/chrome/src/app/utils/ConversionUtility.tsx

@@ -0,0 +1,56 @@
+/**
+ * Utility class for conversion operations.
+ */
+class ConversionUtility {
+  /**
+   * Convert all anchor tags to open in a new tab.
+   * @param html HTML input.
+   * @returns HTML with all anchor tags converted to open in a new tab when clicked on.
+   *
+   * Note: same implementation exists in c-sharp version in AliasVault.Shared.Utilities.ConversionUtility.cs
+   */
+  public convertAnchorTagsToOpenInNewTab(html: string): string {
+    try {
+      // Create a DOM parser
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+
+      // Select all anchor tags with href attribute
+      const anchors = doc.querySelectorAll('a[href]');
+
+      if (anchors.length > 0) {
+        anchors.forEach((anchor: Element) => {
+          // Handle target attribute
+          if (!anchor.hasAttribute('target')) {
+            anchor.setAttribute('target', '_blank');
+          } else if (anchor.getAttribute('target') !== '_blank') {
+            anchor.setAttribute('target', '_blank');
+          }
+
+          // Handle rel attribute for security
+          if (!anchor.hasAttribute('rel')) {
+            anchor.setAttribute('rel', 'noopener noreferrer');
+          } else {
+            const relValue = anchor.getAttribute('rel') ?? '';
+            const relValues = new Set(relValue.split(' ').filter(val => val.trim() !== ''));
+
+            relValues.add('noopener');
+            relValues.add('noreferrer');
+
+            anchor.setAttribute('rel', Array.from(relValues).join(' '));
+          }
+        });
+      }
+
+      return doc.documentElement.outerHTML;
+    } catch (ex) {
+      // Log the exception
+      console.error(`Error in convertAnchorTagsToOpenInNewTab: ${ex instanceof Error ? ex.message : String(ex)}`);
+
+      // Return the original HTML if an error occurs
+      return html;
+    }
+  }
+}
+
+export default new ConversionUtility();

src/Shared/AliasVault.Shared/Utilities/ConversionUtility.cs

@@ -19,6 +19,9 @@ public static class ConversionUtility
     /// </summary>
     /// <param name="html">HTML input.</param>
     /// <returns>HTML with all anchor tags converted to open in a new tab when clicked on.</returns>
+    /// <remarks>
+    /// Note: same implementation exists in browser extension Typescript version in ConversionUtility.ts.
+    /// </remarks>
     public static string ConvertAnchorTagsToOpenInNewTab(string html)
     {
         try