Installation of NV Tag

Overview

This section guides through the process and associated steps for inserting the NetVision (NV) tag inside an application.

How NetVision (NV) Works – High Level

  • It has mainly two components – NV JS Agent and NV Server.
  • When a user browses an application (for example. www.example.com), NV bootstrap code is loaded along with the main application.
  • NV bootstrap code loads the NV JS Agent and the configuration file.
  • NV JS Agent collects the data from the browser and sends that to the NV Server.
  • NV Server processes the data and uploads it to the Database.
  • NV Reporting server can be used to monitor the data.

Prerequisites

  1. A hostname is required that is used to call the NV agent.
  2. Corresponding to that hostname, an SSL certificate is required to capture HTTPS traffic.
  3. In case, only default ports are enabled on the firewall, NV needs two IPs that are assigned to NV GUI and NV Server.

NV Tag (nv_bootstrap.js)

  • This small piece of JS code loads the complete NV JS Agent and configuration file.
  • To monitor a web application, each page should have this NV bootstrap file (or code).

Where to Add NV Tag

  • NV Bootstrap tag should be on each page of the application. We can keep this JS Code in the header file (which is common for all the pages).
  • It is recommended to keep this piece of code in such a place so it can be executed before the first Onload event. (Better to keep in the HEAD tag.)
  • It is recommended to add this tag using a tag manager (for example, Ensighten tag manager). That will have control to remove/add Tag dynamically.

How to Add NV Tag

There are two methods to add the NV tag.

  1. Add the content of the nv_bootstrap file.
  2. Add a script tag, having src to nv_bootstrap file.

Method – 1: Add the Content of nv_bootstrap

(function(){
  var dom,doc,where,iframe = document.createElement('iframe');
  iframe.src = "javascript:false";
  (iframe.frameElement || iframe).style.cssText = "width:0;height:0;border:0;display:none;";
  if(document.body){
    where = document.body.getElementsByTagName('script')[0];
    document.body.appendChild(iframe, where);
  } else {
    where = document.getElementsByTagName('script')[0];
    where.parentNode.insertBefore(iframe, where);
  }

  try {
    doc = iframe.contentWindow.document;
  } catch(e) {
    dom = document.domain;
    iframe.src="javascript:var d=document.open();d.domain='"+dom+"';void(0);";
    doc = iframe.contentWindow.document;
  }
  function getVersion() {
    //query for script like nv_bootstrap.
   var s = null;
    if(document.querySelector) {  s = document.querySelector('[src*="nv_bootstrap"]');}
    if(!s) {
      s = document.getElementsByTagName('script');
      for(var z = 0; z < s.length; z++)
      {
        if(s[z].src && s[z].src.indexOf('nv_bootstrap') >= 0) {
          s = s[z]; break;
        }
      }
    }
    if(s && s.src && s.src.indexOf('?') > 0)
    {
      var v = s.src.substr(s.src.indexOf('?')+1);
      return v;
    }
    return null;
  }
  doc.open()._l = function() {
    var js = this.createElement("script");
    if(dom) this.domain = dom;
    var src = '//mon1.example.com/nv/example/cav_nv.js?v=REL20170123';
    js.id = "boomr-if-as";
    js.async = true;
    //check if version given then set that globally and add that version in each request.
    var v = getVersion();
    if(v) {
      src = src + "?v=" +  v;
      window.top.__nv_agent_version = v;
    }
    // src should be set only once, otherwise ie makes request each time src is set
    js.src = src;
    this.body.appendChild(js);
  };
  doc.write('<body onload="document._l();">');
  doc.close();
  })();

Note: Highlighted URL has to be changed for each setup. it is recommended to add release/build version in the src of cav_nv.js (NV JS Agent), as highlighted above. Please change the version accordingly.

Method – 2: Add Script Tag for nv_bootstrap

NV Server hosts the nv_bootstrap and other files. So, following script tag can be added to load nv_bootstrap.

<script src=”//mon1.example.com/nv/example/nv_bootstrap.js?v=REL20170123” type=”text/javascript” async></script>

Customer User can host this JS from its own web server and then it can be referred from there also.

<script src=”//www.example.com/mon/js/nv_bootstrap.js?v=REL20170123” type=”text/javascript” async></script>


Note: As we mentioned in step first, it is highly recommended to add the release/build version in the URL of the script as highlighted above.  Please change the version accordingly.

Content Security Policy for NV Tag

If the application is using Content-Security-Policy then for successful NV injection requires merging the following CSP rules to your existing set of rules:-

Content-Security-Policy: default-src ‘self’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ nv-server-domain; worker-src blob: ; connect-src nv-server-domain

If script-src is not being used by the application then use following with default-src :-

Content-Security-Policy: default-src ‘self’ ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ nv-server-domain; worker-src blob: ; connect-src nv-server-domain

If the app is configured to track sessions across multiple domains then a frame-src CSP rule is required to whitelist the request to the cross domain HTML.

NV will request the page using an IFRAME.

frame-src [cross domain session host];

Handling of Sensitive Data

NV agent does not capture data of sensitive fields. Below are the web page elements, which are considered sensitive by default –

  • input[type=”password”]
  • input fields having credit/debit card number
  • input field having mobile number
  • input field with 3 digit number (cvv code)

Mark Sensitive Data Explicitly

nvSensitive class

NetVision provides an option to mark an element as sensitive explicitly using a class – nvSensitive. Developers have to use these classes to mark sensitive elements in their code.

Example:

<div>
  <span class=”cardInfo active nvSensitive” > 1832 3233 4435 … </span>
</div>

nvEncrypted class

Developers can use class – nvEncrypted to mark elements as encrypted. Value of the encrypted element will be encrypted by the JS agent (using RSA Encryption) and then will be sent to the NV Server. Visibility of  encrypted elements will be controlled by Access Control i.e. a person having authorization to see the encrypted data can only see it.

Example:

<div>
  <span class=”email active nvEncrypted“> user.abc@gmail.com</span>
</div>

Mark Sensitive Data using NetVision Configuration

In case developers do not want to make changes in their code to mark sensitive elements, they can configure these elements using NV Portal. Each setup will have its configuration and CSS Selectors corresponding to sensitive elements can be specified in this configuration. This configuration should be reviewed before any release change to update the sensitive element list.