diff --git a/src/__tests__/autocapture.js b/src/__tests__/autocapture.js index 0fc7dbdbf..2dff85193 100644 --- 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 index 9b5072162..85cc13f7f 100644 --- 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) } })