Fix open link in new tab from table field (opensearch-project#11458)

* open tab in new window

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* Fix open new tab from table

Signed-off-by: Sean Li <lnse@amazon.com>

* Changeset file for PR opensearch-project#11458 created/updated

* Revert "open tab in new window"

This reverts commit bb9060e.

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
Signed-off-by: Sean Li <lnse@amazon.com>
Co-authored-by: abbyhu2000 <abigailhu2000@gmail.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: 3 people

changelogs/fragments/11458.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix open link in new tab from table field ([#11458](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11458))

src/plugins/vis_type_table/public/components/table_vis_dynamic_table.test.tsx

@@ -372,4 +372,77 @@ describe('TableVisDynamicTable', () => {
       }),
     });
   });
+
+  it('should sanitize HTML content using dompurify', () => {
+    const tableWithLink: FormattedTableContext = {
+      ...mockTable,
+      rows: [{ col1: 'link', col2: 10 }],
+      formattedColumns: [
+        {
+          id: 'col1',
+          title: 'Column 1',
+          formatter: {
+            convert: () => '<a href="http://example.com" target="_blank">Link</a>',
+          } as any,
+          filterable: false,
+        },
+        {
+          id: 'col2',
+          title: 'Column 2',
+          formatter: { convert: (v: any) => v } as any,
+          filterable: false,
+        },
+      ],
+    };
+
+    const { container } = render(
+      <TableVisDynamicTable
+        table={tableWithLink}
+        visConfig={mockVisConfig}
+        event={mockHandlers.event}
+        uiState={mockUiState}
+      />
+    );
+
+    const anchorElement = container.querySelector('a');
+    expect(anchorElement).toHaveAttribute('href', 'http://example.com');
+    expect(anchorElement).toHaveAttribute('target', '_blank');
+    expect(anchorElement).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('should handle unsafe HTML content gracefully', () => {
+    const tableWithUnsafeHtml: FormattedTableContext = {
+      ...mockTable,
+      rows: [{ col1: 'unsafe', col2: 10 }],
+      formattedColumns: [
+        {
+          id: 'col1',
+          title: 'Column 1',
+          formatter: {
+            convert: () => '<img src="x" onerror="alert(1)">',
+          } as any,
+          filterable: false,
+        },
+        {
+          id: 'col2',
+          title: 'Column 2',
+          formatter: { convert: (v: any) => v } as any,
+          filterable: false,
+        },
+      ],
+    };
+
+    const { container } = render(
+      <TableVisDynamicTable
+        table={tableWithUnsafeHtml}
+        visConfig={mockVisConfig}
+        event={mockHandlers.event}
+        uiState={mockUiState}
+      />
+    );
+
+    const imgElement = container.querySelector('img');
+    expect(imgElement).toHaveAttribute('src', 'x');
+    expect(imgElement).not.toHaveAttribute('onerror');
+  });
 });

src/plugins/vis_type_table/public/components/table_vis_dynamic_table.tsx

@@ -20,6 +20,22 @@ import {
 } from '@elastic/eui';
 import dompurify from 'dompurify';
 import { orderBy } from 'lodash';
+
+dompurify.addHook('uponSanitizeAttribute', (node, event) => {
+  if (event.attrName === 'target') {
+    event.forceKeepAttr = true;
+  }
+});
+
+dompurify.addHook('afterSanitizeElements', (node) => {
+  if (node instanceof Element && node.tagName?.toUpperCase() === 'A') {
+    const target = node.getAttribute('target');
+    if (target && target !== '_self') {
+      node.setAttribute('rel', 'noopener noreferrer');
+    }
+  }
+});
+
 import { i18n } from '@osd/i18n';
 import './table_vis_dynamic_table.scss';
 import { FormattedTableContext } from '../table_vis_response_handler';