Examples/Sensitive Masking

Sensitive Selector Masking

anyclick automatically masks sensitive elements like passwords, credit cards, and other private data in screenshots to protect user privacy.

Try It - Right-click to Capture Screenshots

Right-click any element below and submit feedback with screenshots. Notice how sensitive fields are automatically masked in the preview:

Login Form

This password field will be masked in screenshots

Payment Information

Credit card inputs are automatically masked

Custom Sensitive Elements

Elements with data-sensitive="true" are masked

Elements with data-mask="true" are masked

Elements with .sensitive class are masked

Elements with .private class are masked

All sensitive elements above are automatically detected and masked in screenshots. Try right-clicking any element and submitting feedback to see the masked preview!

Default Sensitive Selectors

anyclick includes these default selectors to automatically mask common sensitive elements:

import { DEFAULT_SENSITIVE_SELECTORS } from '@ewjdev/anyclick-core';


// Default selectors that are automatically masked:
'input[type="password"]',
'input[type="credit-card"]',
'input[autocomplete="cc-number"]',
'input[autocomplete="cc-csc"]',
'input[autocomplete="cc-exp"]',
'[data-sensitive="true"]',
'[data-mask="true"]',
'.sensitive',
'.private'

Implementation

Configure sensitive selectors in your screenshotConfig:

Using Default Selectors

app/providers.tsx
'use client';


import { FeedbackProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';
import { DEFAULT_SENSITIVE_SELECTORS } from '@ewjdev/anyclick-core';


const adapter = createHttpAdapter({
  endpoint: '/api/feedback',
});


export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <FeedbackProvider
      adapter={adapter}
      screenshotConfig={{
        enabled: true,
        // Use default selectors (already included by default)
        sensitiveSelectors: DEFAULT_SENSITIVE_SELECTORS,
        // Customize mask color (default: #1a1a1a)
        maskColor: '#1a1a1a',
      }}
    >
      {children}
    </FeedbackProvider>
  );
}

Adding Custom Selectors

app/providers.tsx
'use client';


import { FeedbackProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';
import { DEFAULT_SENSITIVE_SELECTORS } from '@ewjdev/anyclick-core';


const adapter = createHttpAdapter({
  endpoint: '/api/feedback',
});


export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <FeedbackProvider
      adapter={adapter}
      screenshotConfig={{
        enabled: true,
        // Combine default selectors with custom ones
        sensitiveSelectors: [
          ...DEFAULT_SENSITIVE_SELECTORS,
          // Add your custom selectors
          '[data-private]',
          '.api-key',
          '.secret-field',
          '#ssn-input',
        ],
        maskColor: '#000000', // Black mask
      }}
    >
      {children}
    </FeedbackProvider>
  );
}

How It Works

  • When a screenshot is captured, anyclick scans for elements matching the sensitive selectors
  • Matching elements are covered with a solid color mask (default: #1a1a1a)
  • The mask is applied before compression and encoding
  • Sensitive data never appears in the final screenshot
  • The preview dialog shows the masked screenshot before submission

Best Practices

Use Semantic Attributes

Add data-sensitive="true" or data-mask="true" to any element containing sensitive information. This is more maintainable than relying solely on CSS classes.

Test Your Selectors

Always test that your sensitive selectors are working correctly by submitting feedback and checking the screenshot preview. Verify that sensitive data is properly masked.

Don't Over-Mask

Only mask truly sensitive information. Over-masking can make screenshots less useful for debugging and feedback purposes.

Ready for more?

Learn how to integrate with GitHub Issues for automatic issue creation with masked screenshots.

GitHub Integration