如何使用Flask为文本添加链接并实现带链接的flash消息

Flask默认对Jinja2模板输出的内容做HTML转义，直接往flash()里塞<a>标签会被转成纯文本显示，按以下步骤处理即可实现可点击链接效果：

• 后端视图层：使用Flask内置的Markup类将带链接的消息标记为安全HTML，避免被模板转义。如果链接是站内地址，优先用url_for()生成路径，避免硬编码出错。
  示例代码：

  from flask import flash, url_for, Markup
  
  @app.route('/form-submit', methods=['POST'])
  def form_submit():
      # 省略表单校验、数据存储等业务逻辑
      # 拼接带链接的提示消息
      tip = Markup(f'提交成功！<a href="{url_for("detail")}">点此查看提交详情</a>')
      flash(tip, category='success')
      return redirect(url_for('index'))
  

• 模板层：渲染flash消息时正常输出即可，不需要额外加转义过滤器。
  模板示例：

  {% with flash_list = get_flashed_messages(with_categories=True) %}
    {% if flash_list %}
      <div class="flash-wrap">
        {% for cate, message in flash_list %}
          <div class="alert alert-{{ cate }}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}
  

注意：Markup会直接把内容作为可信HTML渲染，绝对不要把未经过滤的用户提交内容直接传入，避免触发XSS漏洞。如果消息中需要包含用户输入的内容，先用flask.escape()对用户输入部分做转义后再拼接。

如果不想在后端拼接HTML字符串，可以用前端JS动态生成链接，实现前后端逻辑解耦：

• 后端flash普通文本，用约定好的特殊标记区分链接文本和链接地址，比如：

  flash('提交成功！||查看详情||/detail/123', category='success')
  

• 前端页面加载完成后，遍历所有flash提示框，匹配特殊标记替换为a标签即可：

  document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(function(alert) {
      const content = alert.textContent;
      const match = content.match(/(.*?)\|\|(.*?)\|\|(\S+)/);
      if (match) {
        const [, prefix, linkText, linkPath] = match;
        alert.innerHTML = `${prefix}<a href="${linkPath}" class="alert-link">${linkText}</a>`;
      }
    })
  })
  

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