爱客仕-前端团队博客园

Surge for Mac 2 初体验与教程

使用Surge for Mac已有两周,今日写下一路以来的感受,并给后来的小伙伴填坑铺路。如果想看Surge for iOS教程,请继续Google,本人认为iOS下用小火箭足以。需要强调的是,Surge只是一款网络工具,支持多种网络协议,但本身并不提供出墙功能,需要自己搞定ss账号,可以直接从ss提供商购买,或是自己购买VPS搭建ss服务。

先放大招:

[前端攻城狮]可能是使用Mac Surge性价比最高的职业!

为什么?
因为前端攻城狮:懂编程,懂正则,要抓包,爱折腾,更需要科学上网!

早就听闻Surge的大名,由于其高昂的价格,一直将其拒之门外。直到看到池大大这篇文章 Surge for Mac 快捷如风,我动心了。于是第二天在公司里众筹买了Mega License,当天也是各种忙,到了周末在家一顿鼓捣。

Google了一晚上,找到的文章,大部分讲的是Surge for iOS或者Surge for mac 1.x,我看的莫名其妙。其中几篇提供了配置文件模板,但大都讲的不清不楚。
当天晚上我是一头雾水,困觉去了。真是应了其中一篇文章所说,Surge的使用,确实需要门槛。

第二天不死心,继续折腾,回顾了所有看过的文章,并结合我当前的Surge版本的面貌,终于成功折腾出了一个能科学上网的ss配置。随后就一发不可收,哇擦咧,此乃神器也!

接下来进入正题。官方称Surge是一款网络调试工具,而大部分人用它当梯子,两者都没错。

  • 梯子:于我而言,当今前端界,风起云涌,新技术层出不穷,不用Google怎能张罗的过来?而对于互联网工作者,则同样需要更广阔的资源。在此之前一直用小灰机, 但它的配置文件维护起来略微力不从心。蓝灯?算了。。。
  • 网络调试工具:作为移动端开发者,抓包调接口是家常便饭,而对于移动web开发者则更加有意义。因为我们可以通过设置客户端代理,将静态资源代理到本地,调试线上应用,内个feel倍儿爽~如果是调试单页应用,就更省心了。

接下来,我们一个个搞定。

梯子

这个算是刚需。

  1. 打开Surge
  2. 首次打开,会让我们选择配置文件存储位置,推荐选择『Store in User Documents』,Surge会在文稿目录下创建带有示例配置的Surge目录。选择存储在 iCloud Drive 似乎是个更好的方案,但是 Surge 并没有成功创建文件目录,不知道是否是软件的 bug(摘自上面那篇文章,我自己也是在这里卡了好一会儿)。
  3. 点开状态栏上的Surge菜单,选择『Set as System Proxy』,顾名思义Surge成为系统代理,几乎所有http(s)请求都会被拦截,但shell的网络请求并不会被拦截(下文再说如何让shell也出墙)
  4. 翻山越岭我最终选择了AbcLite的这个配置作为基础,进行定制。 已上传至 github
    复制其内容并保存到~/Documents/Surge目录下,比如my-surge.conf.重点来了,请看:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    [Proxy]
    🇭🇰 HK = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
    🇸🇬 SG = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
    🇯🇵 JP = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
    🇺🇸 US = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
    🇰🇷 KR = custom,${ss-server host},${ss-server port},${ss encrypt type},${ss-password},https://github.com/stoneChen/Surge-config/raw/master/SSEncrypt.module
    [Proxy Group]
    Proxy = select,🇭🇰 HK,🇸🇬 SG,🇯🇵 JP,🇺🇸 US,🇰🇷 KR

    [Proxy]是具体的代理配置,它下面就是5个ss服务器节点, 这里只是5个国家例子,根据你拥有的ss账号数来决定,拥有几个账号就留下其中几个对应国旗配置就好。表面上看就是5个键值对(键可以自定义),键中加上国旗可以很直观的区分不同国家的ss节点,值中的变量分别表示:

    • ss-server host: ss主机,ip或域名
    • ss-server port: ss主机端口
    • ss encrypt type: 加密方式
    • ss-password: ss密码

    custom不能改,是一个约定类型(ss协议),最末一项是ss模块下载地址,也不需要改,当选择了当前配置所在的配置文件,Surge会去下载ss模块,有弹窗提示。
    [Proxy Group]是一个组策略配置,它的某一项配置可以引用[Proxy]中的配置,也可以引用其他的组策略配置。这里有select, url-test, ssid三种策略可以用,具体请阅读example-chinese.conf中的注释。
    简单讲:

    • select:在菜单上手动选择ss节点
    • url-test:定时轮询向指定的地址发起请求,哪个节点响应时间最短,则切换到哪个ss节点
    • ssid: 根据wifi名字进行切换ss节点

    ss配置完毕后,保存。然后点击状态栏中的Surge,选择 Switch Configuration , 右侧会出现~/Documents/Surge下的配置文件列表,选择刚刚的my-surge.conf.
    上个图:

    然后就是见证奇迹的时刻~
    打开浏览器: http://www.google.cn/ 肥车~
    外面的世界很精彩~

使用Surge Dashboard


左上角有四个tab:

  • Recent: 最近的网络请求
  • Active: 未完成的网络请求
  • DNS: DNS解析记录
  • Proxy: GUI方式的规则配置

左边Local Clients是发出请求的应用列表,点击相应的应用,右侧会过滤掉其他应用发出的请求.点击表格区的某一条请求记录,底部会显示这条请求的详细信息。

右上角分别是偏好设置,保存,关键字过滤.
这算是体现了Surge的网络调试功能了。

网络规则设置

有5种匹配规则:

  • DOMAIN: 基于域名
  • DOMAIN-SUFFIX: 基于域名后缀
  • DOMAIN-KEYWORD: 基于域名关键字
  • IP-CIDR: 基于”无类别域间路由”,具体我也不懂啥意思,大概就是基于IP段
  • GEOIP: 表示IP所属区域,有CN(中国),US(美国)等值

匹配规则后,可以对匹配的请求作出三种处理

  • DIRECT
  • REJECT
  • ${某个自定义策略}

举个栗子:

  • DOMAIN-SUFFIX, *.google.com,Proxy # 所有以google.com结尾的请求,都走Proxy代理
  • DOMAIN,xyz.cn,DIRECT # xyz.cn的请求,都走直连
  • DOMAIN-KEYWORD, advertise,REJECT # 所有域名中带advertise的请求,都拒绝
  • IP-CIDR,61.160.200.252/32,REJECT # 屏蔽61.160.200.252这个ip
  • GEOIP,CN,DIRECT # 国内IP都走直连

广告屏蔽

这个是Surge的特色之一,只要匹配规则,就可以直接拒绝网络请求,从而阻止广告。
基于上面的例子,我们继续扩展:

1
2
3
4
DOMAIN-KEYWORD, advertise,REJECT
DOMAIN-SUFFIX,stat.tudou.com,REJECT
DOMAIN-SUFFIX,stat.youku.com,REJECT
DOMAIN-SUFFIX,strip.taobaocdn.com,REJECT

看懂了么?偷偷告诉你,视频广告也可以屏蔽奥~(亲测youku,tudou有效)
如果在以后的上网过程中,你遇到了『漏网』的广告,打开你的Surge配置文件,添加相应的配置,就可以干掉它了,世界就变得清静多了。

让shell也能出墙

默认情况下,shell不会被代理,我们需要设置shell环境变量,将代理服务指向Surge的端口。
将以下代码复制到~/.zshrc的底部

1
2
3
4
proxy=http://127.0.0.1:6152
export http_proxy=$proxy
export https_proxy=$proxy
export ftp_proxy=$proxy

什么?你还没有用oh-my-zsh? 我不跟你玩了。

代理转发网络请求

这个功能,基于URL Rewrite配置实现,简单讲,就是写正则。举个栗子:

1
2
[URL Rewrite]
^http://a.net/m/(.*) http://b.net:9999/m/$1

意思就是,所有以http://a.net/m/开头的url全部代理到http://b.net:9999/m/下(注意中间的空格)。
用代码解释就是:

1
2
let regStr = new RegExp('^http://a.net/m/(.*)')
let proxyUrl = url.replace(regStr, 'http://b.net:9999/m/$1')

当有请求匹配该规则,就会被代理转发,在Surge Dashboard上会看到代理后的记录.

规则可以设置多条。

这样写,默认是header模式,客户端不会感知到当前请求被代理了。上面配置的等价写法是:

1
^http://a.net/m/(.*) http://b.net:9999/m/$1 header

还有一种模式是302重定向,客户端是可感知的,302模式这样写:

1
^http://aaa.com http://bbb.cn 302

这样http://aaa.com就被重定向到http://bbb.cn了。

如此一来,只要你正则玩的溜,各种代理转发随你翻转~
有时候,通过域名规则过滤广告太暴力,有时候只是想屏蔽指定域名下个别请求,那么URL Rewrite就能实现,针对不想看到的东西,撸一个正则,转发到不可响应的地址即可(比如loclahost)。

连接移动设备代理转发请求

用过charles的童鞋会知道, 它也是一种网络调试工具,我们平常用的最多的就是代理静态资源。
其实单单对网络调试而言,charles足够了。但自从有了Surge,科学上网+网络调试就可以合体了~

起初,我并不确定Surge支持这样的功能,但理论上应该是支持的,于是按照我自己的想法,像使用charles一样使用Surge:

打开手机设置,将代理指向Surge默认的6152端口,然后用微信随意打开一张网页,发现迟迟加载不出来,我瞬间懵逼了。。。
Surge你作为一款所谓的 神器,这点功能都不支持吗?!

我不甘心,于是上知乎,开了个问题,咨询Surge作者。令我惊喜的是,作者当天下午就回复我了,详见 surge for MAC 不支持 像Charles那样的http代理吗?

原来答案如此简单,想想自己本该想到的囧。然后兴奋的把监听ip设置为0.0.0.0,手机连上代理,打开网页,搞定!再一看Dashboard,有记录了!

现在,连接上Surge代理,就能够查看手机上的请求和响应数据包了!那如何实现url代理转发呢?其实就是上一小节中的URL Rewrite,这些规则配置适用于所有被Surge接管的请求。

如此一来,charles最常用的功能,Surge也具备了,一般情况下就不需要开启charles去调试移动设备的开发了,完美!

Host设置

这个配置不仅包含了本机的/etc/hosts功能,而且还提供了 泛解析别名 支持,相当好用。
举个栗子:

1
2
3
4
5
6
[Host]
# 这个是泛解析,a.test.com b.test.com 等通通指向 192.168.1.100
*.test.com = 192.168.1.100
# 这个是别名设置,c.me d.me 等通通指向localhost
*.me = localhost

与1password的冲突

最近,一个小伙伴发现,开启了Surge后,1password就无法正常工作了,问了下我的情况。我当天一切正常,谁知第二天我也出现了同样的问题,网页上按填充快捷键无反应,点击chrome插件,出现了这个:

该小伙伴翻山越岭,最终的解决方案是,将配置文件中的skip-proxy添加127.0.0.1这条记录就好了,上述的配置文件已经解决了这个问题。

小结

Surge无疑是很强大的,称之为『神器』不为过,其价格导致很多人望而却步,但长久来看,我觉得它还是值得入手的。目前我只发掘了这么多用法,还没有充分发挥。其实Surge for mac是由Surge for iOS发展而来,但我毕竟平时工作大都在mac上,手机上大多时间都在微信上,对于我个人来说,用在mac上意义更大。于是我在手机上选择了Shadowrocket这个后起之秀,只要6RMB,性价比高的多,而且可复用Surge配置文件。

注意:规则配置过多会导致响应变慢,请定制最适合自己的配置~

PS:小灰机并没有被我彻底抛弃,它的『从屏幕上扫描二维码』功能倒是给了我一个小小的惊喜- -