如何防止Gmail修改HTML邮件图片URL？Django邮件问题

安全阿岳

2026-6-21

问题

使用Django开发活动管理门户，用户注册后发送含页眉图片的确认邮件，但Gmail接收时图片URL被篡改导致无法正常渲染。

相关代码

def view_registration_form(request, event_id, event_name):
    event = get_object_or_404(Event, id=event_id, name=event_name)
    form_template = get_object_or_404(FormTemplate, event=event)

    view_only = 'view' in request.path

    if request.method == 'POST' and not view_only:
        response_data = {field.label: request.POST.get(f'field-{field.id}', '') for field in form_template.fields.all()}
        email = next((value for key, value in response_data.items() if '@' in value), None)
        # Save the form response
        print(email)
        FormResponse.objects.create(form=form_template, email=email, response_data=response_data)

        # Send confirmation email using the event's email configuration
        email_config = EmailNotification.objects.filter(event=event, email_type='confirmation').first()
        if email_config and email:
            ngrok_url = 'https://######.ngrok-free.app'  # Replace with your ngrok URL
            masthead_url = f"{ngrok_url}{email_config.masthead.url}"
            html_message = f"""
                <html>
                    <head>
                        <style>
                            .email-masthead img {{
                                width: 100%;
                                height: auto;
                            }}
                            .email-footer {{
                                margin-top: 20px;
                                font-size: 0.9em;
                                color: #555;
                            }}
                        </style>
                    </head>
                    <body>
                        <div class="email-masthead">
                            <img src="{masthead_url}" alt="Email Masthead">
                        </div>
                        <div class="email-body">
                            {email_config.message}
                        </div>
                        <div class="email-footer">
                            {email_config.footer}
                        </div>
                    </body>
                </html>
            """
            print(html_message)  
            send_mail(
                email_config.subject,
                email_config.message,
                'from@example.com',  
                [email],
                fail_silently=False,
                html_message=html_message
            )

        return JsonResponse({'status': 'success', 'message': 'Thank you for registering!'})

    fields = [{
        'id': field.id,
        'label': field.label,
        'field_type': field.field_type,
        'required': field.required,
        'properties': field.properties,
        'options': field.properties.get('options', []) if field.field_type in ['select', 'choice'] else None,
    } for field in form_template.fields.all()]

    context = {
        'event': event,
        'form_template': form_template,
        'fields': fields,
        'view_only': view_only,
    }
    return render(request, 'main/view_registration_form.html', context)

Gmail中收到的篡改后URL

<img src="https://ci3.googleusercontent.com/meips/ADKq_NbcRVtKX8-MU89n76291vvMOgc0-_OZNXq11ShmRpXV8rhSgqmfS-RQbZyl9dYGE1JdpPAVi53QGZ3qs3xaq9e9g52ESafSbgZwFfb_k1TexoAJjgoXW-pXuoJ_H8QeiToEMQwviLadIC9n7_oPbJePcHTQPvTNS_RJl7xqBeeIcvkO9o5_3EU1-Lf0ttswGRuxMh9GzFd9w452ZfXOiWaDjQ=s0-d-e1-ft#https://########.ngrok-free.app/media/email_mastheads/fcac3fdb-af68-4dcb-9f1a-84d0b4ed86d5_2087ZhZ.jpeg" alt="Email Masthead">

期望的URL格式

<img src="https://##########.ngrok-free.app/media/email_mastheads/fcac3fdb-af68-4dcb-9f1a-84d0b4ed86d5_2087ZhZ.jpeg" alt="Email Masthead">

解决方案与最佳实践

一、解决Gmail URL篡改问题的直接方法

嵌入图片为内联附件
Gmail重写外部图片URL是出于安全校验，规避该问题的核心方案是将图片作为内联附件嵌入邮件，而非引用外部链接。在Django中可通过EmailMessage类实现：

from django.core.mail import EmailMessage
from django.core.files.storage import default_storage

# 替换原send_mail逻辑
if email_config and email:
    # 读取图片文件
    with default_storage.open(email_config.masthead.name, 'rb') as img_file:
        img_data = img_file.read()
        img_name = email_config.masthead.name.split('/')[-1]

    html_message = """
        <html>
            <head>
                <style>
                    .email-masthead img {{
                        width: 100%;
                        height: auto;
                    }}
                    .email-footer {{
                        margin-top: 20px;
                        font-size: 0.9em;
                        color: #555;
                    }}
                </style>
            </head>
            <body>
                <div class="email-masthead">
                    <img src="cid:masthead_image" alt="Email Masthead">
                </div>
                <div class="email-body">
                    {message}
                </div>
                <div class="email-footer">
                    {footer}
                </div>
            </body>
        </html>
    """.format(message=email_config.message, footer=email_config.footer)

    email_msg = EmailMessage(
        subject=email_config.subject,
        body=email_config.message,
        from_email='from@example.com',
        to=[email]
    )
    email_msg.content_subtype = 'html'
    # 添加内联附件，cid需与html中的src对应
    email_msg.attach(img_name, img_data, email_config.masthead.content_type)
    email_msg.attachments[0].add_header('Content-ID', '<masthead_image>')
    email_msg.send(fail_silently=False)

该方式将图片直接包含在邮件内，无需依赖外部链接，Gmail不会篡改cid引用的图片地址。

优化外部URL配置
若坚持使用外部URL，需确保：
- 图片URL为公开可访问状态，无防盗链、IP限制（ngrok临时URL需确保在有效期内）
- 邮件头部添加合规字段（如List-Unsubscribe），降低被标记为垃圾邮件的概率
- 使用稳定域名的绝对HTTPS地址，避免短链接或动态临时URL

二、HTML邮件嵌入图片的最佳实践

优先内联嵌入固定图片：页眉、Logo等固定元素用内联附件，不受外部链接失效或客户端拦截影响
使用完整绝对URL：必须用外部URL时，使用完整HTTPS地址，避免相对路径，同时确保服务器允许邮件客户端抓取图片
强制添加alt文本：所有图片设置清晰的alt文本，图片无法加载时可传递信息，也符合无障碍要求
控制图片体积：图片大小尽量控制在100KB以内，用压缩工具优化质量，避免邮件体积过大被拦截
避免CSS背景图：多数邮件客户端（包括Gmail）不支持CSS背景图，直接用<img>标签更可靠
多客户端兼容性测试：不同客户端对HTML解析差异大，需在Gmail、Outlook、Apple Mail等主流客户端中验证效果

内容的提问来源于stack exchange，提问作者taha khamis

如何防止Gmail修改HTML邮件图片URL？Django邮件问题

问题 #

相关代码 #

Gmail中收到的篡改后URL #

期望的URL格式 #

解决方案与最佳实践 #

一、解决Gmail URL篡改问题的直接方法 #

二、HTML邮件嵌入图片的最佳实践 #