Wagtail 6.1.4 管理画面で iframe を安全に利用する方法

Wagtail（バージョン6.1.4）で管理画面のカスタムUIに地図や外部HTMLを埋め込みたい場合、iframeを使うのが最も安全かつ確実な方法です。本記事では、Django/Wagtailプロジェクトでiframeを活用するためのノウハウをまとめます。
1. 基本方針
  • iframeのsrcは絶対パスで指定する
  • 高さ・幅を明示的に指定する
  • 埋め込むViewには @xframe_options_exempt デコレーターを付与する
  • WagtailのHelpPanelやカスタムパネルでiframeを使う
2. コード例
2.1. Viewの実装 
from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt
from django.contrib.admin.views.decorators import staff_member_required
from django.shortcuts import get_object_or_404
from .models import Municipality
from .utils import generate_municipality_map_html
@xframe_options_exempt
@staff_member_required
def municipality_map_preview(request, pk):
municipality = get_object_or_404(Municipality, pk=pk)
html_content = generate_municipality_map_html(municipality)
return HttpResponse(html_content, content_type="text/html")
2.2. URLパターンの追加 
from django.urls import path
from . import views
urlpatterns = [
path('cgo/preview/<int:pk>/', views.municipality_map_preview, name='municipality_map_preview'),
]
2.3. Wagtail管理画面テンプレートでのiframe埋め込み 
{% if self.instance %}
<h3>地図プレビュー</h3>
<iframe src="/cgo/preview/{{ self.instance.id }}/" width="100%" height="400"></iframe>
<p><a href="/cgo/preview/{{ self.instance.id }}/" target="blank">地図を新しいタブで開く</a></p>
{% endif %}
3. 注意点
  • iframe内のViewには@xframe_options_exemptが必須（これがないとX-Frame-Optionsでブロックされる）
  • iframeの高さ・幅は明示的に指定する（width="100%" height="400"など）
  • 埋め込むHTMLはできるだけシンプルにし、管理画面のCSSと競合しないようにする
  • Wagtailの管理画面カスタムパネル（HelpPanel等）でiframeを使うのは公式でも一般的な手法
4. 参考文献
5. まとめ

Wagtail管理画面でiframeを使う場合は、

  • @xframe_options_exemptをViewに付与
  • テンプレートで上記のようにiframeを埋め込む

この2点を守れば、地図や外部HTMLのプレビューを安全に実現できます。