Help Center

BlueConic Chrome Extension technical deep dive

BlueConic Chrome ExtensionThe BlueConic Chrome Extension allows users to log in to a BlueConic server and work with websites, 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.

How does the BlueConic Chrome Extension work?

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 your BlueConic 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 your BlueConic 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 BlueConic tenant. This can happen for multiple BlueConic tenants, each with their own channels.

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

The BlueConic extension is only active for users who are logged in to a BlueConic tenant and for websites that are in the channels 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 your BlueConic 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 that tenant's channels, 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 blocks these. It injects the BlueConic script of the intended tenant.

How does the BlueConic Chrome Extension work?

Original script is blocked.

Technical deep dive on the BlueConic CDP Chrome Extension

Script for intended tenant script being requested instead of original (notice the source=blueconic-browser-extension).

So now, a user can add a website to their BlueConic tenant's channels, 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.

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.

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 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 that tenant's channels.
  • 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 channel 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.
    • declarativeNetRequest: Required to block and modify network requests.

    • scripting: Required to inject scripts into pages.

    • host: Required to inject scripts into pages.

 

 

Was this article helpful?
0 out of 0 found this helpful