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

一、背景

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

Refused to display 'http://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.")