feat(project): add rel noopener to external links in Markdown

jwplayer · Jun 23, 2021 · 15a5eaa · 15a5eaa
1 parent ae0ac47
commit 15a5eaa
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/MarkdownComponent/MarkdownComponent.test.tsx b/src/components/MarkdownComponent/MarkdownComponent.test.tsx
@@ -10,10 +10,22 @@ describe('<MarkdownComponent>', () => {
 
     expect(container).toMatchSnapshot();
   });
-  test('marks a link', () => {
+
+  test('should create a save and valid link element', () => {
     const markdownString = 'This is a test markdown string with a [testlink](https://www.example.com)';
-    const { container } = render(<MarkdownComponent markdownString={markdownString} />);
+    const { getByText } = render(<MarkdownComponent markdownString={markdownString} />);
+
+    expect(getByText('testlink')).toHaveAttribute('href', 'https://www.example.com');
+    expect(getByText('testlink')).toHaveAttribute('rel', 'noopener');
+    expect(getByText('testlink')).toHaveAttribute('target', '_blank');
+  });
+
+  test('should create a valid link element for local pages', () => {
+    const markdownString = 'This is a test markdown string with a [testlink](/page)';
+    const { getByText } = render(<MarkdownComponent markdownString={markdownString} />);
 
-    expect(container).toContainHTML('<a href');
+    expect(getByText('testlink')).toHaveAttribute('href', '/page');
+    expect(getByText('testlink')).not.toHaveAttribute('rel', 'noopener');
+    expect(getByText('testlink')).not.toHaveAttribute('target', '_blank');
   });
 });
diff --git a/src/components/MarkdownComponent/MarkdownComponent.tsx b/src/components/MarkdownComponent/MarkdownComponent.tsx
@@ -21,9 +21,11 @@ const parseMarkdown = (value: string): string =>
     .replace(MARKDOWN_STRONG_REGEX, (...[, word]) => `<strong>${word}</strong>`)
     .replace(MARKDOWN_ITALIC_REGEX, (...[, word]) => `<em>${word}</em>`)
     .replace(MARKDOWN_LINK_REGEX, (...[, word, link]) => {
-      const target = /^(https?|www\.|\/\/)/.test(link) ? ' target="_blank"' : '';
+      const externalLink = /^(https?|www\.|\/\/)/.test(link);
+      const target = externalLink ? ' target="_blank"' : '';
+      const rel = externalLink ? ' rel="noopener"' : '';
 
-      return `<a href="${link}"${target}>${word}</a>`;
+      return `<a href="${link}"${target}${rel}>${word}</a>`;
     })
     .replace(LINEBREAK_REGEX, '<br />'); // linebreak formatter should run last
 

diff --git a/src/components/MarkdownComponent/__snapshots__/MarkdownComponent.test.tsx.snap b/src/components/MarkdownComponent/__snapshots__/MarkdownComponent.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<MarkdownComponent> renders and matches snapshot 1`] = `
     This is a test markdown string with a 
     <a
       href="https://www.example.com"
+      rel="noopener"
       target="_blank"
     >
       testlink