Reverse Proxies to the Rescue: Fixing Third-Party Cookie Issues in Tableau Embedded Analytics

Embedding Tableau visualizations in your web applications can be challenging, especially when dealing with authentication and cookie management across different domains. A common hurdle is ensuring that Tableau’s cookies are treated as first-party cookies, which is crucial for seamless functionality across all web browsers and apps, including iOS Safari and iOS apps.

In this blog post, we’ll explore a solution to run Tableau Embedded with your Custom Domain using Nginx as a reverse proxy on Heroku, streamlining the embedding of Tableau visualizations (you can apply this technique to any reverse-proxy solution in the market).

TLDR: nginx reverse proxy solution hosted on Heroku

Check out this GitHub repository.

Why Use a Reverse Proxy for Tableau Embedded?

Hosting your Tableau visualizations on the same domain as your main website ensures that all Tableau cookies are treated as first-party by browsers. This approach eliminates issues related to partitioned cookies and third-party cookie blocking, making the embedded content function smoothly across different platforms.

A reverse proxy acts as an intermediary that forwards requests from users to Tableau Server or Tableau Cloud, and then returns the response to the users. This setup makes all interactions appear as if they are happening on your main website’s domain, thereby aligning with the first-party cookie requirements.

Key Nginx Configuration to Solve Third-Party Cookie Issues

Here’s the crucial part of the Nginx configuration that makes this work:

Note: in this example, the cookies will run under my own domain eskihub.com

server {
    server_name 10ax.eskihub.com;

    listen 443 ssl; 
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        proxy_pass https://10ax.online.tableau.com/;
        proxy_ssl_name '10ax.online.tableau.com';
        proxy_set_header x-forwarded-host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
        proxy_set_header Host '10ax.online.tableau.com';
        proxy_cookie_domain '10ax.online.tableau.com' '10ax.eskihub.com';
    }
}

How This Configuration Works:

• Proxy Pass: The proxy_pass directive forwards the incoming requests to the Tableau server at https://10ax.online.tableau.com/. This ensures that all user requests to 10ax.eskihub.com are seamlessly directed to Tableau.
• Set Headers: The proxy_set_header directives set the appropriate headers for the forwarded request. This includes setting the original host, real IP, and protocol, which helps maintain the integrity and security of the request.
• Cookie Domain: The proxy_cookie_domain directive is critical. It rewrites the Domain attribute of cookies set by 10ax.online.tableau.com to 10ax.eskihub.com. This means that cookies from Tableau are seen as coming from the parent root domain (eskihub.com), making them first-party cookies. Browsers then handle these cookies correctly, avoiding issues with third-party cookie restrictions.

Why This Solves the Third-Party Cookie Issue:

By rewriting the cookie domain, all cookies created by Tableau are treated as first-party cookies. This approach ensures that:

• Compatibility: Cookies work seamlessly across all web browsers, including those with strict third-party cookie policies.
• Security: The request and response headers maintain the necessary security context.
• Functionality: Embedded Tableau visualizations function smoothly within your main website, avoiding any interruptions due to cookie handling.

Learn More and Get Started

For detailed instructions and to get started with this solution, check out the GitHub repository. Make sure to replace all instances of eskihub.com with your own domain, such as myamazingportal.com, to ensure the configuration works correctly for your setup.

By using this Nginx reverse proxy setup, you can streamline the embedding of Tableau visualizations on your website, ensuring smooth and secure functionality across all platforms.