Haaksbergweg 75, 1101 BR Amsterdam
info@theinformationlab.nl
020 261 4741
The Information Lab Nederland

Tableau embedded en 3rd party cookies

The Information Lab Nederland > Blog > Alle > Tableau embedded en 3rd party cookies

Veel van onze klanten maken gebruik van Tableau Server visualisaties in hun eigen klantenportaal. Ze doen dit door Tableau visualisaties te embedden in hun bestaande klantomgeving waarbij de authenticatie plaatsvindt via Trusted Tickets, SAML of OpenID Connect. Omdat sommige browsers third party cookies blokkeren (dit zijn cookies geplaatst door een domein ander dan de website welke je op dat moment bezoekt), werkt de authenticatie niet goed omdat het Tableau cookie van een ander (sub)domein komt als het klantenportaal.

We kunnen dit probleem oplossen door er voor te zorgen dat Tableau hetzelfde domein gebruikt als het klanten portaal. Stel dat het klanten portaal bereikbaar is op customers.example.com dan moeten we er voor zorgen dat Tableau Server ook op dit domein bereikbaar wordt. We kunnen echter niet zomaar twee verschillende websites op exact hetzelfde adres weergeven. Omdat het niet mogelijk is om Tableau Server in een subfolder te laten draaien (bijvoorbeeld customers.example.com/tableauserver) moeten we op zoek naar een andere oplossing.

Deze oplossing ligt in het gebruik maken van verschillende poorten voor het klantenportaal en de Tableau Server. Aangezien Tableau Server embedded is in het klantenportaal zullen klanten nooit de exacte url zien, dus het gebruik van een afwijkende poort heeft geen visuele afbreuk.

We kunnen bovenstaande oplossing realiseren door gebruik te maken van een reverse proxy. Een reverse proxy ontvangt het verzoek van de browser van de bezoeker en stuurt deze door naar een andere server aan de hand van een aantal criteria. Een van deze criteria is de poort. In het voorbeeld hieronder maken we gebruik van NGINX, een open-source webserver en proxy.

Stap 1

Door de DNS van customers.example.com aan te passen en ervoor te zorgen zodat deze niet langer naar de originel webserver verwijst maar naar het IP van onze NGINX Proxy Server wordt ieder verzoek van een bezoeker door de proxy server behandeld en naar de relevante achterliggende server doorgestuurd.

Stap 2

We zorgen ervoor dat NGINX luistert op poort 443 (de standaard https/ssl poort voor browsers) en het verkeer doorstuurt naar poort 80 van de originele webserver van het klanten portaal. Door hierbij gebruik te maken van SSL offloading kan de communicatie over het internet met de browser van de gebruiker ssl encrypted zijn, maar de communicatie over het interne netwerk tussen de proxy server en de webserver van het klantenportaal gewoon unencrypted over poort 80 lopen.

Stap 3

We zorgen er ook voor dat NGINX luistert op poort 9443 en hierbij het verkeer doorstuurt naar poort 80 van de Tableau Server. Ook hier maken we gebruik van SSL offloading zodat de communicatie tussen de browser en proxy server ssl encrypted is, maar de communicatie over het interne netwerk tussen proxy server en Tableau Server gewoon over poort 80 kan lopen.

Stap 4

We configureren Tableau Server zodat deze weet wat de hostname en poort is waaronder de Tableau Server via de proxy publiek bereikbaar is, en zorgen ervoor dat Tableau Server de proxy vertrouwd. Dit kunnen we doen door middel van de volgende commando’s in de commandline als administrator in te voeren:
tsm configuration set -k gateway.trusted -v “ip address of your proxy”
tsm configuration set -k gateway.public.host -v “customers.example.com”
tsm configuration set -k gateway.public.port -v “9443”
tsm configuration set -k gateway.trusted_hosts -v “customers.example.com”
tsm pending-changes apply

Na dit laatste commando zal Tableau Server herstarten en de wijzigingen in de configuratie doorvoeren.

Stap 5

We passen het embedscript van de Tableau visualisaties aan zodat er verwezen wordt naar https://customers.example.com:9443 in plaats van het originele adres. Let hierbij op dat je dit doet voor zowel het adres van de visualisatie als de import van de Tableau javascript API aan het begin van het script.

Voorbeeld NGINX Configuratie

server {
  #listen on default port 80 for incoming requests and redirect to SSL port 443
  listen80;
  server_namecustomers.example.com;
  location / {
    return 301 https://$host$request_uri;
  }
}
server {
  #listen on default port 443 for incoming SSL request to forward to customer portal
  listen 443 ssl;
  server_name customers.example.com;
  #add certificate for SSL offloading
  ssl_certificate /etc/letsencrypt/live/customers.example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/customers.example.com/privkey.pem;
  location / {
    proxy_pass http://<ip_address_or_url_of_your_webserver>
    #set the right proxy headers so the webserver works correctly
    include /etc/nginx/proxy_params;
  }
}
server {
  #listen on port 9443 for incoming SSL request to forward to Tableau Server
  listen 9443 ssl;
  server_name customers.example.com;
  #add certificate for SSL offloading
  ssl_certificate /etc/letsencrypt/live/customers.example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/customers.example.com/privkey.pem;
  location / {
    #forward any request to tableau server
    proxy_pass http://<ip_address_or_url_of_your_tableau_server>
    #set the right proxy headers so Tableau works correctly
    include /etc/nginx/proxy_params;
  }
}

 

I hope this blog I shared can be useful for you! If you have any more questions don’t hesitate to contact us.

In need of further explanations and help? Join our workshops and trainings or hire a consultant!

Image from: unsplash.com.