Forums

Getting 403 FORBIDDEN error with _dash-update-component for iframe of web app

Hello, I was hoping you could help me with a 403 error I'm getting. I have a web app located here, and it's working just fine on it's own page (it's currently an example app from the Dash docs because I wanted to be sure my app's code wasn't the problem). The issue only occurs when I try to embed the app in an iframe on a separate site.

When I load the page with the iframe, most of the web app is loaded. The text and widgets and css styling get loaded, and I can choose different options from the dropdowns and things (or in the case of the example app that's currently up, I can move the slider around). But the graph that should be generated based on the widget options never appears.

When I look at my browser's network monitor, I see that, for instance, the _dash-layout and _dash-dependencies files come through just fine. But the _dash-update-component file gets a 403 error. And every time I change one of the widget options, I get another 403 error for _dash-update-component.

The 403 Forbidden error help page suggested that upgrading to a paid account might fix this issue. However, despite upgrading, reinstalling the app and reloading the app several times, I'm still getting the same problem.

At first I thought it might be something wrong with wordpress site where I was originally trying to embed the app, but then I just created a basic html file consisting only of the basic iframe that I saved locally and I'm still getting the same error.

Do you have any idea what the issue is? Any help would be much appreciated. I've tried just about everything I can think of. Thanks in advance!

aside from the 403 status code, what is in the response body?

It says: "Forbidden You don't have the permission to access the requested resource. It is either read-protected or not readable by the server."

Also here's the General info from the Header section: Request URL:https://agstanton.pythonanywhere.com/_dash-update-component Request Method:POST Status Code:403 FORBIDDEN Remote Address:34.206.101.184:443 Referrer Policy:no-referrer-when-downgrade

And here's some info from the Response Header: Connection:keep-alive Content-Encoding:gzip Content-Type:text/html Date:Thu, 12 Oct 2017 15:57:26 GMT Server:openresty/1.9.15.1 Set-Cookie:_csrf_token=0ef1b00fb2e45871138440934c468c08daeea1de; Expires=Tue, 17-Oct-2017 15:57:26 GMT; Max-Age=432000; Path=/ Set-Cookie:session=eyJfY3NyZl90b2tlbiI6IjBlZjFiMDBmYjJlNDU4NzExMzg0NDA5MzRjNDY4YzA4ZGFlZWExZGUifQ.DMEiZg.kusv_cOUCAmisHBl0dpwA8JBykM; HttpOnly; Path=/ Transfer-Encoding:chunked Vary:Cookie

Any ideas?

That looks like your web app is sending the 403. So either your web app itself is generating the 403, or the framework you're using is. It sounds like the page is sending a request and either your code or your framework disallows requests from within an iframe.

Glenn and Conrad, thanks for your replies. You are absolutely right, I had to disable CSRF protection in my dash app and now everything works great! I really thought it had to be a python anywhere issue based on other things I'd read, but I've been proven wrong and I appreciate you pointing me in the right direction.

Here's the discussion on plotly's forums where this issue was addressed for anyone else that encounters it.

:)