Element Masking

Co-Browsing API allows you to mask certain elements from the Agent. When you do this, not only will the content of the masked elements be hidden from the Agent, but it will also not go through our servers.

The easiest way to mask an element is to add its CSS selector to the dashboard Settings » Co-browsing.

For example, if you want to hide an element with the id secret-code, you'd add #secret-code to the settings.

You can also mask elements by adding the no-upscope CSS class to them.

You can use the Masked and NoRemoteControl components from our React SDK to mask parts of the page.

import { Masked } from "@upscopeio/react";

function YourComponent() {
  return (
    <div>
      <label>Your SSN</label>
      <Masked>
        <input type="text" />
      </Masked>
    </div>
  )
}

UIKit

Call addMaskedView(_:) on the Upscope singleton to hide a view during screen sharing:

import UpscopeIO

class SensitiveViewController: UIViewController {
    @IBOutlet weak var ssnField: UITextField!
    @IBOutlet weak var creditCardField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        Upscope.shared.addMaskedView(ssnField)
        Upscope.shared.addMaskedView(creditCardField)
    }
}

To remove masking:

Upscope.shared.removeMaskedView(ssnField)

Automatic Secure Field Masking

The SDK automatically masks secure text fields (like password fields) by default. To disable this:

Upscope.shared.maskSecureTextFields = false

View-Based (XML Layouts)

Call addMaskedView() on the Upscope object to hide a view during screen sharing:

import io.upscope.sdk.Upscope

class SensitiveActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sensitive)

        val ssnField = findViewById<EditText>(R.id.ssn_field)
        val creditCardField = findViewById<EditText>(R.id.credit_card_field)

        Upscope.addMaskedView(ssnField)
        Upscope.addMaskedView(creditCardField)
    }
}

To remove masking:

Upscope.removeMaskedView(ssnField)

Automatic Secure Input Masking

The SDK automatically masks secure input fields (like password fields) by default. To disable this:

Upscope.maskSecureInputs = false

WebView Selective Redaction

Redact specific elements inside a WebView by CSS selector, without masking the entire WebView:

Upscope.redactWebView(webView, listOf("#ssn", ".card-number"))

Elements matching the selectors, plus any element with the no-upscope class, are masked during capture. While the page is loading, navigating, or being scrolled (any moment the SDK cannot trust the element positions), the entire WebView is masked instead (fail-closed).

Requirements: JavaScript must be enabled on the WebView, and the device's WebView must support document-start scripts (WebView 89+). If either is missing, the whole WebView stays masked and a warning is logged (invalid selectors log an error).

Selectors are matched in the WebView's top frame only. Elements inside an iframe are never redacted, same-origin or not, so use addMaskedView on the WebView if an iframe can show sensitive content.

Enrolling a WebView that has already loaded a page masks the whole WebView until its next navigation, when selective redaction begins. Call redactWebView before loadUrl to have it apply from the first page.

Selectors configured in the team dashboard (the same Masked elements setting the web SDK uses) are merged with the selectors passed to redactWebView. Calling Upscope.redactWebView(webView) with no selectors enrolls the WebView with the dashboard selectors alone. An invalid selector in the dashboard masks every enrolled WebView entirely (fail closed) and logs an error, so validate selectors after editing them.

To stop redacting:

Upscope.stopRedactingWebView(webView)

Call this before destroying the WebView, so the SDK can release its reference to it.

Note: on web, masking happens at the DOM level, so masked content never leaves the device. On mobile, the SDK masks pixels after capture, before transmission.

Default Masking (Web Only)

On web, Co-Browsing API will automatically mask password fields and fields that contain what looks like credit card numbers. On iOS and Android, you need to explicitly mark sensitive fields for redaction.

Masking Inputs or Elements

On web, you can mask either form inputs or whole HTML elements. When you mask an input, the Agent will see the value of it transformed into asterisks. This way, they can see if the Visitor is typing, but not what they are typing.

When you mask any other element, nothing contained in it will show up on the Agent side. The element will be turned into a gray box.

On mobile (iOS/Android), masked views are replaced with black rectangles that hide the content completely. Secure text fields (password fields) are masked automatically by default.

Inline Elements (Web)

On web, you can only mask elements that have the display CSS property set to block. This is because inline elements don't have a fixed size and could span multiple lines.

Agent Control

The Agent will be unable to control anything that is masked. This means they can't type for a Visitor on a masked field or click on a masked button.

You can further restrict which fields are not masked but the Agent should not be able to control in your Settings » Teams » Co-browsing.

Documentation