之前上传图片都是结合一些其他富文本或者直接点击提交按钮制作上传的,但是这次我的博客采用的是Editor.md自带的图片上传按钮来实现的,在我本地测试的时候上传图片一直提示Refused to display 'xxxxx' in a frame because it set 'X-Frame-Options' to 'deny'.
,而我也在django
的view
上传函数加了@ csrf_exempt
免除了csrftoken
的认证。请求上传的过程很正常,Django
可以正常收到请求,并存储图片,返回前端数据。但前端显示就有问题,打开Chrome
的控制台就看到上面的那个提示。 这个提示的大概意思就是不允许在别的网站frame中进行嵌套
网上的解决方案一大堆,有的说要改nginx
配置,有的需要修改js
相关的设置,其实都不需要,遇到这个问题,首先请确认一下Django
的版本,是否是3.x的。 如果是的话,在项目的settings.py
里面查看MIDDLEWARE
的配置里面有个'django.middleware.clickjacking.XFrameOptionsMiddleware',
其实就是中间件进行了拦截,但是我们也不要注释掉。这是Django
帮助禁止了X-Frame-Options
,避免出现一些风险什么的。
在解决这个问题之前,先搞清楚X-Frame-options
,通过了解大致如下
X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 , 或者 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌到别人的网站中去,也从而避免了点击劫持 (clickjacking) 的攻击。
X-Frame-Options 有三个值: + DENY :表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许 + SAMEORIGIN :表示该页面可以在相同域名页面的 frame 中展示 + ALLOW-FROM uri :表示该页面可以在指定来源的 frame 中展示
在理解了这个问题那么解决的方法有下面两种,都非常简单。
第一种(不推荐)
直接在settings.py
中设置整体项目X_FRAME_OPTIONS="SAMEORIGIN "
这种设置是全局的,相当于整个项目都允许了,但是我们需要的并不是这样的,所以了解即可。
第二种(推荐)
直接在views
里面引入Django
自带的装饰器
from django.views.decorators.clickjacking import xframe_options_sameorigin
在需要的函数上面增加装饰器@ xframe_options_sameorigin
即可
继续深入了解 Django
提供了clickjacking
防护,也可以叫做点击劫持保护(An example of clickjacking)
官方原文
Suppose an online store has a page where a logged in user can click “Buy Now” to purchase an item. A user has chosen to stay logged into the store all the time for convenience. An attacker site might create an “I Like Ponies” button on one of their own pages, and load the store’s page in a transparent iframe such that the “Buy Now” button is invisibly overlaid on the “I Like Ponies” button. If the user visits the attacker’s site, clicking “I Like Ponies” will cause an inadvertent click on the “Buy Now” button and an unknowing purchase of the item.
大概意思如下:
假设一个在线商店拥有一个页面,已登录的用户可以点击“现在购买”来购买一个商品。用户为了方便,可以选择一直保持商店的登录状态。一个攻击者的站点可能在他们自己的页面上会创建一个“我喜欢Ponies”的按钮,并且在一个透明的iframe中加载商店的页面,把“现在购买”的按钮隐藏起来覆盖在“我喜欢Ponies”上。如果用户访问了攻击者的站点,点击“我喜欢Ponies”按钮会触发对“现在购买”按钮的无意识的点击,不知不觉中购买了商品
有兴趣的也可以在这里查看