Back to top

Security functionalities

Surfly has some security measures built in. You’ll find more info here. Below you will find an overview of the different security functionalities you can add to your Surfly integration. To get a feel of the different options, check out our demo page.

Reminder: You can implement these settings through the Surfly dashboard or the Javascript API. When you implement settings through the JS API, these will take priority over the settings in the Surfly dashboard.

Blacklist / Whitelist

By adding URLs to the blacklist and/or whitelist, you can restrict your users from navigating to other websites.

Option Default Description
blacklist “[]” Restrict access to the specific resources.
whitelist “[]” Restrict access to the specific resources.

Field masking

With field masking you can mask form fields for followers, so that they can’t see the leader’s input. By default, Surfly already masks creditcard and password fields. If you want to mask other fields, you just have to add the surfly_private attribute to fields containing sensitive information:

<span>Email address</span>
<input type="text" size="20" surfly_private>

Control dependent appearance

During your Surfly co-browsing session it’s possible to pass control of the page between participants. It’s also possible to change the behaviour of your website while co-browsing, depending on who has control. We can use the example of filling out a payment form as a proof of concept to demonstrate how this might be useful…

Let’s say you are co-browsing with a customer and the agent has taken over control, but you don’t want them to be able to submit forms or orders. With the .on() method we can disable the submit button when the agent is given control, only allowing the customer to confirm the payment:


  Surfly.init({widget_key:'**your widget key here**'}, function(init) {
    if (init.success) {

    // display the default Surfly button

      var sess;
        sess = Surfly.session();
      else {
        sess = Surfly.currentSession;
      sess.on('control', function(session, event) {
        var element = document.getElementById("order_button");
        // Specify that you DON'T want the limitations to apply to the leader
        // Use index 0 for the leader, and 1, 2, etc. for the followers
        if ( {
          element.disabled = false;
 = "#87cefa";
        // Apply the limitations to everyone else when they are in control
        else {
          element.disabled = true;
 = "#e6fff2";
      // UNTIL HERE


Generated by aglio on 24 Jun 2019