Render Add-on Summary as Plaintext

src/amo/components/SearchResult/index.js

@@ -160,17 +160,11 @@ export class SearchResultBase extends React.Component<InternalProps> {
       );
     }
 
-    let summary = null;
-    if (showSummary) {
-      const summaryProps = {};
-      if (addon) {
-        summaryProps.dangerouslySetInnerHTML = sanitizeHTML(addon.summary);
-      } else {
-        summaryProps.children = <LoadingText />;
-      }
-
-      summary = <p className="SearchResult-summary" {...summaryProps} />;
-    }
+    const summary = (
+      <p className="SearchResult-summary">
+        {addon ? addon.summary : <LoadingText />}
+      </p>
+    );
 
     const promotedCategory = _getPromotedCategory({
       addon,
@@ -208,7 +202,7 @@ export class SearchResultBase extends React.Component<InternalProps> {
                 />
               ) : null}
             </h2>
-            {summary}
+            {showSummary ? summary : null}
 
             {showMetadata ? (
               <div className="SearchResult-metadata">

src/amo/pages/Addon/index.js

@@ -33,7 +33,7 @@ import {
 } from 'amo/experiments/20221130_amo_detail_category';
 import { getAddonsForSlug } from 'amo/reducers/addonsByAuthors';
 import { reviewListURL } from 'amo/reducers/reviews';
-import { getAddonURL, nl2br, sanitizeHTML, sanitizeUserHTML } from 'amo/utils';
+import { getAddonURL, sanitizeUserHTML } from 'amo/utils';
 import { getVersionById } from 'amo/reducers/versions';
 import {
   fetchAddon,
@@ -445,24 +445,10 @@ export class AddonBase extends React.Component {
 
     const addonType = addon ? addon.type : ADDON_TYPE_EXTENSION;
 
-    const summaryProps = {};
-    let showSummary = false;
-    if (addon) {
-      // Themes lack a summary so we do the inverse :-/
-      // TODO: We should file an API bug about this...
-      const summary = addon.summary ? addon.summary : addon.description;
-
-      if (summary && summary.length) {
-        summaryProps.dangerouslySetInnerHTML = sanitizeHTML(nl2br(summary), [
-          'a',
-          'br',
-        ]);
-        showSummary = true;
-      }
-    } else {
-      summaryProps.children = <LoadingText width={100} />;
-      showSummary = true;
-    }
+    const showSummary = !addon || addon.summary?.length;
+    const summary = (
+      <p className="Addon-summary">{addon ? addon.summary : <LoadingText />}</p>
+    );
 
     const addonPreviews = addon ? addon.previews : [];
 
@@ -519,9 +505,7 @@ export class AddonBase extends React.Component {
                 {addon && <InstallWarning addon={addon} />}
 
                 <div className="Addon-summary-and-install-button-wrapper">
-                  {showSummary ? (
-                    <p className="Addon-summary" {...summaryProps} />
-                  ) : null}
+                  {showSummary ? summary : null}
 
                   <InstallButtonWrapper addon={addon} />
                 </div>

src/blog-utils/StaticAddonCard/index.js

@@ -4,7 +4,6 @@ import makeClassName from 'classnames';
 
 import { ADDON_TYPE_STATIC_THEME } from 'amo/constants';
 import { getAddonIconUrl } from 'amo/imageUtils';
-import { nl2br, sanitizeHTML } from 'amo/utils';
 import AddonBadges from 'amo/components/AddonBadges';
 import AddonTitle from 'amo/components/AddonTitle';
 import GetFirefoxButton from 'amo/components/GetFirefoxButton';
@@ -33,7 +32,6 @@ export const StaticAddonCardBase = ({
     return null;
   }
 
-  const summary = addon.summary ? addon.summary : addon.description;
   const isTheme = addon.type === ADDON_TYPE_STATIC_THEME;
 
   return (
@@ -64,10 +62,7 @@ export const StaticAddonCardBase = ({
       <AddonBadges addon={addon} />
 
       <div className="StaticAddonCard-summary">
-        <p
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={sanitizeHTML(nl2br(summary), ['a', 'br'])}
-        />
+        <p>{addon.summary}</p>
       </div>
 
       <div className="StaticAddonCard-metadata">

tests/unit/amo/pages/TestAddon.js

@@ -661,11 +661,9 @@ describe(__filename, () => {
     ).toBeTruthy();
   });
 
-  it('sanitizes a summary', () => {
-    const summaryText = 'some summary text';
-    addon.summary = createLocalizedString(
-      `${summaryText}<script>alert(document.cookie);</script>`,
-    );
+  it('renders html as plaintext', () => {
+    const summaryText = '<script>alert(document.cookie);</script>';
+    addon.summary = createLocalizedString(summaryText);
     renderWithAddon();
 
     // Verify that the summary text exists without the script tag.
@@ -677,30 +675,6 @@ describe(__filename, () => {
     ).not.toBeInTheDocument();
   });
 
-  it('adds <br> tags for newlines in a summary', () => {
-    addon.summary = createLocalizedString('Hello\nI am an\n add-on.');
-    renderWithAddon();
-
-    const addonSummary = screen.getByClassName('Addon-summary');
-    expect(within(addonSummary).queryAllByTagName('br')).toHaveLength(2);
-  });
-
-  it('sanitizes bad description HTML', () => {
-    const descriptionText = 'some description text';
-    addon.summary = createLocalizedString(
-      `${descriptionText}<script>alert(document.cookie);</script>`,
-    );
-    renderWithAddon();
-
-    // Verify that the summary text exists without the script tag.
-    expect(screen.getByText(descriptionText)).toBeInTheDocument();
-    // Verify that no script tags exist in the summary.
-    const addonDescription = screen.getByClassName('AddonDescription');
-    expect(
-      within(addonDescription).queryByTagName('script'),
-    ).not.toBeInTheDocument();
-  });
-
   // This is a test helper that can be used to test the integration between
   // a ShowMoreCard and contentId.
   const testContentId = async ({
@@ -935,18 +909,16 @@ describe(__filename, () => {
     expect(screen.getByText(summary)).toBeInTheDocument();
   });
 
-  it('renders a summary with links', () => {
-    const summaryText = 'some summary text';
-    const linkText = 'link destination';
-    addon.summary = createLocalizedString(
-      `${summaryText} <a href="http://foo.com/">${linkText}</a>`,
-    );
+  it('does not render links in a summary', () => {
+    const linkText = 'click me!';
+    const summaryText = `blah blah <a href="http://foo.com/">${linkText}</a>`;
+    addon.summary = createLocalizedString(summaryText);
     renderWithAddon();
 
+    expect(screen.getByTextAcrossTags(summaryText)).toBeInTheDocument();
     expect(
-      screen.getByTextAcrossTags(`${summaryText} ${linkText}`),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: linkText })).toBeInTheDocument();
+      screen.queryByRole('link', { name: linkText }),
+    ).not.toBeInTheDocument();
   });
 
   it('renders an amo icon image', () => {