@instructure/outcomes-ui 4.1.3 → 4.1.5

package/lib/components/Gradebook/popovers/StudentPopover/__tests__/index.test.js

@@ -257,80 +257,156 @@ describe('StudentPopover', function () {
       }, _callee0);
     })));
   });
-  describe('Loading State', function () {
-    it('shows a spinner when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee1() {
-      var _t6;
+  describe('Security', function () {
+    it('does not render the mastery report link for a javascript: URI', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee1() {
       return (0, _regenerator2.default)().w(function (_context1) {
         while (1) switch (_context1.n) {
           case 0:
             renderComponent({
-              isLoading: true
+              studentGradesUrl: 'javascript:alert(document.cookie)'
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
-            _t6 = expect;
             _context1.n = 1;
-            return _react2.screen.findByTitle('Loading user details');
+            return _react2.screen.findByText('Message');
           case 1:
-            _t6(_context1.v).toBeInTheDocument();
+            expect(_react2.screen.queryByText('View Mastery Report')).not.toBeInTheDocument();
           case 2:
             return _context1.a(2);
         }
       }, _callee1);
     })));
-    it('does not show student details when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee10() {
+    it('does not render the mastery report link for a data: URI', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee10() {
       return (0, _regenerator2.default)().w(function (_context10) {
         while (1) switch (_context10.n) {
           case 0:
             renderComponent({
-              isLoading: true
+              studentGradesUrl: 'data:text/html,<script>alert(1)</script>'
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
             _context10.n = 1;
-            return _react2.screen.findByTitle('Loading user details');
+            return _react2.screen.findByText('Message');
           case 1:
-            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+            expect(_react2.screen.queryByText('View Mastery Report')).not.toBeInTheDocument();
           case 2:
             return _context10.a(2);
         }
       }, _callee10);
     })));
-  });
-  describe('Error State', function () {
-    it('shows an error message when error prop is provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee11() {
-      var _t7;
+    it('renders the mastery report link for a safe https URL', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee11() {
+      var safeUrl, masteryLink;
       return (0, _regenerator2.default)().w(function (_context11) {
         while (1) switch (_context11.n) {
           case 0:
+            safeUrl = 'https://canvas.instructure.com/courses/123/grades/1';
             renderComponent({
-              error: 'Failed to load student details'
+              studentGradesUrl: safeUrl
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
-            _t7 = expect;
             _context11.n = 1;
-            return _react2.screen.findByText('Failed to load student details');
+            return _react2.screen.findByText('View Mastery Report');
           case 1:
-            _t7(_context11.v).toBeInTheDocument();
+            masteryLink = _context11.v;
+            expect(masteryLink.closest('a')).toHaveAttribute('href', safeUrl);
           case 2:
             return _context11.a(2);
         }
       }, _callee11);
     })));
-    it('does not show student details when error is present', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee12() {
+    it('renders the mastery report link for a safe http URL', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee12() {
+      var safeUrl, masteryLink;
       return (0, _regenerator2.default)().w(function (_context12) {
         while (1) switch (_context12.n) {
           case 0:
+            safeUrl = 'http://canvas.instructure.com/courses/123/grades/1';
             renderComponent({
-              error: 'Something went wrong'
+              studentGradesUrl: safeUrl
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
             _context12.n = 1;
-            return _react2.screen.findByText('Something went wrong');
+            return _react2.screen.findByText('View Mastery Report');
           case 1:
-            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+            masteryLink = _context12.v;
+            expect(masteryLink.closest('a')).toHaveAttribute('href', safeUrl);
           case 2:
             return _context12.a(2);
         }
       }, _callee12);
     })));
   });
+  describe('Loading State', function () {
+    it('shows a spinner when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee13() {
+      var _t6;
+      return (0, _regenerator2.default)().w(function (_context13) {
+        while (1) switch (_context13.n) {
+          case 0:
+            renderComponent({
+              isLoading: true
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _t6 = expect;
+            _context13.n = 1;
+            return _react2.screen.findByTitle('Loading user details');
+          case 1:
+            _t6(_context13.v).toBeInTheDocument();
+          case 2:
+            return _context13.a(2);
+        }
+      }, _callee13);
+    })));
+    it('does not show student details when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee14() {
+      return (0, _regenerator2.default)().w(function (_context14) {
+        while (1) switch (_context14.n) {
+          case 0:
+            renderComponent({
+              isLoading: true
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _context14.n = 1;
+            return _react2.screen.findByTitle('Loading user details');
+          case 1:
+            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+          case 2:
+            return _context14.a(2);
+        }
+      }, _callee14);
+    })));
+  });
+  describe('Error State', function () {
+    it('shows an error message when error prop is provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee15() {
+      var _t7;
+      return (0, _regenerator2.default)().w(function (_context15) {
+        while (1) switch (_context15.n) {
+          case 0:
+            renderComponent({
+              error: 'Failed to load student details'
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _t7 = expect;
+            _context15.n = 1;
+            return _react2.screen.findByText('Failed to load student details');
+          case 1:
+            _t7(_context15.v).toBeInTheDocument();
+          case 2:
+            return _context15.a(2);
+        }
+      }, _callee15);
+    })));
+    it('does not show student details when error is present', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee16() {
+      return (0, _regenerator2.default)().w(function (_context16) {
+        while (1) switch (_context16.n) {
+          case 0:
+            renderComponent({
+              error: 'Something went wrong'
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _context16.n = 1;
+            return _react2.screen.findByText('Something went wrong');
+          case 1:
+            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+          case 2:
+            return _context16.a(2);
+        }
+      }, _callee16);
+    })));
+  });
 });

package/lib/components/Gradebook/popovers/StudentPopover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAcvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAyB7D,KAAK,UAAU,GACX;IAAE,cAAc,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACvF;IAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3F,KAAK,iBAAiB,GAClB;IAAE,qBAAqB,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3D;IAAE,qBAAqB,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,oBAAoB,CAAA;CAAE,CAAA;AAE3E,KAAK,UAAU,GACX;IAAE,eAAe,EAAE,SAAS,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAA;CAAE,GACxD;IAAE,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAA;AA2K/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwFxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/popovers/StudentPopover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAcvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAyB7D,KAAK,UAAU,GACX;IAAE,cAAc,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACvF;IAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3F,KAAK,iBAAiB,GAClB;IAAE,qBAAqB,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3D;IAAE,qBAAqB,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,oBAAoB,CAAA;CAAE,CAAA;AAE3E,KAAK,UAAU,GACX;IAAE,eAAe,EAAE,SAAS,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAA;CAAE,GACxD;IAAE,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtD,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAA;AA6K/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwFxD,CAAA"}

package/lib/components/Gradebook/popovers/StudentPopover/index.js

@@ -108,6 +108,9 @@ var MasteryScores = function MasteryScores(_ref2) {
     }, bucket.count)));
   }))));
 };
+var isSafeUrl = function isSafeUrl(url) {
+  return /^(https?:\/\/|\/)/i.test(url);
+};
 var Actions = function Actions(_ref3) {
   var studentGradesUrl = _ref3.studentGradesUrl;
   var _useState = (0, _react.useState)(false),
@@ -130,7 +133,7 @@ var Actions = function Actions(_ref3) {
     borderWidth: "none small none none",
     width: "0px",
     height: "1.4rem"
-  }), studentGradesUrl && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+  }), studentGradesUrl && isSafeUrl(studentGradesUrl) && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
     href: studentGradesUrl,
     variant: "standalone"
   }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {

package/lib/components/Gradebook/table/Cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AACrE,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACpE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA4GD,eAAO,MAAM,IAAI,uCAA2C,CAAA;AAI5D,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAA;AACrE,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACpE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAiGD,eAAO,MAAM,IAAI,uCAA2C,CAAA;AAI5D,eAAe,IAAI,CAAA"}

package/lib/components/Gradebook/table/Cell/index.js

@@ -91,19 +91,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // onKeyDown should be stable (useCallback), but check just in case
   if (prevProps.onKeyDown !== nextProps.onKeyDown) return false;
 
-  // For function children (render functions), we can't compare the function itself
-  // Instead, we rely on the fact that if all other props (especially data-cell-id
-  // which includes col.key and row data) are the same, the function would produce
-  // the same output. This is safe because:
-  // - row data doesn't change during column reorder
-  // - col.key is stable per column
-  // - The function just calls col.render with that data
-  var prevChildrenIsFunction = typeof prevProps.children === 'function';
-  var nextChildrenIsFunction = typeof nextProps.children === 'function';
-  if (prevChildrenIsFunction !== nextChildrenIsFunction) return false;
-
-  // For non-function children, compare directly
-  if (!nextChildrenIsFunction && prevProps.children !== nextProps.children) return false;
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (prevProps.children !== nextProps.children) return false;
 
   // For function children, skip comparison - they're always new references but produce same output
   // when all other props are the same

package/lib/components/Gradebook/table/ColumnHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/ColumnHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAA;AAExF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,OAAO,CAAC,sBAAsB,CAAC,GACjC,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,WAAW,CAAC,CAAA;AAkH9C,eAAO,MAAM,YAAY,gLApEtB,iBAAiB,uBAoEwD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/ColumnHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAA;AAExF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,OAAO,CAAC,sBAAsB,CAAC,GACjC,IAAI,CAAC,SAAS,EAAE,aAAa,GAAG,WAAW,CAAC,CAAA;AAiH9C,eAAO,MAAM,YAAY,gLApEtB,iBAAiB,uBAoEwD,CAAA"}

package/lib/components/Gradebook/table/ColumnHeader/index.js

@@ -37,11 +37,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // onMove and onDragEnd should be stable (useCallback in stories/parent)
   // but we don't need to check them since they're filtered out before DOM
 
-  // Skip children comparison - children might be new React elements on each render,
-  // but if all stable identifiers (id, data-cell-id, data-col-key) are the same,
-  // the column hasn't actually changed and we can safely skip re-rendering.
-  // This matches Cell's approach of relying on stable props rather than comparing children.
-
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (prevProps.children !== nextProps.children) return false;
   return true;
 };
 var ColumnHeaderComponent = function ColumnHeaderComponent(_ref) {

package/lib/components/Gradebook/table/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAG7D,OAAO,EAAwB,KAAK,UAAU,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAKjG,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEjE,MAAM,MAAM,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACnD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,iBAAiB,CAAA;CACnC,CAAA;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,KAChD,KAAK,CAAC,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAA;AAE/C,eAAO,MAAM,cAAc,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,kFAQ5F,UAAU,CAAC,IAAI,CAAC,sBAyPlB,CAAA;AAED,eAAO,MAAM,KAAK,EAEb,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/table/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAG7D,OAAO,EAAwB,KAAK,UAAU,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAKjG,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAA;AAGzC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEjE,MAAM,MAAM,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACnD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,iBAAiB,CAAA;CACnC,CAAA;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,KAChD,KAAK,CAAC,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAA;AAmB/C,eAAO,MAAM,cAAc,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,kFAQ5F,UAAU,CAAC,IAAI,CAAC,sBA6PlB,CAAA;AAED,eAAO,MAAM,KAAK,EAEb,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA"}

package/lib/components/Gradebook/table/Table/index.js

@@ -20,15 +20,30 @@ var _index4 = require("../Cell/index.js");
 var _index5 = require("../Row/index.js");
 var _index6 = require("../RowHeader/index.js");
 var _index7 = require("../ColumnHeader/index.js");
-var _excluded = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
-var TableComponent = exports.TableComponent = function TableComponent(_ref) {
-  var id = _ref.id,
-    columns = _ref.columns,
-    data = _ref.data,
-    caption = _ref.caption,
-    renderAboveHeader = _ref.renderAboveHeader,
-    dragDropConfig = _ref.dragDropConfig,
-    tableProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var _excluded = ["colRender", "rowData", "cellData"],
+  _excluded2 = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
+// DataCell keeps the Cell child arrow function out of the hot render
+// path. React.memo compares colRender/rowData/cellData by reference; when columns are
+// reordered those values don't change, so Cell never receives new props and skips render.
+
+var DataCellInner = function DataCellInner(_ref) {
+  var colRender = _ref.colRender,
+    rowData = _ref.rowData,
+    cellData = _ref.cellData,
+    cellProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_index4.Cell, cellProps, function (focused) {
+    return colRender(cellData, rowData, focused);
+  });
+};
+var DataCell = /*#__PURE__*/_react.default.memo(DataCellInner);
+var TableComponent = exports.TableComponent = function TableComponent(_ref2) {
+  var id = _ref2.id,
+    columns = _ref2.columns,
+    data = _ref2.data,
+    caption = _ref2.caption,
+    renderAboveHeader = _ref2.renderAboveHeader,
+    dragDropConfig = _ref2.dragDropConfig,
+    tableProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var tableRef = (0, _react.useRef)(null);
   var columnsRef = (0, _react.useRef)(columns);
 
@@ -193,11 +208,12 @@ var TableComponent = exports.TableComponent = function TableComponent(_ref) {
           }, props), col.render ? col.render(row[col.key], row) : row[col.key]);
         }
         if (col.render) {
-          return /*#__PURE__*/_react.default.createElement(_index4.Cell, Object.assign({
-            key: col.key
-          }, props), function (focused) {
-            return col.render(row[col.key], row, focused);
-          });
+          return /*#__PURE__*/_react.default.createElement(DataCell, Object.assign({
+            key: col.key,
+            colRender: col.render,
+            rowData: row,
+            cellData: row[col.key]
+          }, props));
         }
         return /*#__PURE__*/_react.default.createElement(_index4.Cell, Object.assign({
           key: col.key

package/lib/lib/__tests__/sanitize.test.js

@@ -2,17 +2,139 @@
 
 var _globals = require("@jest/globals");
 var _sanitize = require("../sanitize.js");
-(0, _globals.describe)('sanitizeForHtml', function () {
-  (0, _globals.it)('cleans invalid tags', function () {
-    var invalid = '<monkey>tag isn\'t closed';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(invalid)).toContain('</monkey>');
+(0, _globals.describe)('sanitizeHtml', function () {
+  (0, _globals.describe)('equation images (Canvas-specific)', function () {
+    (0, _globals.it)('rewrites /equation_images src to absolute canvas URL', function () {
+      var equationImage = 'Some text with an <img src="/equation_images/image" />';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('canvas.instructure.com/equation_images/image');
+    });
+    (0, _globals.it)('adds vertical-align style to equation images', function () {
+      var equationImage = '<img src="/equation_images/abc" />';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('vertical-align: middle');
+    });
+    (0, _globals.it)('leaves non-equation image src untouched', function () {
+      var otherImage = '<img src="/another_image">';
+      var out = (0, _sanitize.sanitizeHtml)(otherImage);
+      (0, _globals.expect)(out).toContain('src="/another_image"');
+      (0, _globals.expect)(out).not.toContain('canvas.instructure.com');
+    });
   });
-  (0, _globals.it)('replaces equation images', function () {
-    var equationImage = 'Some text with an <img src="/equation_images/image" />';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('canvas.instructure.com/equation_images/image');
+  (0, _globals.describe)('null / empty input handling', function () {
+    (0, _globals.it)('returns empty string for null', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(null)).toBe('');
+    });
+    (0, _globals.it)('returns empty string for undefined', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(void 0)).toBe('');
+    });
+    (0, _globals.it)('returns empty string for empty string', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)('')).toBe('');
+    });
   });
-  (0, _globals.it)('leaves other images alone', function () {
-    var otherImage = 'Some text with <img src="/another_image" />';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(otherImage)).toBe(otherImage);
+  (0, _globals.describe)('XSS - script execution vectors', function () {
+    (0, _globals.it)('strips <script> tags', function () {
+      var xss = 'Hello<script>alert(1)</script>World';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toContain('<script');
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips inline event handlers (onerror)', function () {
+      var xss = '<img src="x" onerror="alert(1)">';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onerror/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips inline event handlers (onclick)', function () {
+      var xss = '<a href="#" onclick="alert(1)">click</a>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onclick/i);
+    });
+    (0, _globals.it)('strips inline event handlers (onload on svg)', function () {
+      var xss = '<svg onload="alert(1)"></svg>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onload/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips javascript: URLs in href', function () {
+      // eslint-disable-next-line no-script-url
+      var xss = '<a href="javascript:alert(1)">x</a>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/javascript:/i);
+    });
+    (0, _globals.it)('strips javascript: URLs in img src', function () {
+      // eslint-disable-next-line no-script-url
+      var xss = '<img src="javascript:alert(1)">';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/javascript:/i);
+    });
+    (0, _globals.it)('strips data: URLs that contain HTML/JS in iframe src', function () {
+      var xss = '<iframe src="data:text/html,<script>alert(1)</script>"></iframe>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips <object> tags', function () {
+      var xss = '<object data="evil.swf"></object>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<object');
+    });
+    (0, _globals.it)('strips <embed> tags', function () {
+      var xss = '<embed src="evil.swf">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<embed');
+    });
+    (0, _globals.it)('strips <form> tags (CSRF / phishing surface)', function () {
+      var xss = '<form action="https://evil.com"><input name=x></form>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<form');
+    });
+    (0, _globals.it)('strips style tags (CSS-based exfil / clickjacking)', function () {
+      var xss = '<style>body{background:url(//evil.com/?c=)}</style>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<style');
+    });
+    (0, _globals.it)('strips <meta http-equiv refresh> redirects', function () {
+      var xss = '<meta http-equiv="refresh" content="0;url=https://evil.com">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<meta');
+    });
+    (0, _globals.it)('strips <base> tag (can rewrite all relative URLs)', function () {
+      var xss = '<base href="https://evil.com/">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<base');
+    });
+    (0, _globals.it)('strips encoded onerror payloads', function () {
+      var xss = '<img src=x onerror=&#97;&#108;&#101;&#114;&#116;(1)>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onerror/i);
+    });
+    (0, _globals.it)('strips mixed-case obfuscated script tags', function () {
+      var xss = '<ScRiPt>alert(1)</sCrIpT>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/<script/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+  });
+  (0, _globals.describe)('benign HTML (should be preserved)', function () {
+    (0, _globals.it)('preserves basic formatting tags', function () {
+      var html = '<p>Hello <strong>world</strong> <em>!</em></p>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toBe(html);
+    });
+    (0, _globals.it)('preserves links with safe http(s) hrefs', function () {
+      var html = '<a href="https://example.com">link</a>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toContain('href="https://example.com"');
+    });
+    (0, _globals.it)('preserves lists', function () {
+      var html = '<ul><li>a</li><li>b</li></ul>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toBe(html);
+    });
+    (0, _globals.it)('preserves Canvas RCE iframes (Studio / media embeds)', function () {
+      var html = '<iframe src="https://canvas.instructure.com/media_objects_iframe/123" ' + 'allowfullscreen="" allow="fullscreen" frameborder="0" ' + 'data-media-id="123" data-media-type="video"></iframe>';
+      var out = (0, _sanitize.sanitizeHtml)(html);
+      (0, _globals.expect)(out).toContain('<iframe');
+      (0, _globals.expect)(out).toContain('data-media-id="123"');
+      (0, _globals.expect)(out).toContain('data-media-type="video"');
+      (0, _globals.expect)(out).toContain('allowfullscreen');
+    });
+  });
+  (0, _globals.describe)('link hardening', function () {
+    (0, _globals.it)('adds rel="noopener noreferrer" to target=_blank links', function () {
+      var html = '<a href="https://example.com" target="_blank">x</a>';
+      var out = (0, _sanitize.sanitizeHtml)(html);
+      (0, _globals.expect)(out).toMatch(/rel=["'][^"']*noopener[^"']*["']/);
+      (0, _globals.expect)(out).toMatch(/rel=["'][^"']*noreferrer[^"']*["']/);
+    });
   });
 });

package/lib/lib/sanitize.js

@@ -5,32 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sanitizeHtml = sanitizeHtml;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _sanitizeHtml = _interopRequireDefault(require("sanitize-html"));
-function transformEquationImage(tagName, attribs) {
-  return {
-    tagName: tagName,
-    attribs: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attribs), {}, {
-      src: "https://canvas.instructure.com".concat(attribs.src),
-      style: 'vertical-align: middle'
-    })
-  };
-}
-function transformImage(tagName, attribs) {
-  if (attribs.src != null && attribs.src.indexOf('/equation_images') === 0) {
-    return transformEquationImage(tagName, attribs);
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var CONFIG = {
+  ADD_TAGS: ['iframe'],
+  ADD_ATTR: ['allowfullscreen', 'allow', 'frameborder', 'sandbox', 'target', 'data-media-id', 'data-media-type'],
+  FORBID_TAGS: ['form', 'input', 'button', 'textarea', 'select', 'option']
+};
+
+// Rewrite Canvas equation-image relative URLs to absolute,
+// preserving the previous behavior of this module.
+_dompurify.default.addHook('afterSanitizeAttributes', function (node) {
+  if (node.tagName === 'IMG') {
+    var src = node.getAttribute('src') || '';
+    if (src.indexOf('/equation_images') === 0) {
+      node.setAttribute('src', "https://canvas.instructure.com".concat(src));
+      node.setAttribute('style', 'vertical-align: middle');
+    }
+  }
+  // Harden links opened in a new tab against tab-nabbing.
+  if (node.tagName === 'A' && node.getAttribute('target') === '_blank') {
+    node.setAttribute('rel', 'noopener noreferrer');
   }
-  return {
-    tagName: tagName,
-    attribs: attribs
-  };
-}
+});
 function sanitizeHtml(html) {
-  return (0, _sanitizeHtml.default)(html, {
-    allowedTags: false,
-    allowedAttributes: false,
-    transformTags: {
-      img: transformImage
-    }
-  });
+  return _dompurify.default.sanitize(html == null ? '' : html, CONFIG);
 }

package/lib/test/jest-setup/__mocks__/@instructure/canvas-media.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var UploadMedia = function UploadMedia() {
+  return null;
+};
+UploadMedia.displayName = 'UploadMedia';
+module.exports = UploadMedia;
+module.exports.default = UploadMedia;