Cloudflare从入门到精通 8. 使用Access实现网页访问控制

📜 前言

当我们把网站放到公网后，如果某些页面不想让用户访问怎么办呢？例如使用Wordpress开发的网站都会带一个后台管理界面，可以通过https://yourdomain.com/wp-admin 登录，有没有办法只有特定的人才能访问这个URL，其他人都不允许访问？Cloudflare Access了解一下。

Access可以通过定制化的规则 + 灵活的鉴权方式，实现不同用户对不同网页的访问控制

🧾 教程

步骤一：找到Acces入口

进入到 Cloudflare 的后台，选择最左侧的 Zero Trust

进入到 zero trust 的管理界面后, 选择 Access –> Applications

步骤二：设置访问权限

进入到 Applications页面后，我们点击左上角 Add an application 我们进入到下面的页面，我们选择 Self-hosted , 其他选项我没使用过，感兴趣的朋友可以试试

选择后我们会进入到应用配置界面，下面我以我的自部署wallos应用为例，给大家做演示如何配置。必填项我都框出来了，其他选择默认选项即可。

Application name (应用名)：wallos
Session Duration: 表示规则生效持续时长，最高支持1个月
Application domain: 需要保护的应用域名，必须是托管在Cloudflare上的域名（可以看到是拉下菜单选项）
Path: 你想要具体生效的URL，这里我只想让部分用户访问我的注册和登录页

点击 Next 后我们进入规则设置界面，必填项我也框选出来了

Policy name: 规则名称
Action: 要执行的操作。有 Allow, Block, Bypass, Service Auth 四个选项
Session Duration: 表示规则生效持续时长，最高支持1个月
Configure rules: 跟其他 Rules 的设置很类似
- Selector: 匹配的属性。可选项非常多，目前支持：ip范围，邮箱，邮箱结尾，国家等
- Value: 属性具体的值

这里我设置一条规则： Email --> xxx@outlook.com (图片上没展示不影响理解)

设置完后直接点 Next，Setup部分可以不管直接点 Apply。

翻译一下刚刚操作的意思：

只有 xxx@outlook.com 用户才能访问我的 wallos-test.debill.cc/registration.php 和 wallos-test.debill.cc/login.php 页面

步骤三：验证设置是否生效

我们访问刚刚设置的URL，就会出现下面的页面，你要输入邮箱获取登录链接才能访问页面，因为我设置了只有我的邮箱才能接受到Cloudflare的邮件，所以即便你输入了其他邮箱，你既收不到邮件也不会报错 （啥问题你猜去吧)。

这样我们的设置就生效了，当相同的客户端（你用手机访问需要再鉴权）再次访问该页面就直接跳转，无需再次通过邮件鉴权，下次鉴权是一个月后（因为我们设置了一个月）

🪪 Service Auth

在配置规则的地方有一个 Service Auth的选项，这里展开讲讲，配置这个选项允许你携带token访问Access保护的应用。

考虑一个常见的场景：

某个应用的URL被Access保护了（例如：wallos.debill.cc/login.php），同时我又有一个监控应用定期往这个URL发送请求来监控这个应用是否在线。如果直接往这个URL发送请求获取到的都是Access返回的响应，无法知道wallos是否在线，携带Service Auth配置的token信息就可以很好解决这个问题

配置

进入 Zero Trust -> Access -> Service auth 界面，点击 Create Service Token

设置一下token名称和过期时长，最低一年最长可以用不过期

点击 Generate token 之后，Cloudflare 会生成 client ID 和 client secret，client secret要记住后面有用, 点击 Save 就生效了

设置规则

我们回到Application的设置界面，刚刚设置了一条规则，我们再加一条规则

让携带 service token的请求都通过。Selector选择 Service Token value选择刚刚给token的命名，这样就设置完成了。

验证是否生效

我们用API测试工具测试一下，请求Header中不携带client ID 和 client secret 返回的是Cloudflare的鉴权页面

携带client ID 和 client secret后便能返回我们的网页

🕳️ 避坑指南

当你网站使用前端路由（如 React Router 或 Vue Router）进行跳转时，浏览器不会向服务器发送新的请求，因此 Cloudflare Access 无法在这一过程中进行身份验证。

例如你希望用户可以访问yourdomain.site但是不能访问yourdomain.site/console，你在Access设置了访问yourdomain.site/console要进行身份验证，但因为你的应用使用了前端路由，页面直接通过前端进行跳转的，没有给Cloudflare的边缘节点发送请求，所以该设置不会生效

如果你要使用 Cloudflare Access，注意你的网站是不是SPA（Single page application）

📝 总结

对带后台访问地址的网站，通过 Access 既提高了网站的安全性，不担心爬虫或者黑客去爆破你的后台，又可以享受公网访问后台的便利性。

需要注意⚠️ 你的网站如果是SPA（Single page application）用前端路由切换页面时，因为你访问页面URL时不经过Cloudflare进行代理，Access会失效。

网站想要Access进行访问控制必须满足以下几点：

1️⃣ 域名托管在 Cloudflare上

2️⃣ 配置Access访问规则

3️⃣ 不是前端路由