Input Masking & Custom Masking

Blocking sensitive data on Zipy

Zipy's Input Masking feature ensures that all input field data on the screen is automatically masked during session recordings. This powerful feature prevents sensitive information from being visible in the recordings, safeguarding user privacy and maintaining compliance with data security standards.

Key benefits:

  • Masks sensitive information to prevent unauthorized viewing

  • Automatically protects input fields like passwords and personal data

  • Maintains compliance with data security standards

  • Ensures user privacy in session recordings

The SDK provides two types of masking:

  1. Automatic Input Masking: Built-in protection for standard input fields

  2. Custom UI Masking: Using ZipyBlock for additional UI elements

Using ZipyBlock

You can add a ZipyBlock to any UIView or its subclasses. When screenshots are captured, the masked elements will appear as black rectangles in the screenshot while remaining fully visible to the user during normal app usage.

Basic Usage

import ZipyiOS

// Create a ZipyBlock on any UIView
let sensitiveView = UIView()
_ = ZipyBlock(on: sensitiveView)

Masking UI Elements in Code

// Masking a button
private let maskedButton: UIButton = {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Masked Button", for: .normal)
    _ = ZipyBlock(on: button) // This will mask the button in screenshots
    return button
}()

// Masking a text field
private let sensitiveTextField: UITextField = {
    let textField = UITextField()
    textField.placeholder = "Sensitive Information"
    textField.translatesAutoresizingMaskIntoConstraints = false
    _ = ZipyBlock(on: textField) // This will mask the text field in screenshots
    return textField
}()

Masking Elements in Interface Builder

class CustomView: UIView {
    @IBOutlet weak var sensitiveLabel: UILabel! {
        didSet {
            _ = ZipyBlock(on: sensitiveLabel)
        }
    }
}

Dynamic Masking

class PaymentViewController: UIViewController {
    private let cardNumberField: UITextField = {
        let field = UITextField()
        field.placeholder = "Card Number"
        return field
    }()
    
    private var maskBlock: ZipyBlock?
    
    func toggleMasking(isEnabled: Bool) {
        if isEnabled {
            // Add masking
            maskBlock = ZipyBlock(on: cardNumberField)
        } else {
            // Remove masking
            maskBlock?.removeFromSuperview()
            maskBlock = nil
        }
    }
}

Last updated