Chapter 7-3 Django Summernote iframe 메시 구성와 'codeview' 설정의 의의

🌟 Summernote iframe 메시 구성와 'codeview' 설정의 의의

---

✅ 목표

• Django 프로젝트에서 Summernote 에디터 설정 시, iframe 모드와 codeview 기능의 동작 차이를 이해하고 적절히 제어하는 방법을 설명합니다.

---

⚙️ 1. settings.py 내 Summernote 설정

# settings.py

SUMMERNOTE_CONFIG = {
    'iframe': True,

    'summernote': {
        'width': '100%',
        'height': '480',

        'toolbar': [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']],
        ],

        'lang': 'ko-KR',

        'codemirror': {
            'mode': 'htmlmixed',
            'lineNumbers': 'true',
            'theme': 'monokai',
        },
    },

    'attachment_require_authentication': True,
    'disable_attachment': False,
    'attachment_absolute_uri': True,
}

 

<script>alert('hi')</script>

 

터미널에서 직접수정 

python manage.py shell_plus

blog = Blog.objects.get(id=100) # 블로그게시물번호
blog.content # 찍어보고 거기서 수정할부분만 복사하기
blog.content= 작성내용
blog.save()  # 변경된사항 저장

 

bleach를 사용하여서 방지 

# 요용한 패키지 python bleach 건색후 mozilla/bleach github저장소
pip install bleach

import bleach
bleach.clean(tags=ALLOWED_TAGS,attribute=ATTRIBUTES) # 허용된것과 허용되지않은것 정의할수있음 https://github.com/lqez/django-summernote/blob/main/django_summernote/settings.py#L106-L133
ALLOWED_TAGS = [
    'a', 'div', 'p', 'span', 'img', 'em', 'i', 'li', 'ol', 'ul', 'strong', 'br',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'table', 'tbody', 'thead', 'tr', 'td',
    'abbr', 'acronym', 'b', 'blockquote', 'code', 'strike', 'u', 'sup', 'sub',
]

STYLES = [
    'background-color', 'font-size', 'line-height', 'color', 'font-family'
]

ATTRIBUTES = {
    '*': ['style', 'align', 'title', ],
    'a': ['href', ],
}

---

🔍 2. 주요 설정 항목 설명

🔸 iframe: True

• 기본값은 False입니다. iframe을 True로 설정하면 에디터가 외부 프레임으로 분리되어 표시됩니다.
• iframe 모드에서는 CSS, JS 충돌이 적고 더 안전한 방식으로 렌더링됩니다.
• 하지만 iframe 내부는 독립된 DOM이라서 외부 스타일이나 스크립트를 적용하기 어렵습니다.

✅ iframe 사용 추천 상황:

• Summernote가 이미 복잡한 Bootstrap 페이지와 충돌할 때
• 외부 JS 또는 CSS 간섭을 차단하고 싶은 경우

---

🔸 'toolbar' 옵션

• 에디터에 표시할 기능 버튼을 지정합니다.
• 위 설정은 다음과 같은 도구들을 사용자에게 제공합니다:

카테고리 기능 예시

style	스타일 변경 (제목, 본문 등)
font	굵게, 밑줄, 초기화
fontname	폰트 이름 선택
color	글자 색상
para	리스트 및 문단 정렬
table	표 생성
insert	링크, 이미지 삽입
view	전체화면, 코드 보기, 도움말

---

⚠️ codeview 기능의 주의점

• codeview는 HTML 코드 전체를 수정할 수 있는 기능입니다.
• 보안상 문제 혹은 비기술 사용자에 대한 제어가 필요할 경우 비활성화하는 것이 권장됩니다.

❌ 코드 보기 제거 예시

['view', ['fullscreen', 'help']]  # ✅ codeview 제거됨

• codeview가 빠지면 사용자가 HTML을 직접 편집할 수 없게 됩니다.
• HTML 조작이 필요한 경우에만 이 기능을 활성화하세요.

---

✅ 실무 팁

목적 설정 방법

에디터가 CSS, JS 충돌 없이 동작하도록	'iframe': True 설정
사용자가 HTML 편집 못 하게 막기	'codeview' 제거
관리자만 HTML 편집 가능하도록 제어	사용자 권한 체크 후 toolbar 분기 적용

---

✍️ 마무리 요약

• iframe 설정은 프레임 분리를 통한 안전한 렌더링
• codeview 옵션은 사용자가 HTML을 직접 수정할 수 있는 위험한 기능
• 실무에서는 iframe: True, codeview 제거가 일반 사용자 편집 환경에서 안정적입니다.

필요하다면 사용자 role에 따라 동적으로 툴바를 설정하는 예제도 추가해드릴게요.