Django出现 frame because it set X-Frame-Options to deny 错误

使用django3进行开发时，由于项目前端页面使用iframe框架，浏览器错误提示信息如下：

Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.

目录

• 1. 背景
• 2. X-Frame-Options
  • 2.1 X-Frame-Options是什么
  • 2.2 语法
  • 2.3 功能
• 3. 在Django中设置
  • 3.1 Django默认开启点击劫持保护
  • 3.2 设置允许同域名网站使用frme展示
  • 3.3 指定视图函数不设置X-Frame-Options
  • 3.4 指定视图函数设置X-Frame-Options
• 4. 解决办法

1. 背景

使用django3进行开发时，由于项目前端页面使用iframe框架，浏览器错误提示信息如下：

Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.

根据提示信息发现是因为X-Frame-Options=deny导致的。

2. X-Frame-Options

2.1 X-Frame-Options是什么

The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 <frame>, <iframe>,<embed> 或者 <object>中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持（clickjacking）攻击。

2.2 语法

X-Frame-Options 有三个值：

• DENY ：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许
• SAMEORIGIN ：表示该页面可以在相同域名页面的 frame 中展示
• ALLOW-FROM uri ：表示该页面可以在指定来源的 frame 中展示

根据上述 X-Frame-Options的三个值描述，只要修改django的X-Frame-Options为SAMEORIGIN ，那么相同域名页面就可以使用frame中展示。

2.3 功能

• 点击劫持保护

clickjacking中间件和装饰器提供了易于使用的保护，以防止clickjacking。当恶意站点诱使用户单击他们已加载到隐藏框架或iframe中的另一个站点的隐藏元素时，会发生这种类型的攻击。

• 防止点击劫持

现代浏览器采用X-Frame-Options HTTP标头，该标头指示是否允许在框架或iframe中加载资源。如果响应包含标头值为的标头，SAMEORIGIN则浏览器将仅在请求源自同一站点时才将资源加载到框架中。如果将标头设置为，DENY则无论哪个站点发出请求，浏览器都将阻止资源加载到框架中。

3. 在Django中设置

在django3.0版本中，默认开启点击劫持保护。Django提供了几种在您的网站响应中包含此标头的方法：

• 在所有响应中设置标头的中间件。
• 一组视图装饰器，可用于覆盖中间件或仅为某些视图设置标头。

如果X-Frame-OptionsHTTP头尚未在响应中出现，则仅由中间件或视图装饰器设置。

3.1 Django默认开启点击劫持保护

设置X-Frame-Options为所有响应

要X-Frame-Options为您站点中的所有响应设置相同的值，请在setting.py中MIDDLEWARE输入 'django.middleware.clickjacking.XFrameOptionsMiddleware' ：

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

在生成的设置文件中启用了该中间件 startproject。

默认情况下，中间件将为每个outgoing 将X-Frame-Options标头设置 DENY为HttpResponse。

3.2 设置允许同域名网站使用frme展示

默认情况下，中间件将为每个出站的HttpResponse将X-Frame-Options头设置为DENY。如果您希望此标头的任何其他值，请设置X_FRAME_OPTIONS设置：

X_FRAME_OPTIONS = 'SAMEORIGIN'

3.3 指定视图函数不设置X-Frame-Options

from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt

@xframe_options_exempt
def ok_to_load_in_a_frame(request):
    return HttpResponse("This page is safe to load in a frame on any site.")

如果要提交表单或访问框架或iframe中的会话cookie，则可能需要修改CSRF_COOKIE_SAMESITE或 SESSION_COOKIE_SAMESITE设置。

3.4 指定视图函数设置X-Frame-Options

from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_deny
from django.views.decorators.clickjacking import xframe_options_sameorigin

@xframe_options_deny
def view_one(request):
    return HttpResponse("I won't display in any frame!")

@xframe_options_sameorigin
def view_two(request):
    return HttpResponse("Display in a frame if it's from the same origin as me.")

4. 解决办法

在setting.py中添加

X_FRAME_OPTIONS = 'SAMEORIGIN'

参考文档：

https://docs.djangoproject.com/zh-hans/3.0/ref/clickjacking/