Redact sensitive data

Ensure secure remote screen viewing using the redaction API to automatically block sensitive data such as credit card details, social security numbers and more.

When remotely viewing a user's screen, there may be certain sensitive data that should not be viewable by the agent.

For this purpose, we provide a redaction API that automatically blocks out on device all sensitive data sources such as credit cards, social security numbers, etc. When certain data is redacted, it will never leave the user's device.

Cobrowse provides two methods for redacting sensitive data in your applications:

1. Define the redacted views in your app source code (recommended)

This is the recommended method as it will make sure your redactions are tied to application or websites code version.

Web

Redactions are defined as CSS selectors, passed as an array to the Cobrowse SDK. We recommend using a simple css class to signify redaction where possible, although more complex selectors will also work.

CobrowseIO.redactedViews = ['.redacted', ...some other selectors...]

Our web SDK also supports an un-redaction mechanism, where by you can define sub-elements inside of a redacted element that should be visible to the agent. You can specify un-redaction selectors like this:

CobrowseIO.unredactedViews = ['.unredacted', ...some other selectors...]

iOS

Implement the CobrowseIORedacted protocol on any UIViewController that contains sensitive views. This protocol contains one method:

// From this method you should return a list of the views you want
// Cobrowse to redact, for example:
- (NSArray*) redactedViews {
    return @[ redactedTextView ];
}

If making changes to your UIViewController subclasses isn't an option, we also support a delegate style method to allow you to supply this information in one place. Implement cobrowseRedactedViewsForViewController in your CobrowseIODelegate class, then you can pass redacted views for a specific UIViewController in a single method:

-(NSArray<UIView*>*) cobrowseRedactedViewsForViewController:(UIViewController*) vc {
    NSMutableArray<UIView*>* redacted = [[NSMutableArray alloc] init];
    // Return a list of redacted views for a provided UIViewController
    return redacted;
}

Redaction of SwiftUI views

To redact any SwiftUI view please use the .redacted() view modifier supplied by the Cobrowse iOS SDK v2.30.0 +.

The example below will redact the Text view that displays the email address.

struct AccountView: View {
    
    let name: String
    let email: String
    
    var body: some View {
        VStack {
            Text(name)
                .font(.largeTitle)
            
            Text(verbatim: email)
                .font(.title2)
                .redacted()
        }
    }
}

You can add the .redacted() view modifier to views that contain child views like VStack and the entire stack will be redacted.

struct AccountView: View {
    
    let name: String
    let email: String
    
    var body: some View {
        VStack {
            Text(name)
                .font(.largeTitle)
            
            Text(verbatim: email)
                .font(.title2)
        }
        .redacted()
    }
}

Redaction by default

Sometimes you may want to redact everything on the screen, then selectively "unredact" only the parts your support agents should be able to see. This is particularly useful on applications that require a higher privacy standard or where only specific sections of the App should be visible to the agent.

To achieve this, you'll need to follow the delegate implementation and ensure you pass the all your applications root views to the Cobrowse redaction delegate method:

-(NSArray<UIView*>*) cobrowseRedactedViewsForViewController:(UIViewController*) vc {
    return @[self.window.rootViewController.view];
}

Once you've done this, your application root views will be redacted by default and you'll be able to un-redact child components to make them visible to the agents by implementing cobrowseUnredactedViewsForViewController in your CobrowseIODelegate class:

-(NSArray<UIView*>*) cobrowseUnredactedViewsForViewController:(UIViewController *) vc {
    UIView *unredacted = [self findViewByAccessibilityLabel:self.window:@"viewToBeUnredacted"];
    if (unredacted) {
        return @[unredacted];
    }
    return @[];
}

Alternatively, you can implement CobrowseIOUnredacted protocol in your UIViewController subclasses:

-(NSArray*) unredactedViews {
    return @[viewToBeUnredacted];
}

Redaction of WebView content

Your app may show web content that contains elements that you wish to redact. This can be achieved by setting the webviewRedactedViews property to an array of CSS selectors that identify the elements to be redacted.

CobrowseIO.instance.webviewRedactedViews = @[ @".redacted", ...some other selectors... ];

Android

Implement the CobrowseIO.Redacted interface on any Activity that contains sensitive views. This interface contains one method:

// From this method you should return a list of the views you want
// Cobrowse to redact, for example:
public List<View> redactedViews() {
    List<View> redacted = new ArrayList<>();
    redacted.add(findViewById(R.id.redact_me));
    return redacted;
}

If making changes to your Activity classes isn't an option, we also support a delegate style method to allow you to supply this information in one place. Implement CobrowseIO.RedactionDelegate interface in your CobrowseIO.Delegate class, then you can pass redacted views for a specific Activity in a single method:

@Override
public List<View> redactedViews(@NonNull Activity activity) {
    List<View> redacted = new ArrayList<>();
    // Return a list of redacted views for a provided activity
    return redacted;
}

Redaction of Jetpack Compose UI

Redaction for Jetpack Compose UI is shipped in a separate library on Maven Central:

dependencies {
    // ... other dependencies ...
    implementation 'io.cobrowse:cobrowse-sdk-android:2.+'
    implementation 'io.cobrowse:cobrowse-sdk-android-compose-ui:2.+'
}

You are required to use the same version of the Cobrowse.io SDK and Compose UI redaction artifacts. Using different versions of Cobrowse.io SDK artifacts is not supported.

Apply Modifier.redacted() to your composable to be redacted, like so:

import io.cobrowse.redacted

Text("Redacted label",
     modifier = Modifier
         .background(Color.Red)
         // Other modifiers...
         .redacted())

Redaction by default

Sometimes you may want to redact everything on the screen, then selectively "unredact" only the parts your support agents should be able to see. This is particularly useful on applications that require a higher privacy standard or where only specific sections of the App should be visible to the agent.

To achieve this, you'll need to follow the delegate implementation and ensure you pass the all your applications root views to the Cobrowse redaction delegate method:

@Override
public List<View> redactedViews(@NonNull Activity activity) {
    return new ArrayList<View>() {{
        add(activity.getWindow().getDecorView());
    }};
}

Once you've done this, your application root views will be redacted by default and you'll be able to un-redact child components to make them visible to the agents by implementing CobrowseIO.UnredactionDelegate in your CobrowseIO.Delegate class:

@Override
public List<View> unredactedViews(@NonNull Activity activity) {
    return new ArrayList<View>(){{
        if (findViewById(R.id.view_to_be_unredacted) != null)
            add(findViewById(R.id.view_to_be_unredacted));
    }};
}

Alternatively, you can implement CobrowseIO.Unredacted interface in your Activity subclasses:

@Override
public List<View> unredactedViews() {
    return new ArrayList<View>(){{
        if (findViewById(R.id.view_to_be_unredacted) != null)
            add(findViewById(R.id.view_to_be_unredacted));
    }};
}

Redaction of WebView content

Your app may show web content that contains elements that you wish to redact. This can be achieved by setting the webviewRedactedViews property to an array of CSS selectors that identify the elements to be redacted.

CobrowseIO.instance().webviewRedactedViews(new String[] { ".redacted",  ...some other selectors... });

React Native

To redact an element in your RN application you can wrap it in a tag provided by the Cobrowse module:

import { Redacted } from 'cobrowse-sdk-react-native';

// ...
<View style={styles.container}>
    <Redacted>
        <Text style={styles.instructions}>This text should be secret</Text>
    </Redacted>
</View>

Redaction by default

Sometimes you may want to redact everything on the screen, then selectively "unredact" only the parts your support agents should be able to see. This is particularly useful on applications that require a higher privacy standard or where only specific sections of the App should be visible to the agent.

To achieve this, you'll need to follow the delegate implementation and ensure you pass the all your applications root views to the Cobrowse redaction delegate methods for iOS and Android.

pageListening for events

Once you've done this, your application root views will be redacted by default and you'll be able to un-redact child components to make them visible to the agents:

import { Unredacted } from 'cobrowse-sdk-react-native';
// ...

<View style={styles.container}>
    <Text>This text should be secret due to the redaction by default implementation</Text>
    <Unredacted>
        <Text>This text will be visible to the agents because it's wrapped with an Unredacted component</Text>
        <Redacted>
            <Text>You can also nest redacted elements inside unredacted ones. This text will be hidden to the agents.</Text>
        </Redacted>
    </Unredacted>
</View>

Redaction of WebView content

Your app may show web content that contains elements that you wish to redact. This can be achieved by setting the webviewRedactedViews property to an array of CSS selectors that identify the elements to be redacted.

CobrowseIO.webviewRedactedViews = [ '.redacted', ...some other selectors... ];

Redacting views outside React Native

Finally, within React Native some packages will render in new Windows/Root Views. You can follow the same delegate implementation to identify this views and redact or unredact them by default as required. You can check the provided examples for iOS and Android which redact by default the React Native Dev menu keeping one of the options unredacted to illustrate the technique.

Xamarin / .NET Mobile

Xamarin.iOS implementation

Implement the ICobrowseIORedacted interface on any UIViewController that contains sensitive views. This interface contains one RedactedViews property:

public partial class ViewController : UIViewController, ICobrowseIORedacted
{
    // From this property you should return a list of the views you want Cobrowse to redact, for example:
    public UIView[] RedactedViews
        => new[] { redactedTextView };
}

Xamarin.Android implementation

Implement the CobrowseIO.IRedacted interface on any Activity that contains sensitive views. This interface contains one method:

[Activity]
public class MainActivity : AppCompatActivity, CobrowseIO.IRedacted
{
    // From this method you should return a list of the views you want Cobrowse to redact, for example:
    public IList<View> RedactedViews()
    {
        return new[]
        {
            FindViewById(Resource.Id.redact_me)
        }
    }
}

Xamarin.Forms implementation

While it is not possible to access platform-specific UI code directly from a cross-platform project, you can easily achieve it using Effects and Custom Renderers.

In your cross-platform project declare a new Effect for marking Xamarin.Forms UI elements as redacted:

using Xamarin.Forms;

namespace YourAppNamespace.Forms
{
    /// <summary>
    /// A Xamarin.Forms effect that helps to redact Xamarin.Forms view in Cobrowse.io.
    /// </summary>
    public class CobrowseRedactedViewEffect : RoutingEffect
    {
        public bool IsRedacted { get; set; } = true;

        public CobrowseRedactedViewEffect()
            : base("YourAppName" + "." + nameof(CobrowseRedactedViewEffect))
        {
        }
    }
}

iOS-specific platform Effect would look like this:

using System.Collections.Generic;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ResolutionGroupName("YourAppName")]
[assembly: ExportEffect(typeof(YourAppNamespace.iOS.PlatformCobrowseRedactedViewEffect), "CobrowseRedactedViewEffect")]
namespace YourAppNamespace.iOS
{
    public class PlatformCobrowseRedactedViewEffect : PlatformEffect
    {
        private static readonly List<UIView> sRedacted = new List<UIView>();

        public static UIView[] RedactedViews => sRedacted.ToArray();

        public PlatformCobrowseRedactedViewEffect()
        {
        }

        protected override void OnAttached()
        {
            // We have to always use 'Container' and never 'Control'
            // because 'Control' is null in 'OnDetached', at least in Xamarin.Forms 4.5.0.356
            AddToRedacted(Container);
        }

        protected override void OnDetached()
        {
            RemoveFromRedacted(Container);
        }

        private static void AddToRedacted(UIView view)
        {
            if (view == null)
            {
                return;
            }
            sRedacted.Add(view);
        }

        private static void RemoveFromRedacted(UIView view)
        {
            if (view == null)
            {
                return;
            }
            if (sRedacted.Contains(view))
            {
                sRedacted.Remove(view);
            }
        }
    }
}

Then create a new default Xamarin.Forms.Page renderer which would implement ICobrowseIORedacted interface:

using UIKit;
using Xamarin.CobrowseIO;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ContentPage), typeof(YourAppNamespace.iOS.CobrowseRedactedPageRenderer))]
namespace YourAppNamespace.iOS
{
    public class CobrowseRedactedPageRenderer : PageRenderer, ICobrowseIORedacted
    {
        public UIView[] RedactedViews => PlatformCobrowseRedactedViewEffect.RedactedViews;
    }
}

Android-specific platform Effect would look like this:

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using AView = Android.Views.View;

[assembly: ResolutionGroupName("YourAppName")]
[assembly: ExportEffect(typeof(YourAppNamespace.Android.PlatformCobrowseRedactedViewEffect), "CobrowseRedactedViewEffect")]
namespace YourAppNamespace.Android
{
    public class PlatformCobrowseRedactedViewEffect : PlatformEffect
    {
        private static readonly List<AView> sRedacted = new List<AView>();

        public static IList<AView> RedactedViews => sRedacted;

        protected override void OnAttached()
        {
            AddToRedacted(Control ?? Container);
        }

        protected override void OnDetached()
        {
            RemoveFromRedacted(Control ?? Container);
        }

        private static void AddToRedacted(AView view)
        {
            if (view == null)
            {
                return;
            }
            sRedacted.Add(view);
        }

        private static void RemoveFromRedacted(AView view)
        {
            if (view == null)
            {
                return;
            }
            if (sRedacted.Contains(view))
            {
                sRedacted.Remove(view);
            }
        }
    }
}

Then implement CobrowseIO.IRedacted interface in your Forms activity:

using System.Collections.Generic;
using Android.App;
using Xamarin.CobrowseIO;
using AView = Android.Views.View;

namespace YourAppNamespace.Android
{
    [Activity]
    public class MainActivity
        : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity,
        CobrowseIO.IRedacted
    {
        public IList<AView> RedactedViews()
        {
            return PlatformCobrowseRedactedViewEffect.RedactedViews;
        }
    }
}

MAUI implementation

Create a new Effect which then will be used to redact certain MAUI views:

public class CobrowseRedactedViewEffect : RoutingEffect
{
    public bool IsRedacted { get; set; } = true;
}

Create the following iOS-specific classes:

public class CobrowseRedactionDelegate
    : Cobrowse.IO.CobrowseDelegateImplementation
{
    public override UIView[] RedactedViewsForViewController(UIViewController vc)
        => PlatformCobrowseRedactedViewEffect.RedactedViews;
}

public class PlatformCobrowseRedactedViewEffect : PlatformEffect
{
    private static readonly List<UIView> sRedacted = new List<UIView>();

    public static UIView[] RedactedViews => sRedacted.ToArray();

    public PlatformCobrowseRedactedViewEffect()
    {
    }

    protected override void OnAttached()
    {
        AddToRedacted(Container);
    }

    protected override void OnDetached()
    {
        RemoveFromRedacted(Container);
    }

    private static void AddToRedacted(UIView view)
    {
        if (view == null)
        {
            return;
        }
        sRedacted.Add(view);
    }

    private static void RemoveFromRedacted(UIView view)
    {
        if (view == null)
        {
            return;
        }
        if (sRedacted.Contains(view))
        {
            sRedacted.Remove(view);
        }
    }
}

Android-specific classes:

public class CobrowseRedactionDelegate
    : Cobrowse.IO.CobrowseDelegateImplementation,
    Cobrowse.IO.Android.CobrowseIO.IRedactionDelegate
{
    public IList<AView>? RedactedViews(Activity activity)
        => PlatformCobrowseRedactedViewEffect.RedactedViews;
}

public class PlatformCobrowseRedactedViewEffect : PlatformEffect
{
    public PlatformCobrowseRedactedViewEffect()
    {
    }
    private static readonly List<AView> sRedacted = new List<AView>();

    public static IList<AView> RedactedViews => sRedacted;

    protected override void OnAttached()
    {
        AddToRedacted(Control ?? Container);
    }

    protected override void OnDetached()
    {
        RemoveFromRedacted(Control ?? Container);
    }

    private static void AddToRedacted(AView view)
    {
        if (view == null)
        {
            return;
        }
        sRedacted.Add(view);
    }

    private static void RemoveFromRedacted(AView view)
    {
        if (view == null)
        {
            return;
        }
        if (sRedacted.Contains(view))
        {
            sRedacted.Remove(view);
        }
    }
}

Make sure the delegates you just created are passed into the Cobrowse.io SDK after the SDK is started:

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        CobrowseIO.Instance.License = "<your license key>";
        CobrowseIO.Instance.Start();

#if ANDROID
        Cobrowse.IO.Android.CobrowseIO.Instance.SetDelegate(new YourNamespace.Platforms.Android.CobrowseRedactionDelegate());
#elif IOS
        Cobrowse.IO.iOS.CobrowseIO.Instance.SetDelegate(new YourNamespace.Platforms.iOS.CobrowseRedactionDelegate());
#endif
    }

Last, utilize the created effect like this:

<ContentPage xmlns:local="clr-namespace:YourNamespace">
...
    <Label Text="This label is redacted">
        <Label.Effects>
            <local:CobrowseRedactedViewEffect />
        </Label.Effects>
    </Label>
...
</ContentPage>

Redaction of WebView content

Your app may show web content that contains elements that you wish to redact. This can be achieved by setting the WebViewRedactedViews property to an array of CSS selectors that identify the elements to be redacted.

CobrowseIO.Instance.WebViewRedactedViews = new string[] { ".redacted", ...some other selectors... };

2. Use the Cobrowse web dashboard to define redacted views

This mechanism is provided as a fallback, use the SDK APIs when possible for maximum resiliency and efficiency.

You can also define redactions using a selector entered into the web dashboard. This can be useful if your app is already in production and you need to redact a field retrospectively, either due to a missed redaction entry in the app build or changing requirements. Visit the dashboard settings to enter redaction selectors.

Web

Enter your css selectors, e.g. .redacted-class or #redacted-id.

iOS

Enter your objective-C class name and/or view id, e.g. ClassName#id or just #id.

ClassName is the name of the UI class, and id is the integer tag of the view object.

Android

Enter your tag of the view class and/or the identifier name for the view, e.g. tag#id or just #id.

tag is the simple name of the view class, #id can usually be found in the XML layout like so android:id="@+id/here_is_the_id. The #id must be able to be used with system android.view.View#findViewById() and android.app.Activity#findViewById() methods.