Django 出現 frame because it set X-Frame-Options to deny 錯誤

2022 年 10 月 4 日
筆記
django

一、背景

使用django3 進行開發時，由於項目前端頁面使用iframe框架，瀏覽器錯誤提示資訊如下

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

根據提示資訊發現是因為 X-Frame-Options=deny 導致的。

二、X-Frame-Options

1 X-Frame-Options是什麼

The X-Frame-Options HTTP 響應頭是用來給瀏覽器指示允許一個頁面可否在 <frame>, <iframe>,<embed> 或者 <object>中展現的標記。站點可以通過確保網站沒有被嵌入到別人的站點裡面，從而避免點擊劫持（clickjacking）攻擊。

2 語法

X-Frame-Options 有三個值：

DENY ：表示該頁面不允許在 frame 中展示，即便是在相同域名的頁面中嵌套也不允許
SAMEORIGIN ：表示該頁面可以在相同域名頁面的 frame 中展示
ALLOW-FROM uri ：表示該頁面可以在指定來源的 frame 中展示

根據上述 X-Frame-Options的三個值描述，只要修改django的X-Frame-Options為SAMEORIGIN ，那麼相同域名頁面就可以使用frame中展示。

3 功能

點擊劫持保護

clickjacking中間件和裝飾器提供了易於使用的保護，以防止clickjacking。當惡意站點誘使用戶單擊他們已載入到隱藏框架或iframe中的另一個站點的隱藏元素時，會發生這種類型的攻擊。

防止點擊劫持

現代瀏覽器採用X-Frame-Options HTTP標頭，該標頭指示是否允許在框架或iframe中載入資源。如果響應包含標頭值為的標頭，SAMEORIGIN則瀏覽器將僅在請求源自同一站點時才將資源載入到框架中。如果將標頭設置為，DENY則無論哪個站點發出請求，瀏覽器都將阻止資源載入到框架中。

三、在Django 中設置

在django3.0 版本中，默認開啟點擊劫持保護。Django 提供了幾種在您的網站響應中包含此標頭的方法：

在所有響應中設置標頭的中間件。
一組視圖裝飾器，可用於覆蓋中間件或僅為某些視圖設置標頭。

如果 X-Frame-OptionsHTTP 頭尚未在響應中出現，則僅由中間件或視圖裝飾器設置。

Django默認開啟點擊劫持保護

設置X-Frame-Options為所有響應

要X-Frame-Options為您站點中的所有響應設置相同的值，請在 setting.py 中 MIDDLEWARE 輸入 ‘django.middleware.clickjacking.XFrameOptionsMiddleware’

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

在生成的設置文件中啟用了該中間件 startproject。

默認情況下，中間件將為每個outgoing 將X-Frame-Options標頭設置 DENY為HttpResponse。

1 設置允許同域名網站使用frme展示

默認情況下，中間件將為每個出站的HttpResponse將X-Frame-Options頭設置為DENY。

如果您希望此標頭的任何其他值，請設置X_FRAME_OPTIONS設置

# settings.py
X_FRAME_OPTIONS = 'SAMEORIGIN'

2 指定視圖函數不設置 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.")

3 指定視圖函數設置 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.")

Tags: django