refactor: improve the sanitization for expiration modal (#1213)

openedx · Oct 25, 2024 · 96970cf · 96970cf
1 parent 01091da
commit 96970cf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 29 deletions.
diff --git a/src/components/expired-subscription-modal/index.jsx b/src/components/expired-subscription-modal/index.jsx
@@ -1,6 +1,7 @@
 import {
   useToggle, AlertModal, Button, ActionRow,
 } from '@openedx/paragon';
+import DOMPurify from 'dompurify';
 import { useSubscriptions } from '../app/data';
 
 const ExpiredSubscriptionModal = () => {
@@ -9,37 +10,27 @@ const ExpiredSubscriptionModal = () => {
   if (!customerAgreement?.hasCustomLicenseExpirationMessaging) {
     return null;
   }
-  const onClickHandler = () => {
-    let url = customerAgreement?.urlForButtonInModal;
-
-    if (url) {
-      // Check if the URL starts with 'http://' or 'https://'
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        // Prepend 'https://' if the URL is missing the protocol
-        url = `https://${url}`;
-      }
-
-      // Navigate to the full URL
-      window.open(url, '_blank'); // Opening in a new tab
-    }
-  };
   return (
     <AlertModal
-      title={<h3 className="mb-2">{customerAgreement?.modalHeaderText}</h3>}
+      title={<h3 className="mb-2">{customerAgreement.modalHeaderText}</h3>}
       isOpen={isOpen}
       isBlocking
       footerNode={(
         <ActionRow>
-          <Button
-            onClick={onClickHandler}
-          >
-            {customerAgreement?.buttonLabelInModal}
+          <Button href={customerAgreement.urlForButtonInModal}>
+            {customerAgreement.buttonLabelInModal}
           </Button>
         </ActionRow>
       )}
     >
       {/* eslint-disable-next-line react/no-danger */}
-      <div dangerouslySetInnerHTML={{ __html: customerAgreement?.expiredSubscriptionModalMessaging }} />
+      <div dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(
+          customerAgreement.expiredSubscriptionModalMessaging,
+          { USE_PROFILES: { html: true } },
+        ),
+      }}
+      />
     </AlertModal>
   );
 };

diff --git a/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx b/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx
@@ -1,5 +1,6 @@
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
 import ExpiredSubscriptionModal from '../index';
 import { useSubscriptions } from '../../app/data';
 import { renderWithRouter } from '../../../utils/tests';
@@ -79,24 +80,21 @@ describe('<ExpiredSubscriptionModal />', () => {
           modalHeaderText: 'Expired Subscription',
           buttonLabelInModal: 'Continue Learning',
           expiredSubscriptionModalMessaging: '<p>Your subscription has expired.</p>',
-          urlForButtonInModal: 'example.com',
+          urlForButtonInModal: 'https://example.com',
         },
       },
     });
 
-    // Mock window.open
-    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {});
-
     // Render the component
     renderWithRouter(<ExpiredSubscriptionModal />);
 
+    // Find the Continue Learning button
     const continueButton = screen.getByText('Continue Learning');
-    continueButton.click();
 
-    // Assert window.open was called with the correct URL
-    expect(windowOpenSpy).toHaveBeenCalledWith('https://example.com', '_blank');
+    // Simulate a click on the button
+    userEvent.click(continueButton);
 
-    // Restore window.open after the test
-    windowOpenSpy.mockRestore();
+    // Check that the button was rendered and clicked
+    expect(continueButton).toBeInTheDocument();
   });
 });