fhir-react 2.1.0 → 2.1.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.3",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

package/src/components/datatypes/Markdown/Markdown.js

@@ -3,13 +3,31 @@ import PropTypes from 'prop-types';
 import marked from 'marked';
 import DOMPurify from 'dompurify';
 
+// Prevent reverse-tabnabbing: any link with target="_blank" gets
+// rel="noopener noreferrer" enforced after sanitization. This runs at module
+// level instead of in Markdown component so it isn't re-registered on every render
+DOMPurify.addHook('afterSanitizeAttributes', node => {
+  if (node.tagName === 'A' && node.getAttribute('target') === '_blank') {
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
 const Markdown = props => {
   const { fhirData } = props;
   const markdown = String(fhirData);
   let html = null;
   try {
     const unsafeHTML = marked(markdown, { gfm: true });
-    html = DOMPurify.sanitize(unsafeHTML);
+    html = DOMPurify.sanitize(unsafeHTML, {
+      ALLOWED_TAGS: [
+        'p', 'br', 'strong', 'em', 'b', 'i', 'u', 's',
+        'code', 'pre', 'blockquote',
+        'ul', 'ol', 'li',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'a', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
+      ],
+      ALLOWED_ATTR: ['href', 'title', 'target', 'class', 'id'],
+    });
   } catch {}
 
   const dangerouslySetInnerHTML = html ? { __html: html } : null;

package/src/components/datatypes/Markdown/Markdown.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import marked from 'marked';
 import Markdown from './Markdown';
 import dedent from 'dedent';
 
@@ -26,6 +27,34 @@ describe('should render Markdown correctly', () => {
     expect(getByTestId('markdown').innerHTML.trim()).toEqual(expectedHTML);
   });
 
+  it('adds rel="noopener noreferrer" to target="_blank" links', () => {
+    const markdown = '<a href="https://example.com" target="_blank">Example</a>';
+    const { getByTestId } = render(<Markdown fhirData={markdown} />);
+    const anchor = getByTestId('markdown').querySelector('a[target="_blank"]');
+    expect(anchor).not.toBeNull();
+    expect(anchor.getAttribute('rel')).toEqual('noopener noreferrer');
+  });
+
+  it('does not add rel to links without target="_blank"', () => {
+    const markdown = '[Example](https://example.com)';
+    const { getByTestId } = render(<Markdown fhirData={markdown} />);
+    const anchor = getByTestId('markdown').querySelector('a');
+    expect(anchor).not.toBeNull();
+    expect(anchor.getAttribute('rel')).toBeNull();
+  });
+
+  it('strips img tags from markdown input', () => {
+    const markdown = '![tracker](https://evil.com/track.png)';
+
+    // confirm marked produces an img tag before sanitization
+    const unsanitized = marked(markdown, { gfm: true });
+    expect(unsanitized).toContain('<img');
+
+    // confirm the rendered output has it stripped
+    const { getByTestId } = render(<Markdown fhirData={markdown} />);
+    expect(getByTestId('markdown').querySelector('img')).toBeNull();
+  });
+
   it('escaping the HTML', () => {
     const markdown = dedent`
       # Header

package/src/components/resources/QuestionnaireResponse/Group.js

@@ -13,8 +13,7 @@ const Group = ({ data, prepareItems, isChild = false }) => {
   return data.map(prepareItems).map((item, i) => {
     const title =
       _get(item, 'title') ||
-      _get(item, 'text') ||
-      _get(item, '_linkId.fhir_comments.0');
+      _get(item, 'text');
 
     return (
       <ul

package/src/components/resources/QuestionnaireResponse/Group.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Group from './Group';
+
+const prepareItems = item => ({ ...item, isGroup: false });
+
+describe('Group', () => {
+  it('shows MissingValue when item has no title or text', () => {
+    const data = [{ linkId: 'test-id' }];
+    const { getByTestId } = render(
+      <Group data={data} prepareItems={prepareItems} />,
+    );
+    const item = getByTestId('linkId-test-id');
+    expect(item.querySelector('.fhir-ui__MissingValue')).not.toBeNull();
+  });
+
+  it('does not expose _linkId.fhir_comments as a label', () => {
+    const data = [
+      {
+        linkId: 'test-id',
+        _linkId: { fhir_comments: ['internal metadata'] },
+      },
+    ];
+    const { getByTestId } = render(
+      <Group data={data} prepareItems={prepareItems} />,
+    );
+    const item = getByTestId('linkId-test-id');
+    expect(item.textContent).not.toContain('internal metadata');
+    expect(item.querySelector('.fhir-ui__MissingValue')).not.toBeNull();
+  });
+
+  it('renders title when present', () => {
+    const data = [{ linkId: 'test-id', title: 'My Title' }];
+    const { getByTestId } = render(
+      <Group data={data} prepareItems={prepareItems} />,
+    );
+    expect(getByTestId('linkId-test-id').textContent).toContain('My Title');
+  });
+
+  it('renders text when title is absent', () => {
+    const data = [{ linkId: 'test-id', text: 'My Text' }];
+    const { getByTestId } = render(
+      <Group data={data} prepareItems={prepareItems} />,
+    );
+    expect(getByTestId('linkId-test-id').textContent).toContain('My Text');
+  });
+});