Flask框架下博客无法渲染视频与图片、HTML脚本直接显示的问题求助

你的问题核心是Jinja2模板默认的HTML转义机制在起作用——这是Flask为了防止XSS攻击默认开启的安全保护，但它把你文章里的<video>、<img>等标签转成了纯文本，导致浏览器无法解析成对应的媒体内容。下面是具体的解决步骤：

1. 让模板渲染HTML内容：使用safe过滤器 #

Flask的模板引擎会自动转义所有变量中的HTML字符，所以你需要明确告诉它「这段内容是安全的，可以直接渲染」。修改你的home.html中的文章内容渲染行：

原代码问题点： #

你原来的代码里多了不必要的<和>包裹，而且没加安全过滤器：

<div class="article-content"><{{ post.content }}></div>

修改后的代码： #

<div class="article-content">{{ post.content|safe }}</div>

这里的|safe过滤器是关键，它会关闭对post.content的HTML转义，让浏览器直接解析其中的标签。

2. 务必处理安全风险！ #

直接使用safe过滤器虽然能解决渲染问题，但如果你的博客允许普通用户发布文章，会存在XSS攻击的风险（恶意用户可能注入窃取信息的脚本）。所以必须对用户提交的HTML内容做过滤，只保留安全的标签和属性。

推荐使用bleach库来清理内容，步骤如下：

1. 先安装bleach：

pip install bleach

2. 在保存文章的视图函数中，添加过滤逻辑：

import bleach

# 定义允许的安全标签和对应的属性
ALLOWED_TAGS = ['p', 'img', 'video', 'source', 'h2', 'h3', 'a', 'br']
ALLOWED_ATTRS = {
    'img': ['src', 'alt', 'width'],
    'video': ['src', 'controls', 'width', 'height'],
    'source': ['src', 'type'],
    'a': ['href', 'target']
}

# 假设你有一个处理发布文章的视图函数
def create_post():
    if request.method == 'POST':
        # 获取用户提交的内容
        raw_content = request.form.get('content')
        # 清理内容，只保留允许的标签和属性
        cleaned_content = bleach.clean(raw_content, tags=ALLOWED_TAGS, attributes=ALLOWED_ATTRS)
        # 创建Post对象时使用清理后的内容
        new_post = Post(title=request.form.get('title'), content=cleaned_content, author=current_user)
        db.session.add(new_post)
        db.session.commit()
        # 后续逻辑...

这样既保留了渲染图片、视频的功能，又能阻止恶意脚本的注入。

3. 验证效果 #

修改模板并添加安全过滤后，重新启动你的Flask应用，发布包含视频或图片HTML代码的文章，应该就能正常渲染媒体内容了——比如你插入的<video src="your-video.mp4" controls></video>会变成可播放的视频播放器，<img src="your-image.jpg">会直接显示图片。

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