@truedat/core 4.46.0 → 4.46.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [4.46.2] 2022-06-16
+
+### Added
+
+- [TD-4739] `SafeLink` component to prevent rendering unsafe hyperlinks
+
+### Changed
+
+- [TD-4739] `RichTextEditor` now renders hyperlinks using `SafeLink`
+
 ## [4.44.5] 2022-05-20
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.46.0",
+  "version": "4.46.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.46.0",
+    "@truedat/test": "4.46.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ed9e54123f20ee10a528c865653da09022457327"
+  "gitHead": "161f3fae4428ee4e4e26b62fd2f9764ce389d0e2"
 }

package/src/components/RichTextEditor.js

@@ -1,25 +1,31 @@
 import _ from "lodash/fp";
 import React from "react";
+import PropTypes from "prop-types";
+import { isKeyHotkey } from "is-hotkey";
 import isUrl from "is-url";
+import { injectIntl } from "react-intl";
 import { Editor, getEventTransfer } from "slate-react";
 import { Value } from "slate";
-import { isKeyHotkey } from "is-hotkey";
 import { Menu, Icon } from "semantic-ui-react";
+import { validUrl } from "../services/validation";
+import SafeLink from "./SafeLink";
 
 const DEFAULT_NODE = "paragraph";
 
 const isBoldHotkey = isKeyHotkey("mod+b");
 const isItalicHotkey = isKeyHotkey("mod+i");
 const isUnderlinedHotkey = isKeyHotkey("mod+u");
-//const isCodeHotkey = isKeyHotkey("mod+`");
 
-function wrapLink(change, href) {
-  change.wrapInline({
-    type: "link",
-    data: { href }
-  });
+function wrapLink(change, value) {
+  const href = validUrl(value);
+  if (href) {
+    change.wrapInline({
+      type: "link",
+      data: { href },
+    });
 
-  change.moveToEnd();
+    change.moveToEnd();
+  }
 }
 
 function unwrapLink(change) {
@@ -37,27 +43,27 @@ export class RichTextEditor extends React.Component {
               {
                 object: "block",
                 type: "paragraph",
-                nodes: []
-              }
-            ]
-          }
+                nodes: [],
+              },
+            ],
+          },
         }
       : value;
 
     this.state = { value: Value.fromJSON(json) };
   }
 
-  hasMark = type => {
+  hasMark = (type) => {
     const { value } = this.state;
-    return value.activeMarks.some(mark => mark.type == type);
+    return value.activeMarks.some((mark) => mark.type == type);
   };
 
-  hasBlock = type => {
+  hasBlock = (type) => {
     const { value } = this.state;
-    return value.blocks.some(node => node.type == type);
+    return value.blocks.some((node) => node.type == type);
   };
 
-  ref = editor => {
+  ref = (editor) => {
     this.editor = editor;
   };
 
@@ -79,7 +85,7 @@ export class RichTextEditor extends React.Component {
         <div
           style={{
             border: "1px solid rgba(34, 36, 38, 0.15)",
-            borderRadius: "0.28571429rem"
+            borderRadius: "0.28571429rem",
           }}
         >
           <Menu>
@@ -143,7 +149,7 @@ export class RichTextEditor extends React.Component {
       <Menu.Item
         icon
         disabled={!isActive}
-        onMouseDown={event => this.onClickMark(event, type)}
+        onMouseDown={(event) => this.onClickMark(event, type)}
       >
         <Icon name={icon} />
       </Menu.Item>
@@ -152,7 +158,7 @@ export class RichTextEditor extends React.Component {
 
   renderBlockButton = (type, icon) => {
     const {
-      value: { document, blocks }
+      value: { document, blocks },
     } = this.state;
     const parent =
       blocks.size != 0 ? document.getParent(blocks.first().key) : null;
@@ -164,7 +170,7 @@ export class RichTextEditor extends React.Component {
       <Menu.Item
         icon
         disabled={!isActive}
-        onMouseDown={event => this.onClickBlock(event, type)}
+        onMouseDown={(event) => this.onClickBlock(event, type)}
       >
         <Icon name={icon} />
       </Menu.Item>
@@ -178,7 +184,7 @@ export class RichTextEditor extends React.Component {
       <Menu.Item
         icon
         disabled={!isActive}
-        onMouseDown={event => this.onClickLink(event, type)}
+        onMouseDown={(event) => this.onClickLink(event, type)}
       >
         <Icon name={icon} />
       </Menu.Item>
@@ -210,17 +216,10 @@ export class RichTextEditor extends React.Component {
       case "numbered-list":
         return <ol {...attributes}> {children}</ol>;
       case "link":
-        const { data } = node;
-        const href = data.get("href");
         return (
-          <a
-            {...attributes}
-            href={href}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
+          <SafeLink href={node.data?.get("href")} {...attributes}>
             {children}
-          </a>
+          </SafeLink>
         );
       default:
         return next();
@@ -249,23 +248,16 @@ export class RichTextEditor extends React.Component {
 
     switch (node.type) {
       case "link": {
-        const { data } = node;
-        const href = data.get("href");
+        const props = _.omit(["ref"])(attributes);
         return (
-          <a
-            {...attributes}
-            href={href}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
+          <SafeLink href={node.data?.get("href")} {...props}>
             {children}
-          </a>
+          </SafeLink>
         );
       }
 
-      default: {
+      default:
         return next();
-      }
     }
   };
 
@@ -338,8 +330,11 @@ export class RichTextEditor extends React.Component {
       }
     } else {
       const isList = this.hasBlock("list-item");
-      const isType = value.blocks.some(block => {
-        return !!document.getClosest(block.key, parent => parent.type == type);
+      const isType = value.blocks.some((block) => {
+        return !!document.getClosest(
+          block.key,
+          (parent) => parent.type == type
+        );
       });
 
       if (isList && isType) {
@@ -361,10 +356,10 @@ export class RichTextEditor extends React.Component {
 
   hasLinks = () => {
     const { value } = this.state;
-    return value.inlines.some(inline => inline.type == "link");
+    return value.inlines.some((inline) => inline.type == "link");
   };
 
-  onClickLink = event => {
+  onClickLink = (event) => {
     event.preventDefault();
 
     const { editor } = this;
@@ -388,4 +383,13 @@ export class RichTextEditor extends React.Component {
   };
 }
 
-export default RichTextEditor;
+RichTextEditor.propTypes = {
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  value: PropTypes.object,
+};
+
+export default injectIntl(RichTextEditor);

package/src/components/SafeLink.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { validUrl } from "../services/validation";
+
+export const SafeLink = ({ className, href, children, ...props }) =>
+  validUrl(href) ? (
+    <a
+      {...props}
+      className={className}
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  ) : (
+    <a
+      className={className}
+      title={href}
+      style={{ color: "red", backgroundColor: "yellow" }}
+    >
+      {children}
+    </a>
+  );
+
+SafeLink.propTypes = {
+  href: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+export default SafeLink;

package/src/components/__tests__/SafeLink.spec.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import SafeLink from "../SafeLink";
+
+describe("<SafeLink />", () => {
+  it("renders an href if url is http or https", () => {
+    const { queryByRole } = render(<SafeLink href="https://truedat.com" />);
+    expect(queryByRole("link")).toBeInTheDocument();
+  });
+
+  ["javascript:foo", "not_a_valid_url"].forEach((href) => {
+    it("renders non-navigable span if url is potentially unsafe", () => {
+      const { queryByRole, queryByTitle } = render(<SafeLink href={href} />);
+      expect(queryByRole("link")).not.toBeInTheDocument();
+      expect(queryByTitle(href)).toBeInTheDocument();
+    });
+  });
+});

package/src/components/index.js

@@ -30,6 +30,7 @@ import QualityMenu from "./QualityMenu";
 import Redirector from "./Redirector";
 import RichTextEditor from "./RichTextEditor";
 import RouteListener from "./RouteListener";
+import SafeLink from "./SafeLink";
 import ScrollToTop from "./ScrollToTop";
 import SearchInput from "./SearchInput";
 import SearchMenu from "./SearchMenu";
@@ -76,6 +77,7 @@ export {
   Redirector,
   RichTextEditor,
   RouteListener,
+  SafeLink,
   ScrollToTop,
   SearchInput,
   SearchMenu,

package/src/services/__tests__/validation.spec.js

@@ -0,0 +1,15 @@
+import { validUrl } from "../validation";
+
+describe("validUrl", () => {
+  it("returns url if schema is http or https", () => {
+    ["https://www.truedat.io", "http://www.truedat.io"].forEach((url) => {
+      expect(validUrl(url)).toBe(url);
+    });
+  });
+
+  ["javascript:foo", "not_a_valid_url"].forEach((url) => {
+    it("returns false if url is potentially unsafe", () => {
+      expect(validUrl(url)).toBe(false);
+    });
+  });
+});

package/src/services/validation.js

@@ -0,0 +1,10 @@
+export const validUrl = (value) => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:"
+      ? value
+      : false;
+  } catch (_) {
+    return false;
+  }
+};