django3整合django-mdeditor報 ‘X-Frame-Options‘ 錯誤

輕程式設計發表於2020-12-25
Django

背景

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

Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'deny'根據提示資訊發現是因為X-Frame-Options=deny導致的。

X-Frame-Options是什麼?

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

語法:

X-Frame-Options 有三個值：

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

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

功能：

  1. 點選劫持保護

clickjacking中介軟體和裝飾器提供了易於使用的保護，以防止clickjacking。

當惡意站點誘使使用者單擊他們已載入到隱藏框架或iframe中的另一個站點的隱藏元素時，會發生這種型別的攻擊。

  • 點選劫持的例子 假設線上商店有一個頁面，已登入的使用者可以在該頁面上單擊“立即購買”來購買商品。為了方便起見，使用者選擇一直保持登入狀態。攻擊者站點可能會在自己的一個頁面上建立一個“我喜歡小馬”按鈕，然後將商店的頁面載入到透明的iframe中，從而使“立即購買”按鈕以不可見的方式覆蓋在“我喜歡小馬”按鈕上。如果使用者訪問攻擊者的網站，則單擊“我喜歡小馬”會導致無意間單擊“立即購買”按鈕，並且在不知情的情況下購買了該物品。

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

django中設定X-Frame-Options

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

  1. 在所有響應中設定標頭的中介軟體。

  2. 一組檢視裝飾器，可用於覆蓋中介軟體或僅為某些檢視設定標頭。

如果X-Frame-OptionsHTTP頭尚未在響應中出現，則僅由中介軟體或檢視裝飾器設定。

django預設開啟點選劫持保護

  • 設定X-Frame-Options為所有響應開啟點選劫持保護，請在setting.py中MIDDLEWARE輸入：
MIDDLEWARE = [
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]

django3.0 預設已經開啟該中介軟體！

預設情況下，中介軟體將為每個outgoing 將X-Frame-Options標頭設定 DENY為HttpResponse。

設定允許同域名網站使用frame展示，在專案的settings中配置X_FRAME_OPTIONS設定：

X_FRAME_OPTIONS = 'SAMEORIGIN'

基本上django安裝django-mdeditor上傳成功但編輯器前端無法顯示正確的url，報如標題所示錯誤，設定這個基本可以解決，如果還不能解決，那麼，最直接簡單粗暴的做法就是把這個中介軟體註釋掉，這個是以犧牲安全性為代價，不過個人後臺的話，我覺得無所謂！

指定檢視函式不設定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.")

指定檢視函式設定X-Frame-Options

Django提供了以下裝飾器：

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.")
  • 註解

如果要提交表單或訪問框架或iframe中的會話cookie，則可能需要修改CSRF_COOKIE_SAMESITE或 SESSION_COOKIE_SAMESITE設定。 解決方法

X_FRAME_OPTIONS = 'SAMEORIGIN'

參考網址：

  1. django官方文件

  2. lotdoc

相關文章