개발하는 일상

Django로 만든 웹 페이지가 iframe에 표시되지 않는 이유(XFrameOptions 허용하기) 본문

개발 간단 팁

Django로 만든 웹 페이지가 iframe에 표시되지 않는 이유(XFrameOptions 허용하기)

롯데빙빙바 2020. 10. 11. 21:18

iframe이란?

MDN문서에서 확인할 수 있는 것 처럼, 쉽게 생각하면 웹 페이지 안에 다른 웹 페이지를 url을 통해 보여줄 수 있는 태그입니다. 아래 사진은 저번 Django로 채점 서버 만들기글에서 제가 만들었던 iframe의 사용 예시입니다. 오른쪽 프레임 안의 웹 페이지가 iframe을 통해 표시된 영역입니다.

iframe 사용예시

XFrameOptions

iframe 적용해서 XFrameOptions 확인하기

원하는 페이지를 내가 원하는 대로 내 웹 페이지에 삽입할 수 있다니, 굉장히 편리해 보입니다. 그럼 네이버 홈페이지도 iframe을 통해 삽입할 수 있는 걸까요? 한 번 아래의 코드처럼 작성해보겠습니다.

<!DOCTYPE html>
<body>
  <iframe src="https://www.naver.com"></iframe>
</body>
</html>

실행한 결과입니다.

콘솔창을 확인해보면 다음과 같은 에러가 발생하였습니다.

"X-Frame-Options라는 것이 deny로 설정되어 있기 때문에 프레임안에 네이버 화면을 띄우는 것이 거부되었다" 로 해석할 수 있겠네요. 그렇다면 X-Frame-Options라는 것을 내가 수정할 수 있는 걸까요? 아닙니다. 이 옵션은 네이버에서 설정한 것입니다. 그럼 왜 이런 옵션을 네이버에서 설정할 필요가 있었는지 살펴보겠습니다.

XFrameOptions가 존재하는 이유

누군가 내가 만든 웹 페이지를 iframe을 통해 무분별하게 자신의 서비스인 양 사용하고 있다면 어떨까요? 당연히 그런 일이 발생하지 않았으면 좋겠죠? 이런 일을 막기 위해 우리는 우리의 웹 페이지에 옵션을 설정할 수 있습니다. 이 옵션이 바로 X-Frame-Options입니다. MDN 문서 확인하기

이 옵션을 설정 하려면, 서버에서 응답 헤더에 X-Frame-Options를 아래의 값 중 하나로 설정해주면 됩니다. 사용할 수 있는 값은 세가지가 있습니다.

  • deny: 어떤 사이트의 접근도 허용하지 않습니다.
  • sameorigin: 동일한 사이트의 접근만 허용합니다.
  • allow-from https://example.com/: 해당 url에서의 요청만 허용합니다.

헤더를 설정하지 않으면, 모든 웹 사이트의 접근을 허용하게 됩니다.

Django에서 XFrameOptions 조작하기

장고에서는 기본적으로 X-Frame-Options를 설정해주는 미들웨어가 존재합니다(ver. 3.1에서 확인). settings.py의 MIDDLEWARE 변수 부분을 보시면 아래와 같이 설정되어있습니다. 이 미들웨어 설정 때문에 장고는 해당 옵션을 deny로 설정하여 응답하게 됩니다.

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', # XFrameOptions 설정 부분!
]

만약 이 옵션을 해제하고 싶다면, 맨 아래의 미들웨어 설정 부분을 지우고 서버를 돌리시면 됩니다.

 

'개발 간단 팁' 카테고리의 다른 글

프론트 프레임워크를 왜 쓸까? (React, Vue 쓰는 이유)  (2) 2020.11.16
파이썬으로 파일 수정하기(edit file with python)  (0) 2020.11.08
CORB(Cross-Origin Read Blocking)에 대하여  (0) 2020.11.06
python multiprocessing 으로 병렬 작업하기(Django 서버 동시에 여러개 켜기, run multiple Django server)  (0) 2020.10.19
파이썬으로 여러 깃헙 repo 한 번에 받기(python, github)  (0) 2020.10.04
'개발 간단 팁' Related Articles more
Comments