Strapi的Media Library图片无法正常显示问题

在Strapi后台进行媒体库的文件管理时，默认是能够看到图片的预览图的，但是我这里一直都是破图，起初以为是CDN访问限制，配了域名Refer白名单仍旧提示错误，受不了了，这个问题一定要解决！

特别注意，这种问题只存在于第三方Provider服务，如果用内置的服务，图片会存在Strapi的服务器上。

这里涉及到网络安全问题，也是Strapi的默认安全策略做了限制。其实跟CDN无关，而是服务端的配置需要进行调整。默认情况下，服务端的配置在中间件（ config/middlewares.js ）中修改，而其中需要特别关注的选项就是 Content-Security-Policy 的配置，默认是 false 。

我正好看到一个Issue：[v4] Media Library shows broken images instead of the good one，也是关于这个的。于是调整了 contentSecurityPolicy 配置，然而并未能完全起作用，不过面板上的错误信息有所调整。变成了403，这下就是CDN的那边返回的错误了。

此时根据自己的CDN安全策略对应调整即可，我这里通过检查分析网络请求的 RequestHeaders 和 ResponseHeaders ，查出来原因是 Referer 字段不对。不过Strapi文档中并未把所有配置显示，于是需要查阅helmetjs，最终找到了 referrerPolicy 配置，进行调整，再次刷新页面，一切正常了。

完整的 middleware.js 如下：

module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    /**
     * 媒体库上传图片无法显示问题
     * https://github.com/strapi/strapi/issues/12595
     * https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#security
     * 官方配置不全面，更多配置需要参考：https://helmetjs.github.io/
     */
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'img-src': ["'self'", 'data:', 'blob:', 'https://statics.whidy.net/'],
          'media-src': ["'self'", 'data:', 'blob:', 'https://statics.whidy.net/'],
          upgradeInsecureRequests: null,
        },
      },
      referrerPolicy: {
        policy: ["origin"],
      }
    },
  },
];

因为我这里只用到了图片，故而实际上只需简单配置 img-src 即可。代码中的注释部分，也可参阅一下。

另外补充，非常推荐一款Chrome插件，叫做ModHeader，非常适合测试需要来临时修改请求头等功能。