Bug fix and updating unit tests for masking (#261)

* Bug fix and updating unit tests for masking

* Bumping up version to 0.6.37

* Bump terser from 5.10.0 to 5.14.2 (#260)

* Updating package versions

.gitignore

@@ -19,3 +19,6 @@ yarn-error.log
 
 # chrome debug
 debug.log
+
+# environment file
+.env

CONTRIBUTING.md

@@ -80,6 +80,9 @@ On Ubuntu, if you run into errors, it may be because you are missing the libfont
 sudo apt-get install libfontconfig
 ```
 
+### Debugging Clarity
+Use [clarity-devtools](https://github.com/microsoft/clarity/tree/master/packages/clarity-devtools) to debug Clarity against any live website.
+
 ### Text Editor
 
 Recommended text editor is Visual Studio Code, but if you prefer a different text editor, feel free to use it.

README.md

@@ -25,7 +25,7 @@ Here are some example sessions on popular websites visualized to demonstrate the
 </br><a href="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif"><img src="https://thumbs.gfycat.com/CoolDependableAdamsstaghornedbeetle-size_restricted.gif" title="Clarity - Cook With Manali Example"/></a> 
 
 ## Privacy Notice
-Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server.
+Clarity handles sensitive data with care. By default sensitive content on the page is masked before uploading to the server. Additionally, Clarity offers several masking configuration options to ensure you are in full control of your data.
 
 ## Improving Clarity
 If you haven't already done so, start contributing by following instructions **[here](https://github.com/microsoft/clarity/blob/master/CONTRIBUTING.md)**.

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.36",
+  "version": "0.6.37",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.6.35",
+  "version": "0.6.37",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",
@@ -20,12 +20,6 @@
     "test": "yarn workspace clarity-js test"
   },
   "devDependencies": {
-    "lerna": "^4.0.0",
-    "tar": "^6.1.11",
-    "trim-newlines": "^4.0.2"
-  },
-  "resolutions": {
-    "tar": "^6.1.7",
-    "trim-newlines": "^4.0.2"
+    "lerna": "^5.3.0"
   }
 }

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.6.36",
+  "version": "0.6.37",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.6.36"
+    "clarity-js": "^0.6.37"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.6.36",
+  "version": "0.6.37",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.36",
-    "clarity-js": "^0.6.36",
-    "clarity-visualize": "^0.6.36"
+    "clarity-decode": "^0.6.37",
+    "clarity-js": "^0.6.37",
+    "clarity-visualize": "^0.6.37"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.2",

packages/clarity-devtools/src/config.ts

@@ -20,6 +20,7 @@ export default function(): Core.Config {
             [Region.Footer, "footer"], 
             [Region.Navigation, "nav"]
         ],
+        fraud: [],
         extract: [ExtractSource.Javascript, Extract.Performance, "performance.timing"] 
     };
 }

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.6.36",
-  "version_name": "0.6.36",
+  "version": "0.6.37",
+  "version_name": "0.6.37",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.36",
+  "version": "0.6.37",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.36";
+let version = "0.6.37";
 export default version;

packages/clarity-js/src/layout/dom.ts

@@ -97,6 +97,7 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
         regionId = regionId === null ? parentValue.region : regionId;
         fragmentId = parentValue.fragment;
         fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
+        privacyId = parentValue.metadata.privacy;
     }
 
     // If there's an explicit region attribute set on the element, use it to mark a region on the page

packages/clarity-js/test/core.test.ts

@@ -1,4 +1,4 @@
-import { expect } from 'chai';
+import { assert } from 'chai';
 import { Browser, Page } from 'playwright';
 import { launch, markup, node, text } from './helper';
 import { Data, decode } from "clarity-decode";
@@ -33,15 +33,15 @@ describe('Core Tests', () => {
         let email = node(decoded, "attributes.id", "eml");
         let password = node(decoded, "attributes.id", "pwd");
         let search = node(decoded, "attributes.id", "search");
-
+        
         // Non-sensitive fields continue to pass through with sensitive bits masked off
-        expect(heading, "Thanks for your order •••••••••");
+        assert.equal(heading, "Thanks for your order •••••••••");
 
         // Sensitive fields, including input fields, are randomized and masked
-        expect(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
-        expect(search.attributes.value, "••••• •••• ••••");
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••• ••••");
+        assert.equal(search.attributes.value, "hello •••••");
     });
 
     it('should mask all text in strict mode', async () => {
@@ -54,14 +54,14 @@ describe('Core Tests', () => {
         let search = node(decoded, "attributes.id", "search");
 
         // All fields are randomized and masked
-        expect(heading, "• ••••• ••••• ••••• ••••• •••••");
-        expect(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
-        expect(search.attributes.value, "••••• •••• ••••");
+        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••• ••••");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
     });
 
-    it('should mask all text in relaxed mode', async () => {
+    it('should unmask all text in relaxed mode', async () => {
         let encoded: string[] = await markup(page, "core.html", { unmask: ["body"] });
         let decoded = encoded.map(x => decode(x));
         let heading = text(decoded, "one");
@@ -71,12 +71,21 @@ describe('Core Tests', () => {
         let search = node(decoded, "attributes.id", "search");
 
         // Text flows through unmasked for non-sensitive fields, including input fields
-        expect(heading, "Thanks for your order #2AB700GH");
-        expect(address, "1 Microsoft Way, Redmond, WA - 98052");
-        expect(search.attributes.value, "hello world");
+        assert.equal(heading, "Thanks for your order #2AB700GH");
+        assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
+        assert.equal(search.attributes.value, "hello w0rld");
 
         // Sensitive fields are still masked
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••• ••••");
+    });
+
+    it('should respect mask config even in relaxed mode', async () => {
+        let encoded: string[] = await markup(page, "core.html", { mask: ["#mask"], unmask: ["body"] });
+        let decoded = encoded.map(x => decode(x));
+        let subtree = text(decoded, "child");
+        
+        // Masked sub-trees continue to stay masked
+        assert.equal(subtree, "••••• •••••");
     });
 });

packages/clarity-js/test/helper.ts

@@ -78,6 +78,10 @@ function config(override: Core.Config): string {
     const settings = {
         delay: 100,
         content: true,
+        fraud: [],
+        regions: [],
+        mask: [],
+        unmask: [],
         upload: payload => { window["payloads"].push(payload); window["clarity"]("upgrade", "test"); }
     }
 
@@ -100,6 +104,7 @@ function config(override: Core.Config): string {
             case "unmask":
             case "regions":
             case "cookies":
+            case "fraud":
                 output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
                 break;
             default:

packages/clarity-js/test/html/core.html

@@ -8,10 +8,13 @@
     <h1 id="one">Thanks for your order #2AB700GH</h1>
     <p id="two" class="address-details">1 Microsoft Way, Redmond, WA - 98052</p>
   </div>
+  <div id="mask">
+    <span id="child">Hello World</span>
+  </div>
   <form name="login">
     <input type="email" id="eml" title="Email" value="random@email.test">
     <input type="password" id="pwd" title="Password" maxlength="16" value="passw0rd">
-    <input type="search" id="search" title="Search" value="hello world">
+    <input type="search" id="search" title="Search" value="hello w0rld">
   </form>
 </body>
 </html>

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.6.36",
+  "version": "0.6.37",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.36"
+    "clarity-decode": "^0.6.37"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",