Anonymize sensitive content on the page
In today's digital age, privacy and security are paramount, especially when dealing with sensitive information on web applications and websites. This comprehensive guide delves into methods for effectively anonymizing sensitive content to protect user privacy and comply with data protection regulations.
Understanding Text Masking
Text masking is a crucial feature for any web service handling sensitive data, such as passwords, credit card information, personal identification numbers, and other private details. It ensures that during session recordings, sensitive data is automatically obscured to prevent unauthorized access.
Sensitive data in forms (e.g. passwords and credit card details) is always anonymized in the recordings. It’s possible to anonymize static content as well, such as surnames and other personal information.
How to Implement Text Masking
Implementing text masking involves using specific HTML attributes to anonymize text content dynamically. These attributes can be applied to any HTML element to obscure sensitive information from being displayed or recorded.
Anonymizing Static Content
For static content, such as surnames or personal information, you can add a data-ls-disabled attribute to the HTML element containing sensitive data. This attribute replaces the text content with a placeholder, such as asterisks, to obscure the sensitive information.
Example of Anonymizing Whole Text Content:
<div data-ls-disabled class="user-info">
<div>
<p>Daniel Cameron</p>
<span>Admin</span>
</div>
<span>Product Designer</span>
</div>
Anonymizing Specific Elements Only:
<div class="user-info">
<div>
<p data-ls-disabled>Daniel Cameron</p>
<span>Admin</span>
</div>
<span>Product Designer</span>
</div>
Anonymizing Nested Content
The data-ls-disabled attribute also applies to all child elements within the parent element. However, to selectively display certain pieces of content, the data-ls-enabled attribute can be used on child elements to make them visible, even within an anonymized block.
Example of Mixing Anonymized and Visible Content:
<div data-ls-disabled class="user-info">
<div>
<p>Daniel Cameron</p>
<span>Admin</span>
</div>
<span data-ls-enabled>Product Designer</span>
</div>
Image Masking
Sensitive images can also be anonymized to protect visual data. By adding a data-ls-mask attribute to an img element, the image is obscured during playback, ensuring privacy and security.
Implementing Image Masking
<img data-ls-mask src="sensitive-image.jpg" alt="Sensitive Image">
Content masking through the Web UI
LiveSession offers content masking options that do not require direct code manipulation. This feature allows users to select specific elements on their web page to anonymize, using valid CSS selectors.
Go to Settings > Websites > Website settings > Content masking tab
Use Cases and Practical Applications
SaaS Platforms: SaaS platforms anonymize user data to protect privacy across functionalities, ensuring data sensitivity and proprietary information are securely managed.
E-Commerce Platforms: E-commerce sites anonymize customer payment and personal details during checkout to maintain trust and comply with privacy regulations.
Healthcare Portals: Healthcare services use anonymization to protect patient information, complying with HIPAA regulations by masking personal health data.
Customer Support Tools: Customer support systems anonymize sensitive information during screen recordings and live sessions to troubleshoot issues without compromising user privacy.
Anonymizing Entire Applications or Websites
For a more comprehensive approach, it's possible to anonymize the entire application or website by adding a data-ls-disabled attribute to the <body> tag. This method ensures all content is initially obscured, and selective visibility can be achieved using the data-ls-enabled attribute on specific elements, divs, or texts that should remain visible.
Example of Anonymizing an Entire Website:
<body data-ls-disabled>
<div class="content">
…
</div>
</body>
This approach ensures maximum privacy and security by default, with the flexibility to reveal non-sensitive information as needed.
Conclusion
Anonymizing sensitive content on web pages is essential for maintaining user trust, complying with legal requirements, and ensuring data security. By implementing the methods described above, developers and website administrators can protect sensitive information from unauthorized access during session recordings and live interactions. Whether through direct code modifications or dashboard settings, these techniques offer robust solutions for privacy-conscious online environments.