[備忘] summernoteで画像を添付したレコードの更新時、削除時に不要になった画像を削除する

[MITSUHIRO-KURIKI]

前提

• django_cleanup を用いて画像がモデルに紐づかなくなった際に削除が自動的に行われる

INSTALLED_APPS = [
   ****
    'django_cleanup', # ADD django-cleanup
   ****
]

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/config/settings.py#L71}

models

Attachment モデルの定義

• 実際に画像ファイルと紐づく Attachment モデルでは、画像を attachment_id で管理する(下のPOSTモデルではレコードに含まれる画像をこのidと紐付ける)

def get_attachment_image_path(instance, filename):
    return f'apps/summernote/attachment/image/{instance.pk}/{filename}'

class SummernoteAttachment(models.Model):

    attachment_id = models.UUIDField(
                    default     = uuid4().hex,)
    image_file = models.ImageField(
                    upload_to    = get_attachment_image_path,
                    blank        = True,
                    null         = True,)

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/models.py#L11}

POST モデルの定義

• 画像を attachment_id で管理
• モデル削除時に紐づいた attachment_id をもつ Attachment モデル画像を削除するように delete() をオーバーライドする

# 一括削除が行われた場合には model の delete() を通らず
# こちらの QuerySet の delete() を通る
class SampleSummernotePostQuerySet(QuerySet):
    
    def delete(self, *args, **kwargs):
        # 紐付けられた SummernoteAttachment の削除
        for self_obj in self:
            for related_object in self_obj.attachment_id.all():
                related_object.delete()
        super().delete(*args, **kwargs)

class SampleSummernotePostManager(models.Manager):
    
    def __init__(self, *args, **kwargs):
        self.query_set = SampleSummernotePostQuerySet
        super(SampleSummernotePostManager, self).__init__(*args, **kwargs)

    def get_queryset(self):
        return self.query_set(self.model)

class SampleSummernotePost(models.Model):

    post_text = models.TextField(help_text=help_text)
    attachment_id = models.ManyToManyField(
                    SummernoteAttachment,
                    related_name='related_sample_summernote_post_attachment_id',)
    
    objects = SampleSummernotePostManager()
    
    def delete(self, *args, **kwargs):
        # 紐付けられた SummernoteAttachment の削除
        for related_object in self.attachment_id.all():
            related_object.delete()
        super().delete(*args, **kwargs)

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/sample/models/SampleSummernotePost_models.py}

変換処理(POST)

POST時の処理（新規作成された際、更新された際にここを通過する）

• POST側のレコードには添付画像は src="$attachment_id" で画像の場所を管理する
• image_modify_fnc は更新時にも通過するので、更新前の attachment_ids_list を受け取り、更新後に含まれる attachment_id と比較を行う。更新後に削除された画像はその場で削除する
• Postモデルの CreateView, UpdateView 側でPostモデルとAttachment モデルを紐付けるため、Attachment モデルのobjectを返値に含める

def image_modify_fnc(html_text:str,
                     attachment_ids_list:List[str] = []) -> Tuple[str, List]:
    
    convered_text, attachment_ids = image_converter_replace_src(html_text)

    # 編集で削除された画像をモデルからも削除
    delete_attachment_ids = list(set(attachment_ids_list) - set(attachment_ids))
    SummernoteAttachment.objects.filter(attachment_id__in=delete_attachment_ids).all().delete()

    # 紐付ける レコードの object を返す
    create_attachment_model_object = SummernoteAttachment.objects.filter(attachment_id__in=attachment_ids).all()
    return convered_text, create_attachment_model_object

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/image_modify.py#L58}

def image_converter_replace_src(html_text:str) -> Tuple[str, List]:
    attachment_ids=[]
    soup = BeautifulSoup(html_text, "html.parser")
    
    for image_tag in soup.find_all("img"):

        if image_tag.get('attachment_id'):
            # Update時 attachment_id があればそのまま src に追加
            attachment_id = image_tag.get('attachment_id')
            _image_tag = copy.copy(image_tag)
            _image_tag.attrs['src'] = attachment_id
            del _image_tag.attrs['attachment_id']
            
            soup = str(soup).replace(str(image_tag),str(_image_tag))
            attachment_ids.append(attachment_id)
        
        elif not image_tag.get('src').startswith(('http://', 'https://')):
            # base64 の画像を モデルに追加
            _image_tag = copy.copy(image_tag)
            _image_tag, attachment_id = image_converter_uplode_image(_image_tag)
            
            soup = str(soup).replace(str(image_tag),str(_image_tag))
            attachment_ids.append(attachment_id)
        
        else:
            # attachment_id がなく、かつ URL の場合にはそのまま通過
            continue

def image_converter_uplode_image(image_tag:str) -> Tuple[str, str]:
    
    attachment_id = uuid4().hex
    image_b64     = image_tag.get('src').split('base64,')[1]
    image_type    = image_tag.get('src').split('data:image/')[1].split(';')[0]
    img_name      = attachment_id+'.'+image_type
    
    # base64 -> byte -> image_object
    image_byte = base64.b64decode(image_b64)
    image_obj  = ContentFile(image_byte)
    
    self_model = SummernoteAttachment.objects.create(attachment_id=attachment_id)
    self_model.image_file.save(img_name, image_obj)
    
    image_tag.attrs['src'] = self_model.attachment_id
    
    return image_tag, attachment_id

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/image_modify.py#L9}

POSTモデル側のViews

CreateView

• 新規作成の際には super().form_valid を通して実体化させてから先程の modify_fnc を通過させる
• ManyToMany フォールドへの追加は .set()

class SampleSummernotePostCreateView(CreateView):

    model = SampleSummernotePost

    def summernote_convert(self, object, form):
        # convert(modify_fnc)
        post_text, attachment_model_object = modify_fnc(object.post_text)
        # 置き換え
        object.post_text = post_text
        object.attachment_id.set(attachment_model_object)
        return form

    def form_valid(self, form):
        # self.object に save() されたオブジェクトが格納される
        valid = super().form_valid(form)
        form  = self.summernote_convert(self.object, form)
        return super().form_valid(form)

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/sample/views/sample_summernote_post_views.py#L15}

POSTモデル側のレコードは次のように変化

<img src="data:image/$image_type;base64,$image_b64">
↓ modify_fnc
<img src="$attachment_id">

変換処理(GET)

GET時の処理（POSTモデルの表示、更新時(編集画面に渡す)にここを通過する）

• 表示画面には画像をURLで返す( revert_type='id2url' )
  • URLへの変換時には Attachmentモデルを .objects.filter(attachment_id=attachment_id) せずに事前にPOSTモデルの　attachment_id.image_file.url で取得できるので attachment_ids_urls_dict を渡す方が処理が早い
• 更新画面には画像を再度base64に変換して返す( revert_type='id2base64' )

def image_revert_fnc(encoded_html_text:str,
                     revert_type:str                        = 'id2url',
                     attachment_ids_urls_dict:Dict[str,str] = {},) -> str:
    """
    ## Args: 
    ### revert_type:
      * id2url(default) => 表示画面用(attachment_id -> image file)
      * id2base64       => 編集画面用(attachment_id -> byte -> base64)
    """
    if revert_type == 'id2url':
        encoded_html_text = html_image_id2url_decoder(encoded_html_text, attachment_ids_urls_dict)
    elif revert_type == 'id2base64':
        encoded_html_text = html_image_id2base64_decoder(encoded_html_text)
    else:
        raise ValueError('revert_type must be "id2url" or "id2base64"')
    return encoded_html_text

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/image_revert.py#L54}

# Summernote 表示画面用
# attachment_id -> image file
def html_image_id2url_decoder(encoded_html_text:str,
                              attachment_ids_urls_dict:Dict[str,str]={},) -> str:
    soup = BeautifulSoup(encoded_html_text, "html.parser")
    for image_tag in soup.find_all("img"):
        _image_tag = copy.copy(image_tag)
        attachment_id = _image_tag.get('src')
        # image が URL の場合にはそのまま通過
        if not attachment_id.startswith(('http://', 'https://')):
            if not attachment_ids_urls_dict == {}:
                # 通常使用の想定ケース: こっちのほうが処理が早いはず
                _image_tag.attrs['src'] = attachment_ids_urls_dict[attachment_id]
            else:
                # attachment_ids_urls_dict が渡されなかった場合の処理
                print_color('warning(summernote.image_decoder.html_image_id2url_decoder): Processing with attachment_ids_urls_dict is preferable', 3)
                _image_tag.attrs['src'] = SummernoteAttachment.objects.filter(attachment_id=attachment_id).first().image_file.url
            soup = str(soup).replace(str(image_tag),str(_image_tag))
        else:
            continue
    return str(soup)

# Summernote 編集画面用
# attachment_id -> byte -> base64
def html_image_id2base64_decoder(encoded_html_text:str) -> str:
    soup = BeautifulSoup(encoded_html_text, "html.parser")
    for image_tag in soup.find_all("img"):
        _image_tag = copy.copy(image_tag)
        attachment_id = _image_tag.get('src')
        # image が URL の場合にはそのまま通過
        if not attachment_id.startswith(('http://', 'https://')):
            # image_object -> byte -> base64
            image_file = SummernoteAttachment.objects.filter(attachment_id=attachment_id).first().image_file
            image_type = image_file.url.split('.')[-1].lower()
            image_byte = base64.b64encode(image_file.read())
            image_b64  = image_byte.decode('utf-8')
            src        = f'data:image/{image_type};base64,{image_b64}'
            
            _image_tag.attrs['src'] = src
            _image_tag.attrs['attachment_id'] = attachment_id
            
            soup = str(soup).replace(str(image_tag),str(_image_tag))
        else:
            continue
    return str(soup)

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/image_revert.py#L10}

POSTモデル側のViews

DetailView

• 高速化のために attachment_ids_urls_dict を渡す部分がポイント

class SampleSummernotePostDetailView(DetailView):

    model = SampleSummernotePost

    def summernote_decode(self, object):
        # convert(revert_fnc: revert_type='id2url')
        attachment_ids_urls_dict = { attachment_id.attachment_id.hex: attachment_id.image_file.url for attachment_id in object.attachment_id.all() }
        decoded_text             = revert_fnc(object.post_text, 'id2url', attachment_ids_urls_dict)
        return decoded_text
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # summernote_decode(attachment_id -> image file)
        decoded_text = self.summernote_decode(self.object)
        context.update({
            'decoded_text':                 decoded_text,
        })
        return context

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/sample/views/sample_summernote_post_views.py#L51}

表示するレコードは次のように変化

<img src="$attachment_id">
↓ revert_fnc
<img src="http://****">

UpdateView

• 更新画面には revert_fnc 保存時には modify_fnc で組み合わせて処理

class SampleSummernotePostUpdateView(UpdateView):

    model = SampleSummernotePost

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # convert(revert_fnc: revert_type='id2base64')
        decoded_text = revert_fnc(self.object.post_text, 'id2base64')
        context.update({
            'decoded_text': decoded_text,
        })
        return context

    def summernote_convert(self, object, form):
        # convert(modify_fnc)
        attachment_ids_list                = [ attachment_id.attachment_id.hex for attachment_id in object.attachment_id.all() ]
        post_text, attachment_model_object = modify_fnc(self.object.post_text, attachment_ids_list)
        # 置き換え
        object.post_text = post_text
        object.attachment_id.set(attachment_model_object)
        return form

    def form_valid(self, form):
        form  = self.summernote_convert(self.object, form)
        return super().form_valid(form)

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/sample/views/sample_summernote_post_views.py#L75}

POSTモデル側のレコードは次のように変化

<img src="$attachment_id">
↓ revert_fnc (更新前)
<img src="data:image/$image_type;base64,$image_b64">
↓ modify_fnc (更新後)
<img src="$attachment_id">

ps.

GCS の署名付きURLも表示の都度取得しているので問題なく動く

end.

[MITSUHIRO-KURIKI]

実装時には以下の脆弱性対応必要あり
src=base64/https/http以外は弾けばよさそう

Hi, I have detected that a user can make an xss attack with the data he enters.

How could I solve it?

Reproduce steps

1. The user enter: <img src=x onerror=alert('XSS');>
2. When the page is loaded, we will see the alert popup.

Code

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Column, Row, Layout
from django.forms import HiddenInput
from django.utils.translation import ugettext as _
from django import forms
from django_summernote.widgets import SummernoteInplaceWidget

from myapp.models import MyModel


class MyForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(Column('title', css_class='form-group col-md-6'), css_class='form-row'),
            Row(Column('base_template', css_class='form-group col-md-12'), css_class='form-row'),
            Row(Column('base_css_template', css_class='form-group col-md-6', ), css_class='form-row'),
            'doc',
            Submit('submit', _('Save'))
        )

    class Meta:
        model = MyModel
        fields = '__all__'
        widgets = {
            'base_template': SummernoteInplaceWidget(attrs={'summernote': {'width': '100%', 'height': '600px'}}),
            'document_type': HiddenInput()
        }
        labels = {
            'title': _('Title'),
            'base_template': _('Body'),
            'base_css_template': _('CSS stylesheet (optional)'),
            'doc': _('Doc'),
        }

lqez/django-summernote#415 (comment)