SDK: UVE edit-mode data-dot-* attributes leak into live pages

[rjvelazco]

Problem Statement

The data-dot-* attributes that the Universal Visual Editor (UVE) relies on for edit mode (drag-and-drop, contentlet selection, container metadata, etc.) are being rendered into the live / production output by the dotCMS SDKs.

These attributes — e.g. data-dot-object, data-dot-identifier, data-dot-accept-types, data-dot-basetype, data-dot-title, data-dot-inode, data-dot-container, data-dot-uuid, data-dot-on-number-of-pages, data-max-contentlets, data-dot-content-type-variable — are only meaningful inside the editor (UVE iframe). When the page is served in live mode they serve no purpose and bloat the final markup.

Impact: Every customer using a dotCMS SDK to render pages ships this editor-only metadata to end users in production. It generates unnecessary noise in the final HTML output, increases payload size, leaks internal identifiers/structure into public markup, and clutters the DOM that customers inspect and debug against.

Affected: All SDKs (React, Angular, JS) — the leak is in the shared rendering logic, not framework-specific.

Steps to Reproduce

1. Render a dotCMS page in live mode using any SDK (reference deployment: https://nextjs-example-sigma-five.vercel.app/).
2. Open browser DevTools and inspect the rendered DOM.
3. Observe that container/contentlet wrappers carry the full set of data-dot-* edit-mode attributes (see screenshot below).

Expected: In live mode, the SDK should emit clean markup with no data-dot-* editor metadata.

Actual: Edit-mode data-dot-* attributes are present in the live output.

Reference

• Live example: https://nextjs-example-sigma-five.vercel.app/
• Leaked attributes observed in the live DOM (DevTools excerpt):

<div data-dot-object="container"
     data-dot-accept-types="Banner"
     data-dot-identifier="//demo.dotcms.com/application/containers/banner/"
     data-max-contentlets="25"
     data-dot-uuid="1">
  <div data-dot-identifier="2e5d54e6-7ea3-4d72-8577-b8731b206ca0"
       data-dot-basetype="CONTENT"
       data-dot-title="Explore the World"
       data-dot-inode="26bed66d-0990-4002-a7fe-421409a8cdc0"
       data-dot-type="Banner"
       data-dot-container="{&quot;uuid&quot;:&quot;1&quot;,&quot;acceptTypes&quot;:&quot;Banner&quot;,&quot;maxContentlets&quot;:25,...}"
       data-dot-on-number-of-pages="1"
       data-dot-style-properties="{...}"
       data-dot-object="contentlet"
       class="dotcms-contentlet">
    ...
  </div>
</div>

The reporter's screenshot shows the same wrapper carrying the full set of data-dot-* editor-only attributes while served in live mode.

Acceptance Criteria

• When a page is rendered in live mode via any SDK (React, Angular, JS), no data-dot-* editor-only attributes are present in the output DOM.
• When the same page is rendered inside the UVE editor (edit mode), all required data-dot-* attributes are still emitted so editing continues to work.
• The mode distinction (edit vs. live) is driven by the SDK's existing editor-context detection — no new configuration is required from the customer.
• Container and contentlet wrappers in live mode contain only the attributes the customer/app legitimately needs (e.g. classes), not internal identifiers (data-dot-inode, data-dot-identifier, data-dot-uuid, etc.).
• Verified across the React/Next.js, Angular, and JS SDKs.
• A regression test asserts that live-mode rendering produces markup free of data-dot-* attributes.
• Follow Arcadio's heads up SDK: UVE edit-mode data-dot-* attributes leak into live pages #36095 (comment)

dotCMS Version

Latest from main branch.

Severity

Medium - Some functionality impacted

Links

NA

[oidacra]

@rjvelazco take in consideration I need these attributes for makes Analytics work (content_impressions, content_click)

content: {
        identifier: string,      // data-dot-identifier
        inode: string,           // data-dot-inode
        title: string,           // data-dot-title
        content_type: string     // data-dot-type
    },

Additionally, I listened to all contentlet using this class dotcms-contentlet
To check if Analytics is loaded, you can check using window.__dotAnalyticsActive__

To test all, you can run the example/nextjs with Analytics running.

[github-actions]

PRs linked to this issue

• fix(sdk): stop leaking UVE edit-mode data-dot-* attributes into live pages (#36095) by @zJaaal