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.
SaleAssist 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.
Redactions are defined as CSS selectors, passed as an array to the SaleAssist 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...]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 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:
Alternatively, you can implement CobrowseIOUnredacted protocol in your UIViewController subclasses:
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.
Implement the CobrowseIO.Redacted interface on any Activity that contains sensitive views. This interface contains one method:
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:
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:
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:
Alternatively, you can implement CobrowseIO.Unredacted interface in your Activity subclasses:
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.
To redact an element in your RN application you can wrap it in a tag provided by the Cobrowse module:
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.
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:
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.
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.iOS implementation
Implement the ICobrowseIORedacted interface on any UIViewController that contains sensitive views. This interface contains one RedactedViews property:
Xamarin.Android implementation
Implement the CobrowseIO.IRedacted interface on any Activity that contains sensitive views. This interface contains one method:
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:
iOS-specific platform Effect would look like this:
Then create a new default Xamarin.Forms.Page renderer which would implement ICobrowseIORedacted interface:
Android-specific platform Effect would look like this:
Then implement CobrowseIO.IRedacted interface in your Forms activity:
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.
For any support write us at [email protected]
Last updated
Was this helpful?