Secure guide content rendering with building blocks

Pendo's guide content is built on a proprietary system that we call building blocks. This guide-building system enables secure content rendering without the need for extra sanitization. 

Building blocks in Pendo

Each element in a Pendo guide exists as a predefined building block, such as text, images, buttons, videos, and so on. Building blocks in Pendo are JSON-based representations of DOM elements that are designed to render guides safely without exposing them to vulnerabilities, like cross-site scripting (XSS) attacks. This architecture safely adds content to guides by using predefined configurations rather than relying on direct HTML or JavaScript.

Security of building blocks

The building blocks architecture receives robust content sanitization by design. Because each building block is predefined, Pendo can strictly control where and how user content is displayed. Using these building blocks, guide creators don't directly manage the underlying HTML or JavaScript of a guide. Instead, guide creators assemble elements using Pendo's internal libraries through JSON configurations.

The controlled structure imposed by building blocks means that typical sanitization libraries, such as DOMPurify, are unnecessary. Elements are restricted to specific, secure properties, ensuring that any potential vulnerabilities are removed at the configuration level. For example:

• Text elements are restricted to content within textContent.
• Buttons are limited to textContent and aria-label.
• Images can only use user content in src and alt.
• Videos are restricted to src and title.

Because Pendo fully manages the structure and fields of each building block, arbitrary content or untrusted scripts can't be directly injected into guides.

Allowed attributes

Pendo predefines safe attributes. If any unapproved attribute is found, the guide fails to load, blocking any attempts to include unsafe or unexpected properties. 

This system achieves the same security outcomes as libraries like DOMPurify. It prevents the injection of untrusted code without requiring additional sanitization at render time. Even if a user attempts to modify the contents of a building block directly by sending an API request, the Pendo client only renders content with specific, pre-approved attributes. 

The following attributes are allowed:

allow, allowfullscreen, alt, autofocus, class, cols, contenteditable, dir, for, frameborder, href, id, loading, name, placeholder, placement, rows, role, sandbox, scoped, src, start, style, tabindex, target, title, type, value

Custom code blocks

If you implement Pendo with the install script, guide creators can add custom code blocks within guides. You can prevent this by either:

• Turning off custom code blocks for your subscription using preventCodeInjection in your install script. For more information, see our API documentation.
• Deploying Pendo through the Pendo Launcher browser extension instead of using the install script. For information about this method of implementing Pendo, see Implementation options.

Because the Pendo Launcher is a browser extension, it must adhere to Google's Manifest V3, which states that injections of remote code aren't allowed. This standard prevents Pendo from running JavaScript code that isn't bundled as part of the Pendo Launcher extension, and so custom code blocks can't be used to create guides. For more information, see Pendo Launcher security and privacy.

If you choose to allow custom code blocks by implementing Pendo using the install script and not turning custom code blocks off for your subscription, guide creators should review any custom code carefully to ensure it's free of security vulnerabilities.