微信小程序嵌入任意公众号文章

最后编辑时间: 2024-03-01

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

背景

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

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

实现思路

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

实现方法

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

server
{
server_name mp-proxy.example.com;

# listen block

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

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

通过 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;
}
}

这样就完工了。当然还有部分优化点,比如部分 js 文件过大,可以只留下需要的 js,其他的内容全部 302 出去。这里就不展开了。

请在下方留下您的评论.加入TG吹水群