fix(autocapture): element properties tracked up to 1k bytes (#783)

PostHog · Aug 25, 2023 · 74a7d37 · 74a7d37
1 parent 9abda6d
commit 74a7d37
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/__tests__/autocapture.js b/src/__tests__/autocapture.js
@@ -708,6 +708,30 @@ describe('Autocapture system', () => {
             expect(props['$elements'][props['$elements'].length - 1]).toHaveProperty('tag_name', 'body')
         })
 
+        it('truncate any element property value to 1024 bytes', () => {
+            const elTarget = document.createElement('a')
+            elTarget.setAttribute('href', 'http://test.com')
+            const longString = 'prop'.repeat(400)
+            elTarget.dataset.props = longString
+            const elParent = document.createElement('span')
+            elParent.appendChild(elTarget)
+            const elGrandparent = document.createElement('div')
+            elGrandparent.appendChild(elParent)
+            const elGreatGrandparent = document.createElement('table')
+            elGreatGrandparent.appendChild(elGrandparent)
+            document.body.appendChild(elGreatGrandparent)
+            const e = {
+                target: elTarget,
+                type: 'click',
+            }
+            autocapture._captureEvent(e, lib)
+            expect(lib.capture.calledOnce).toBe(true)
+            const captureArgs = lib.capture.args[0]
+            const props = captureArgs[1]
+            expect(longString).toBe('prop'.repeat(400))
+            expect(props['$elements'][0]).toHaveProperty('attr__data-props', 'prop'.repeat(256) + '...')
+        })
+
         it('gets the href attribute from parent anchor tags', () => {
             const elTarget = document.createElement('img')
             const elParent = document.createElement('span')

diff --git a/src/autocapture.ts b/src/autocapture.ts
@@ -29,6 +29,13 @@ import { AutocaptureConfig, AutoCaptureCustomProperty, DecideResponse, Propertie
 import { PostHog } from './posthog-core'
 import { AUTOCAPTURE_DISABLED_SERVER_SIDE } from './constants'
 
+function limitText(length: number, text: string): string {
+    if (text.length > length) {
+        return text.slice(0, length) + '...'
+    }
+    return text
+}
+
 const autocapture = {
     _initializedTokens: [] as string[],
     _isDisabledServerSide: null as boolean | null,
@@ -82,9 +89,9 @@ const autocapture = {
         }
         if (autocaptureCompatibleElements.indexOf(tag_name) > -1 && !maskText) {
             if (tag_name.toLowerCase() === 'a' || tag_name.toLowerCase() === 'button') {
-                props['$el_text'] = getDirectAndNestedSpanText(elem)
+                props['$el_text'] = limitText(1024, getDirectAndNestedSpanText(elem))
             } else {
-                props['$el_text'] = getSafeText(elem)
+                props['$el_text'] = limitText(1024, getSafeText(elem))
             }
         }
 
@@ -99,7 +106,7 @@ const autocapture = {
             if (isSensitiveElement(elem) && ['name', 'id', 'class'].indexOf(attr.name) === -1) return
 
             if (!maskInputs && shouldCaptureValue(attr.value) && !isAngularStyleAttr(attr.name)) {
-                props['attr__' + attr.name] = attr.value
+                props['attr__' + attr.name] = limitText(1024, attr.value)
             }
         })