Graphs cannot be displayed "in a frame because it set 'X-Frame-Options' to 'sameorigin'."

📊 Plotly Python
1

Hi,

I just launched a website and pushed a bunch of people to it.

Many of my users are saying they cannot see the plotly charts and are getting the error:

Refused to display ‘https://plot.ly/~DataLlama/30.embed?link=false&modebar=false&link=false’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

I’ve done some searching but cannot find anything on this. It’s really messing with my launch and this is a pretty time sensitive thing. Can anyone help?!

Thanks!

1 Like
2

Hi DataLIama,

were you able to solve your issue yet? It’s been a long time but I’m having troubles with it as well. If you haven’t find a solution yet, I’d like to give you of a few ideas and what I’ve tested so far, and maybe you’ll have more success than me :grinning::

  • Download the whole page using beautifulsoup or wget. beautifulsoup only got me text and not the css and everything so it’s not really a solution. I could not figure out what to do with the wget file I got either. With this solution you would also have problems if you’d want to click things inside the iframe.

  • Using your own proxy. I mean redirecting all requests to localhost. That should bypass with sameorigin issue I guess. There is the python library pproxy but I could not figure out how to use it…

  • Somehow embedding your own browser (with chromium or whatever I don’t know) in the div but that seems unrealistic.

  • A similar idea: lauching an automated browser with selenium and a webdriver (e.g. chrome_driver): I have used this a few times at work so if we can figure out how to tell dash to launch/update the webdriver then that would be a good workaround. It would not be in a div but in a pop-up however.

In my case I’m using clickdata from a chart and it selects a website (I actually want to transition from Tableau and this is an important feature). By the way the div is not 100 % height of the parent div. I’m probably going to open a topic about that.

image
image.png1868×424 5.68 KB

3

I have the same issue.

4

I have this issue using django 3.0.9, I have tried to disable middleware

django.middleware.clickjacking.XFrameOptionsMiddleware

I have also tried adding this to settings.py:
X_FRAME_OPTIONS = ‘SAMEORIGIN’

Neither help. I believe my server is not allowing the client to display the iframe. I don’t see why an iframe is necessary. This is simply a table, isn’t it?

5

Fixed by using plotly_direct as described here:

https://django-plotly-dash.readthedocs.io/en/latest/template_tags.html

6

X-Frame-Options is a header included in the response to the request to state if the domain requested will allow itself to be displayed within a frame. It has nothing to do with javascript or HTML, and cannot be changed by the originator of the request. You can’t set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource . They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. So you cannot embed their website into yours. Browsers when see that the response header contains X-Frame-Options: SAMEORIGIN, they check your domain and block the rendering of the <iframe>. It is a security measure to avoid clickjacking.