其实是去年做的事情了，现在想起来做一个记录。

背景

小程序可以使用 webview 组件来嵌入 web 内容，对于常规域名需要通过域名所有权认证，对于微信公众号文章需要发布公众号与小程序关联，这在部分情况下是无法实现的（显示非自有公众号文章）。

所以，我们需要一个中间人来帮我们实现这个功能。

实现思路

当然就是实现一个反向代理了，能够反代 mp.weixin.qq.com 的内容。

实现方法

因为需求比较简单，还不至于到写代码的地步，用 nginx 实现就好。

server
 {
 server_name mp-proxy.example.com;
 
 # listen block

 location /
 {
 proxy_pass https://mp.weixin.qq.com/;
 }
 }

然后访问一下就会有靓仔发现，我这个图片怎么显示不出来呢。

通过 network 可以看到图片请求由于 cors 限制导致失败，但是为什么普通的 GET 请求会被 cors 限制呢？

通过 initiator 观察可以看到请求是为了实现懒加载由 script 动态插入的 <img> 标签发出的。那么问题就来了，为什么这个 <img> 需要 cors 检查？

这里就需要一些简单的前端知识，mdn，在跨域条件下，默认 <img> 加载的图片资源会被认为是 tainted 的，除非为 <img> 加上 crossorigin 属性，会在请求中要求 cors 检查，并在浏览器进行 cors 校验。

在公众号文章场景下，并不存在需要 canvas 的场景，所以我们可以将 crossorigin 属性移除，以此来绕开 cors 限制。这里可以通过在 source 中搜索，将所有 crossOrigin 搜索出来，进行替换（主要就是几处 js）。

然后将 html js link 指向 nginx，在 nginx 对 js 内容进行替换，顺便去掉所有的 referrer。

注意如果需要替换内容，需要禁止 gzip 等压缩，否则内容无法被替换。

最终实现

server
 {
 server_name mp-proxy.weshine.club;
 include weshine.ssl;

 location /s/
 {
 add_header Referrer-Policy no-referrer;
 sub_filter 'origin-when-cross-origin' 'no-referrer';
 sub_filter 'strict-origin-when-cross-origin' 'no-referrer';
 sub_filter 'crossorigin="anonymous"' '';
 sub_filter 'res.wx.qq.com/mmbizappmsg/zh_CN/htmledition/js/assets/weui' mp-proxy.weshine.club/ass/weui;
 sub_filter 'res.wx.qq.com/mmbizappmsg/zh_CN/htmledition/js/assets/appmsg.' mp-proxy.weshine.club/ass/appmsg.;
 proxy_set_header Accept-Encoding '';
 proxy_pass https://mp.weixin.qq.com/s/;
 }
 location /mp/
 {
 proxy_pass https://mp.weixin.qq.com/mp/;
 }

 location /ass
 {
 sub_filter 's.setAttribute("crossOrigin","Anonymous")' '1';
 sub_filter 'e.crossOrigin="anonymous"' '1';
 sub_filter 't.crossOrigin="anonymous"' '1';
 sub_filter_types 'application/x-javascript';
 sub_filter_once off;
 proxy_set_header Accept-Encoding '';
 proxy_pass https://res.wx.qq.com/mmbizappmsg/zh_CN/htmledition/js/assets;
 proxy_buffering on;
 proxy_cache mp_proxy;
 proxy_cache_valid 200 1d;
 }
 }