テンプレートにaタグ・imgタグを入れて画像を表示させたい

###前提・実現したいこと
テンプレートにaタグ・imgタグを入れて画像を表示させたい。
今、aタグ・imgタグが文字列のまま表示されている。

###発生している問題・エラーメッセージ
エラーは発生していない。

###該当のソースコード
htmlに

<body>
{% for product in products.all %}
    <h4> {{ product.product_title }}</h4>
    {{ product.image }}
    <p> {{ product.body }} </p>

{% endfor %}
</body>

views.pyに

def product(request):
    products = Product.objects.order_by('product_title')
    return render(request, 'registration/product.html',{'products':products})

models.pyに

class Product(models.Model):
    product_title = models.CharField(max_length=250)
    image = models.TextField(null=True)
    body = models.TextField()

と書いた。adminサイトからimageカラムに

<a href="https://xxxxxxxxxxx" target="_blank" rel="nofollow">
<img border="0" width="120" height="60" alt="" src="https://wwwyyyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwwzzzzzzzzzzzzzzz" alt="">

を入力したが、このaタグ・imgタグは {{ product.image }} の部分でhtmlで文字列として表示されてしまった。
###試したこと
aタグ・imgタグを何も書いていないhtmlに貼り付けブラウザで表示させるとちゃんと画像として表示された。

行動規範の内容に同意します

回答1件

ベストアンサー

DjangoではXSS脆弱性への対応のため、テンプレートでの変数の出力は通常時は自動でエスケープ処理が行われます。

危険性がないと開発者が保証できるのであれば、その部分だけエスケープ処理を無効化させることは可能です。
下記のいづれかとすることで対応できるかと思います。

<body>
{% for product in products.all %}
    <h4> {{ product.product_title }}</h4>
    {{ product.image|safe }}
    <p> {{ product.body }} </p>

{% endfor %}
</body>

<body>
{% for product in products.all %}
    <h4> {{ product.product_title }}</h4>
    {% autoescape off %}
    {{ product.image }}
    {% endautoescape %}
    <p> {{ product.body }} </p>

{% endfor %}
</body>

投稿2017/10/11 14:03