How to set X-FRAMES_OPTIONS to any other value than deny for Django media files embedding purposes?

Question

I am developing a procedure where an already uploaded/generated file gets displayed in the user's dashboard through embed/iframe HTML tags. These files are HTML divs generated by plotly (Python, server-side generated).

So when I try to view these files through iframe like this:

      <iframe
          width="100%"
          height="100%"
          frameBorder="0"
          src="http://127.0.0.1:8000/media/plots/20/plot-x-a-1.html"
        />

I get the following error through developers tools: Refused to display 'http://127.0.0.1:8000/' in a frame because it set 'X-Frame-Options' to 'deny'.

As you are aware that usually it is solved by either disabling the XFramesOptions middleware entirely or to set it as ALLOWALL.

The issue is, neither disabling this middleware nor adding these lines:

X_FRAME_OPTIONS = 'ALLOWALL'
XS_SHARING_ALLOWED_METHODS = ['POST','GET','OPTIONS', 'PUT', 'DELETE']

helped prevent the error. My guess is, media stream requires x_frames_options to be set to AllowAll or sameorigin but there is no documentation about how to do that.

Is my reasoning correct? why would the browser still reject my iframe requests after such changes?

Note: development is totally local at the moment.

Answer 1

According to the documentation on Clickjacking Protection [Django-doc] you should set the value of X_FRAME_OPTIONS in your settings.py to:

X_FRAME_OPTIONS = 'SAMEORIGIN'

And also ensure that the XFrameOptionsMiddleware is enabled:

MIDDLEWARE = [
    ...
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ...
]