BlueConic Chrome Extension Technical Deep Dive

The BlueConic Chrome Extension allows users to log in to a BlueConic server and work with websites in its Universe, even if these websites do not have the BlueConic script or refuse to be inlined or available in the BlueConic dialogue editor, visual picker, or simulator. The extension is available from the Chrome Web Store for free.

This Chrome extension is only intended to support and be used by BlueConic users working with website(s) that are configured within BlueConic.

The BlueConic Chrome extension has been designed as a zero configuration, standalone extension. It automatically detects when its services are needed, and it doesn’t require any interaction by the user. 

Inner workings

The BlueConic platform, when used on websites, is activated on a website using a JavaScript tag. There are limitations to what an inlined JavaScript script tag can achieve in a browser. The BlueConic Chrome extension is designed to extend the capabilities of the BlueConic platform in the browser by working in concert with the platform.

The following sections describe how the BlueConic Chrome extension does its work. 

Connecting to the tenant

Challenge

  • When the BlueConic script is not (yet) installed on a website (or points to another BlueConic tenant), the extension should inject the BlueConic script on website pages that are part of the BlueConic universe of channels, so BlueConic users can test the usage or setup of BlueConic without a script

Solution

When a user logs in to BlueConic, the platform sets a cookie named “amdatu_token”. The creation of this cookie triggers the extension to:

  1. Pick up the hostname of the BlueConic tenant that was logged in.
  2. Use the BlueConic REST API and the authentication information in the “amdatu_token” to connect to the tenant, request all hostnames in the BlueConic universe of channels, and register them as belonging with the hostname.

The extension repeats step 2 every couple of minutes, to account for possible changes in the universe on the BlueConic tenant. This can happen for multiple BlueConic tenants, each with their own universe.

If a user signs out of BlueConic, the “amdatu_token” cookie is removed. This triggers the extension to delete the hostname and its registered universe.

The BlueConic extension is only active for users who are logged in to a BlueConic tenant and for websites that are in the universe of that tenant.

Script insertion

Challenge

  • Users sometimes don’t see BlueConic dialogues appear on the website. There could be myriad reasons for this, one of which is that the website is part of the BlueConic universe of channels, but the script is not (yet) installed on the website, or pointing at another BlueConic tenant.

Solution

The BlueConic Chrome extension keeps an eye on the URLs of pages that are being requested in tabs and iframes. If the user is logged in to a tenant and visits a website that is in the universe of that tenant, the extension inserts a BlueConic JavaScript tag in that page.

Note that this might end up inserting a second script tag if there already was one embedded in the page. Loading the BlueConic script twice on a page is prohibited, because it will result in anomalies. The extension monitors the BlueConic script requests from the page and makes sure that only the first script intended for its tenant is actually loaded. Other BlueConic script requests will be redirected from their original to the intended tenant as well. Any script request coming in second or later will be returned as an empty script body.

mceclip4.png

Original script getting an internal browser redirect (307) response

 mceclip5.png

Script for intended tenant script being requested instead of original

 

So now, a user can add a website to the universe of their BlueConic tenant, and in their browser the extension would automatically add the BlueConic script for their tenant to the website, even if the script is not installed yet.

 mceclip7.png

User is not logged in, extension is not active.

Since the extension is now involved in inserting the script, it can also signal its state to the editor. This is done by the changing color of the icon from grey to blue:

mceclip6.png 

User is logged in and website is in the universe, extension is active

 

If the BlueConic Chrome extension is active on a website, its icon will turn from grey to blue. The status message updates and the BlueConic environment are displayed, as well as the current BlueConic Profile ID.

Inlining

Challenge

  • The BlueConic platform UI is a website itself. Elements such as the editor, visual picker or simulator are webpages that either inline the target website or trigger JavaScript on it to render overlays. Browser security severely restricts what is possible when one website interacts with another.
  • Web security headers can prevent websites from being loaded into iframes.
  • Content security policies can prevent resources from being loaded into websites.

Solution

The BlueConic Chrome extension scans for requests to be loaded into tabs or iframes. It matches the URLs to the hostnames in the universe of channels it learned when the user logged in. These requests are inspected for security headers that prohibit inline framing, including:

  • X-Frame-Options
  • Frame-Option
  • X-Content-Security-Policy
  • Content-Security-Policy

These headers are then removed for requests where the extension is active (i.e. only for websites configured in BlueConic itself), allowing the BlueConic platform to inline the website in the editor. 

Security considerations

  • The BlueConic Chrome extension will only perform its functions for users who are logged in to a BlueConic tenant and for websites that are in the universe of that tenant.
  • The BlueConic Chrome extension is intended to work completely autonomously and ad-hoc in the user's browser. It uses GET REST API calls to retrieve website universe information from the tenant, but it never shares or logs information about the user or web visits.
  • The BlueConic Chrome extension needs the following browser permissions to function:
    • alarms: Required to signal the need to update a tenant configuration.
    • cookies: Required to detect tenant cookies.
    • tabs: Required to get notifications of requests in tabs or iframes.
    • idle: Required to detect user inactivity.
    • storage: Required to store the “enabled” setting.
    • webRequest: Required to detect and intercept response headers of requests.
    • webRequestBlocking: Required to detect and intercept blocking requests.