Allow links in headings, add attrs with DOMPurify

src/disco/components/Addon.js

@@ -38,6 +38,15 @@ import {
 
 import 'disco/css/Addon.scss';
 
+purify.addHook('afterSanitizeAttributes', (node) => {
+  // Set all elements owning target to target=_blank
+  // and add rel="noreferrer".
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noreferrer');
+  }
+});
+
 function sanitizeHTML(text, allowTags = []) {
   // TODO: Accept tags to allow and run through dom-purify.
   return {
@@ -213,7 +222,7 @@ export class Addon extends React.Component {
             <h2
               ref="heading"
               className="heading"
-              dangerouslySetInnerHTML={sanitizeHTML(heading, ['span'])} />
+              dangerouslySetInnerHTML={sanitizeHTML(heading, ['a', 'span'])} />
             {this.getDescription()}
           </div>
           <div className="install-button">

src/disco/css/Addon.scss

@@ -95,10 +95,38 @@ $addon-padding: 20px;
     font-weight: medium;
     margin: 0;
 
+    a:link,
+    a:visited,
+    a:focus,
+    a:hover,
+    a:active {
+      color: $primary-font-color;
+      text-decoration: none;
+    }
+
+    a:focus,
+    a:hover {
+      text-decoration: underline;
+    }
+
     span {
       color: $secondary-font-color;
       font-size: 14px;
       font-weight: normal;
+
+      a:link,
+      a:visited,
+      a:focus,
+      a:hover,
+      a:active {
+        color: $secondary-font-color;
+        text-decoration: none;
+      }
+
+      a:focus,
+      a:hover {
+        text-decoration: underline;
+      }
     }
   }
 

tests/client/disco/components/TestAddon.js

@@ -146,6 +146,25 @@ describe('<Addon />', () => {
       assert.include(root.refs.heading.innerHTML, 'Hey! This is <span>an add-on</span>');
     });
 
+    it('purifies the heading with a link and adds link attrs', () => {
+      root = renderAddon({
+        ...result,
+        heading: 'This is <span>an <a href="https://addons.mozilla.org">add-on</a>/span>',
+      });
+      const link = root.refs.heading.querySelector('a');
+      assert.equal(link.getAttribute('rel'), 'noreferrer');
+      assert.equal(link.getAttribute('target'), '_blank');
+    });
+
+    it('purifies the heading with a bad link', () => {
+      root = renderAddon({
+        ...result,
+        heading: 'This is <span>an <a href="javascript:alert(1)">add-on</a>/span>',
+      });
+      const link = root.refs.heading.querySelector('a');
+      assert.equal(link.getAttribute('href'), null);
+    });
+
     it('purifies the editorial description', () => {
       root = renderAddon({
         ...result,