突破微信二次分享JS接口安全域名限制5个的方法

mingxuanju

已于 2024-11-13 15:48:49 修改

阅读量536

点赞数 3

分类专栏：微信分享文章标签：微信经验分享

于 2024-04-08 14:55:33 首次发布

本文链接：https://blog.youkuaiyun.com/mingxuanju/article/details/137505372

版权

微信分享专栏收录该内容

1 篇文章

订阅专栏

本人在实际工作中遇到通过手机浏览器访问一新闻网站，通过手机浏览器转发到微信平台，然后在微信中打开后再进行分享（微信分享二次），需求是需要二次分享的链接要显示自定义的logo。网上教程有很多，请自行解决。本文介绍的问题是如何突破微信公众号后台JS接口安全域名限制的问题。

由于需要二次分享的网站涉及多个二级子域名，但是微信公众号后台只能提供5个域名，并且尝试过填写根域名abc.com，但是实际并不能使*.abc.com这种子域名生效。于是想到通过一个代理域名转发的方式来实现。

1.新建一个用于转发分享的域名如 share.abc.com，并配置在微信公众号的设置与开发-公众号设置-功能设置-JS接口安全域名中（占用一个安全域名名额）

2.新建一个代理转发服务器或者配置在原网站页面服务器，nginx编译时需增加 --with-http_sub_module模块，如果网站路径匹配比较复杂，可以使用支持正则的第三方模块，如

ngx_http_substitutions_filter_module。

nginx转发代码如下：

location /finance/ {
        subs_filter (/channel-home/ (/finance/channel-home/;
        subs_filter ="/channel-home/ ="/finance/channel-home/;
        subs_filter src="/console/js/share.js src="/finance/console/js/share.js;
        proxy_set_header Host finance.abc.com;
        proxy_set_header Referer http://finance.abc.com;   
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Accept-Encoding "";
        proxy_pass http://finance.abc.com/;
    }

上面代码以finance（财经）频道为例，将访问http://finance.abc.com/network/finance/....转发成

http://share.abc.com/finance/network/finance...

3.在页面里增加一段script代码用于判断（也可将此代码放到用于实现分享效果的js文件中），判断通过手机访问abc.com页面的，都跳转为share.abc.com,可以把此段代码编写到页面模板中，之后新发布的文章页面就会加入此代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change URL</title>
    <script>
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1,
                    presto: u.indexOf('Presto') > -1,
                    webKit: u.indexOf('AppleWebKit') > -1,
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
                    iPhone: u.indexOf('iPhone') > -1,
                    iPad: u.indexOf('iPad') > -1,
                    webApp: u.indexOf('Safari') == -1,
                    weixin: u.indexOf('MicroMessenger') > -1,
                    qq: u.match(/sQQ/i) == " qq"
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }

        if(browser.versions.mobile||browser.versions.android||browser.versions.ios) {
            if (window.location.host != "share.abc.com") {
                var hostlist = window.location.host.split(".");
                var domain = hostlist[0]
                
                var uri = window.location.href.replace("http://" + window.location.host, '');

                var shareUrl = "http://share.abc.com/" + domain + uri;

                window.location.href = shareUrl;
            }
        }
    </script>
</head>
<body>

</body>
</html>

4.测试使用pc模式打开域名不变，使用手机端打开跳转http://share.abc.com...链接。通过此链接的微信二次分享由于设置了js安全域名，所以可以正常显示分享logo。