适配Flask应用中Matplotlib图表的安全Content-Security-Policy设置问询

原因分析 #

Matplotlib动态生成的图表如果是通过data:image/png;base64,...这类Data URI直接嵌入页面的，img-src 'self'的CSP规则仅允许加载同域下的静态图片资源，并不包含Data URI格式的内联图片，因此会被浏览器安全策略拦截。

可行的CSP配置方案 #

根据你的图表生成方式，选择以下适配方案：

1. 允许Data URI加载图片（推荐） #

如果图表是通过base64编码的Data URI嵌入页面，修改CSP的img-src规则，添加data:即可：

response.headers['Content-Security-Policy'] = "img-src 'self' data:"

这种配置既保留了同域资源的安全限制，又兼容动态生成的base64格式图表。

2. 允许内联图片（安全性较低，不推荐） #

若图表是通过内联脚本直接生成的，可临时添加'unsafe-inline'到img-src规则：

response.headers['Content-Security-Policy'] = "img-src 'self' 'unsafe-inline'"

注意：'unsafe-inline'会削弱CSP的安全防护能力，仅在无其他替代方案时使用。

3. 静态文件加载方案（最安全） #

将Matplotlib生成的图表保存到Flask的静态目录，通过同域URL加载，此时img-src 'self'规则完全适用。示例代码：

import matplotlib.pyplot as plt
import os
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def show_chart():
    # 生成图表
    plt.plot([1,2,3], [4,5,1])
    # 保存到静态目录
    chart_path = os.path.join(app.static_folder, 'images', 'chart.png')
    plt.savefig(chart_path)
    plt.close()
    # 传递静态资源URL到模板
    return render_template('chart.html', chart_url='/static/images/chart.png')

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