Merge pull request #3834 from coralproject/hotfix/6.16.2

- Fix terser webpack plugin memory leak (#3832) - Fix how links are handled in comments (#3828) - Fix flatten replies admin toggle not showing flatten replies working in stream (#3834)
coralproject · Jan 6, 2022 · 034865e · 034865e
2 parents 62252f4 + fbed435
commit 034865e
Show file tree

Hide file tree

Showing 9 changed files with 78,446 additions and 957 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.16.1",
+  "version": "6.16.2",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [
@@ -374,7 +374,7 @@
     "strip-ansi": "^6.0.0",
     "style-loader": "^1.1.3",
     "subscriptions-transport-ws": "^0.9.16",
-    "terser-webpack-plugin": "^2.3.5",
+    "terser-webpack-plugin": "^4.2.3",
     "thread-loader": "^2.1.3",
     "timekeeper": "^2.2.0",
     "ts-jest": "26.3.0",

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
@@ -212,7 +212,7 @@ export default function createWebpackConfig(
             safari10: true,
           },
           cache: enableBuildCache,
-          parallel: true,
+          parallel: 4,
           sourceMap: !disableSourcemaps,
         }),
       ],

diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
@@ -13,14 +13,13 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLFEATURE_FLAG } from "coral-framework/schema";
 
-import { FEATURE_FLAG } from "coral-stream/__generated__/AllCommentsTabContainer_settings.graphql";
 import { initLocalStateQuery } from "coral-stream/__generated__/initLocalStateQuery.graphql";
 
 import { COMMENTS_ORDER_BY } from "../constants";
 import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "./constants";
 
 interface ResolvedConfig {
-  readonly featureFlags: FEATURE_FLAG[];
+  readonly featureFlags: string[];
   readonly flattenReplies?: boolean | null;
 }
 
@@ -32,7 +31,7 @@ async function resolveConfig(
     return staticConfig as ResolvedConfig;
   }
   if (process.env.NODE_ENV === "development") {
-    // Send a graphql query to server during development to get the feature flags.
+    // Send a graphql query to server during development to get the needed settings.
     // The reason is that we don't have static config during development.
     const data = await fetchQuery<initLocalStateQuery>(
       environment,
@@ -49,7 +48,10 @@ async function resolveConfig(
 
     return data.settings as ResolvedConfig;
   }
-  return { featureFlags: [] };
+  return {
+    featureFlags: [],
+    flattenReplies: false,
+  };
 }
 
 /**
@@ -82,7 +84,7 @@ const initLocalState: InitLocalState = async ({
     ...rest,
   });
 
-  const { featureFlags, ...settings } = await resolveConfig(
+  const { featureFlags, flattenReplies } = await resolveConfig(
     environment,
     staticConfig
   );
@@ -145,7 +147,7 @@ const initLocalState: InitLocalState = async ({
     );
 
     // Enable flatten replies
-    localRecord.setValue(!!settings.flattenReplies, "flattenReplies");
+    localRecord.setValue(!!flattenReplies, "flattenReplies");
 
     // Enable z-key comment seen
     localRecord.setValue(

diff --git a/src/core/common/config.ts b/src/core/common/config.ts
@@ -46,6 +46,11 @@ export interface StaticConfig {
    */
   featureFlags: string[];
 
+  /**
+   * flattenReplies is whether or not flattenReplies is enabled on the tenant.
+   */
+  flattenReplies: boolean;
+
   /**
    * forceAdminLocalAuth is whether local authentication is always available
    * for this Coral deployment. This is useful for ensuring that Coral service

diff --git a/src/core/common/helpers/sanitize.spec.ts b/src/core/common/helpers/sanitize.spec.ts
@@ -89,6 +89,22 @@ it("sanitizes without features enabled", () => {
   `);
 });
 
+it("allows mailto links", () => {
+  const sanitize = createSanitize(window as any);
+  expect(sanitize('<a href="mailto:[email protected]">[email protected]</a>'))
+    .toMatchInlineSnapshot(`
+    <body>
+      <a
+        href="mailto:[email protected]"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        [email protected]
+      </a>
+    </body>
+  `);
+});
+
 it("replaces anchor tags with their text", () => {
   const sanitize = createSanitize(window as any);
   const el = sanitize(
@@ -98,15 +114,49 @@ it("replaces anchor tags with their text", () => {
     </div>
   `
   );
-  expect(el.innerHTML).toMatchInlineSnapshot(
-    `
+  expect(el.innerHTML).toMatchInlineSnapshot(`
     "
         <div>
           This is a link. This is another link with no href in a comment.
         </div>
       "
+  `);
+});
+
+it("does not replace anchor tags with their text if href does match inner html", () => {
+  const sanitize = createSanitize(window as any);
+  const el = sanitize(
+    `
+    <div>
+      This is a link where href matches <a href="http://test.com">http://test.com</a>.
+    </div>
+  `
+  );
+  expect(el.innerHTML).toMatchInlineSnapshot(`
+    "
+        <div>
+          This is a link where href matches <a href=\\"http://test.com\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">http://test.com</a>.
+        </div>
+      "
+  `);
+});
+
+it("does not replace anchor tags with their text if href does match inner html and only one has a trailing slash", () => {
+  const sanitize = createSanitize(window as any);
+  const el = sanitize(
+    `
+    <div>
+      This is a link where href matches <a href="http://test.com/">http://test.com</a>.
+    </div>
   `
   );
+  expect(el.innerHTML).toMatchInlineSnapshot(`
+    "
+        <div>
+          This is a link where href matches <a href=\\"http://test.com/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">http://test.com</a>.
+        </div>
+      "
+  `);
 });
 
 it("allows bolded tags", () => {

diff --git a/src/core/common/helpers/sanitize.ts b/src/core/common/helpers/sanitize.ts
@@ -76,15 +76,44 @@ export function convertGQLRTEConfigToRTEFeatures(
   };
 }
 
+const MAILTO_PROTOCOL = "mailto:";
+
 /**
  * Ensure that each anchor tag is replaced with text that
- * corresponds to its inner html.
+ * corresponds to its inner html. If the tag's href matches
+ * its inner html, it remains as is.
  */
 const sanitizeAnchor = (node: Element) => {
   if (node.nodeName === "A") {
-    // Turn anchor into text corresponding to innerHTML.
-    node.insertAdjacentText("beforebegin", node.innerHTML);
-    node.parentNode!.removeChild(node);
+    let href = node.getAttribute("href");
+    let innerHtml = node.innerHTML;
+
+    let mailToWithMatchingInnerHtml = false;
+    if (href) {
+      const url = new URL(href);
+
+      // Check for a mailto: link with corresponding inner html
+      if (url.protocol === MAILTO_PROTOCOL) {
+        if (href.replace(url.protocol, "") === innerHtml) {
+          mailToWithMatchingInnerHtml = true;
+        }
+      }
+
+      // Account for whether trailing slashes are included or not
+      href = href?.endsWith("/") ? href : (href += "/");
+      innerHtml = innerHtml.endsWith("/") ? innerHtml : (innerHtml += "/");
+    }
+
+    // When the anchor tag's inner html matches its href
+    if ((href && href === innerHtml) || mailToWithMatchingInnerHtml) {
+      // Ensure we wrap all the links with the target + rel set
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    } else {
+      // Otherwise, turn the anchor link into text corresponding to its inner html
+      node.insertAdjacentText("beforebegin", node.innerHTML);
+      node.parentNode!.removeChild(node);
+    }
   }
 };
 

diff --git a/src/core/server/app/router/client.ts b/src/core/server/app/router/client.ts
@@ -146,6 +146,8 @@ const clientHandler = ({
     req.coral.tenant?.featureFlags?.filter(validFeatureFlagsFilter(req.user)) ||
     [];
 
+  const flattenReplies = req.coral.tenant?.flattenReplies || false;
+
   res.render(viewTemplate, {
     analytics,
     staticURI: config.staticURI,
@@ -156,6 +158,7 @@ const clientHandler = ({
       ...config,
       featureFlags,
       tenantDomain: req.coral.tenant?.domain,
+      flattenReplies,
     },
     customCSSURL: enableCustomCSSQuery ? req.query.customCSSURL : null,
   });

diff --git a/src/core/server/app/router/index.ts b/src/core/server/app/router/index.ts
@@ -32,6 +32,7 @@ export function createRouter(app: AppOptions, options: RouterOptions) {
       staticURI: app.config.get("static_uri") || "/",
       graphQLSubscriptionURI: app.config.get("graphql_subscription_uri") || "",
       featureFlags: [],
+      flattenReplies: false,
       forceAdminLocalAuth: app.config.get("force_admin_local_auth"),
     };