Getting a 403 error when running dash app on Google collab

[hassansamini]

Describe the current behavior
A clear and concise explanation of what is currently happening.

Describe the expected behavior
A clear and concise explanation of what you expected to happen.

What web browser you are using
(Chrome, Firefox, Safari, etc.)

Additional context
Link to a minimal, public, self-contained notebook that reproduces this issue.

• Share the file using your GitHub account using File > Save a copy as a GitHub Gist.
• or Share Drive notebooks using the Share button then 'Get Shareable Link'.

[hassansamini]

https://vimeo.com/778113892/73605f54d9

[cperry-goog]

The dash app is starting a local server on the remote VM you're connected to, so clicking the link from your own browser won't work. You'll want to explore port forwarding or some other solution that would allow you to connect to the process running in the remote Colab VM. That's beyond our support, so you might want to try asking on Stack Overflow.

[craigcitro]

In fact, we have a library that should handle this for you:

from google.colab import output
output.serve_kernel_port_as_iframe(port)

should get you up and running.

[roni9826]

Can I re-open this? Tried the solution provided by craigcitro but I am getting the same error after Chrome's latest update 127.0.6533.89 (Official Build) (64-bit) (cohort: Stable).

[aggarret]

@roni9826 I am having the same problem and have a very temporary solution that is working for me.

The issue seems to be due to an update in Google Chrome. I was able to get the dashboard working again on my Mac by downloading the file for Chrome version (125.0.6422.142May 31, 2024) from the current (127.0.6533.100Aug 7, 2024) from This Site.

After I downgraded, the Collab dash worked again. I like to have the latest security features, so I don't like running on the downgraded version, but I figured It should be ok for a month or two, but long term I would like to have the latest version of Chrome and have Collab working too. Also, the Mac is my personal computer and I cannot change the version of Chrome on my work computer as it is a Google admin setting. So a very temporary solution.

I started looking to see if I can fix the issue on my work computer by solving the 403 error and I think I made progress but not sure. I fed the change longs to Gemini 1.5 Pro Experimental model and it said:

Based on the information provided, the most likely culprit for the 403 Forbidden error after the Chrome update is the change related to SVG resource documents introduced in Chrome version 126.0.6478.61.

Here's a breakdown of why and potential solutions:

Why the SVG Change Matters:

The commit 8dc092df54ce9b93406cb7fec530eb297bc0b332 removed a restriction on the document root for SVG resource documents. Previously, Chrome likely enforced a stricter policy on how SVGs were loaded, especially when used as external resources. This change might have inadvertently affected how your Plotly Dash application loads or accesses SVGs, potentially triggering the 403 error on your server.

How Plotly Dash Uses SVGs:

Plotly Dash heavily relies on SVGs for rendering charts and graphs. If your dashboard uses custom SVGs or relies on specific ways of loading SVG resources, the change in Chrome's handling of SVG document roots could be interfering with this process.

Recommendations to Fix the Issue:

1. Inspect Network Requests:

   • Use Chrome's Developer Tools (Right-click on the page -> Inspect -> Network tab) to examine the network requests made by your dashboard when it loads.
   • Look for any SVG requests that result in a 403 Forbidden error. This will pinpoint the specific SVG file causing the issue.

2. Review SVG Loading Mechanisms:

   • Relative Paths: Ensure that all paths to your SVG files are correct relative to the location of your Dash application's HTML file.
   • Absolute Paths: If using absolute paths, double-check that they are accurate and accessible.
   • CORS Configuration: If your SVGs are hosted on a different domain than your Dash application, ensure that Cross-Origin Resource Sharing (CORS) is properly configured on the server hosting the SVGs to allow requests from your Dash app's domain.

3. Update Plotly Dash:

   • Make sure you are using the latest version of Plotly Dash. Newer versions might include fixes or workarounds for compatibility issues with recent Chrome updates.

4. Test with a Minimal Example:

   • Create a simple Dash application with a single chart that uses an SVG. This will help isolate whether the issue is specific to your complex dashboard or a more general problem with SVG loading.

5. Server-Side Configuration:

   • Depending on your server setup (e.g., Apache, Nginx), you might need to adjust server configurations related to SVG MIME types or access permissions.

Example of CORS Configuration (if applicable):

If your SVGs are hosted on a different domain, you'll need to add CORS headers to the server hosting the SVGs. Here's an example for an Apache server using .htaccess:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"  # Or specify your Dash app's domain
</IfModule>

Important Considerations:

• Security: While the Access-Control-Allow-Origin: "*" header allows requests from any origin, it's generally recommended to be more specific and only allow requests from the domain where your Dash application is hosted for security reasons.
• Thorough Testing: After implementing any changes, test your dashboard thoroughly on different Chrome versions to ensure it works as expected.

By systematically investigating the network requests, reviewing SVG loading methods, and considering server-side configurations, you should be able to identify the root cause of the 403 error and resolve the issue with your Plotly Dash application in the newer Chrome versions.

[aggarret]

I think it's related to This issue. In the past it looks like adding the param csrf_protect=False to the dash app would fix the issue, but it has since been deprecated.