利用 Cloudflare Access - 打造个人私密站点最近在白嫖云上搭建了一些小的服务，为了方便使用，这些服务一 - 掘金
同步来源：树洞剪藏 源站剪藏 ID：287 原文地址：https://juejin.cn/post/7219490209716551739?searchId=202412090850499617D0D11E0CB7C50F31
利用 Cloudflare Access - 打造个人私密站点最近在白嫖云上搭建了一些小的服务，为了方便使用，这些服务一 - 掘金 set 限制解除
首页
BOT
沸点
课程
直播
活动 AI刷题 NEW 商城 APP 插件
创作者中心
会员
登录
注册
利用 Cloudflare Access - 打造个人私密站点
嘿嘿不务正业
2023-04-08
1,301
阅读4分钟
专栏：
工欲善其事
最近在白嫖云上搭建了一些小的服务，为了方便使用，这些服务一般会提供 WebUI，然而我并不想让其他人能够使用这些搭建在公网上的个人工具站点。之前也讲到我的白嫖云上的服务都是挂在 Cloudflare 上这样可以很好的隐藏机器的真实 IP 并屏蔽未知的流量，所以想看看 Cloudflare 有没有这样的服务：在进入我的站点前拦截请求并要求进行验证，验证通过后再放行。只能说 Cloudflare 从不让人失望 ，产品力太强了，果然有提供类似的功能，并且比我预想的还要完善，就是 Cloudflare Access。
使用
要使用 Access 功能，我们需要先从侧边栏进入 Zero Trust：
然后从 Zero Trust 的侧边栏进入 Access -> Application：
然后点击 Add an application：
此时可以选择类型，由于我的是用于拦截 Cloudflare 中的 Proxy 站点，所以我直接选择 Self-hosted，Sass 类型主要针对的是一些 Sass 服务和内网，并没有研究这里不多说。
选择好类型后我们需要输入对应的配置，包括程序的名称、session 的失效时长、域名地址、自定义 Logo 的地址以及认证方式。
此处的域名地址支持子域名、主域名和路径，比如我要拦截到 access.heyfe.org 请求就可以将子域名配置为 access，主域名选择 heyfe.org，然后路径留空即可。
至于认证方式默认情况下只有 One-time PIN 这一种，如果需要更多的认证方式可以到 Setting -> Authentication -> Login methods 中添加：
具体的添加不细说，点击选择后 Cloudflare 会有详细的指引，基本就是 OAuth 接入流程，但是 Cloudflare 会提供认证回调服务，所以不需要自己搭建任何服务。
当前面的配置都填写完成后点击下一步便会进入具体的规则配置页面：
此处我们需要先为策略起一个名字并选择策略的类型是 Allow 还是 Block，还有 Session 的过期时间。
策略类型 Allow 可以理解为白名单，即符合该策略规则的用户可以通过，而 Block 则为黑名单规则相反，此外还有 Bypass 和 Service Auth。
一般而言此处回选择 Allow， Session 则保持默认即可。然后便可以配置具体的规则：
此处可以配置多条匹配规则，且规则类型可以是 include、exclude 和 require，然后规则匹配可以使用邮箱、邮箱后缀、IP 范围、国家、认证方式等等。基本可以满足绝大多数可以想到的需求。
此处以邮箱为例，可以通过邮箱匹配可以通过的邮箱账户。这里有一个需要注意的地方， 录入的邮箱必须是小写字母 ，其实绝大多数的邮箱认证匹配等都会将邮箱转换为小写，因为我的 Gmail 注册的时候有使用大写字母，所以习惯使用大写，然后这里第一次认证发现没通过。
除了这些基础配置外，Access 还提供了一些进阶配置，可以配置临时认证、申请等功能。
在完成上述配置后，点击下一步 Access 还提供了跨域、Cookie 等配置，一般情况下无需修改：
当一切都配置完成后，就可以点击 Add Application 按钮创建了，创建完成后再次打开页面可以看到页面被拦截了进入了 Access 认证页面：
当你输入邮箱后 Cloudflare 会给你的邮箱发送一份认证邮件，可以使用邮件中的 Code 进行登陆，也可以直接点击邮箱中的快速认证链接。认证完成后，如果你有权限访问站点，就会进入原始站点，如果没有的话则会展示拦截页面。
如果觉得认证页面和拦截页面不太好看，也可以进入 setting -> General 中进行自定义，不过要注意，只能修改有限的文字、Icon 和背景色等。
价格
忘记说了，上面的功能基本上可以认为是完全免费的：
最后
用 Cloudflare 也有好多年了，不得不说， Cloudflare 基本能够实现我想象的所有功能，基本算是唯一一个让我完全没有槽点的产品，只能说真的太强了。对于个人开发者而言，提供的所有功能基本都可以免费用到，香是真的香。
本文正在参加 「金石计划」
标签： 前端 掘金·金石计划
本文收录于以下专栏
工欲善其事
专栏目录
必先利其器
1 订阅 · 13 篇文章 订阅
上一篇
crontab
下一篇
VSCode JS Debug Terminal - Node 调试利器，前端、Node 开发必备
评论 0
0 / 1000
标点符号、链接等不计算在有效字数内
Ctrl + Enter
发送
登录 / 注册 即可发布评论！
暂无评论数据
嘿嘿不务正业
首席大魔王 @海拉鲁大陆
榜上有名
优秀作者
113
文章
280k
阅读
373
粉丝
关注
已关注
私信
目录
收起
使用
价格
最后
精选内容
🤔uniapp 小程序如何实现中英文人声朗读功能？
oil欧哟
· 12阅读 · 2点赞 栗子前端技术周刊第 59 期 - React19、Astro 5.0、Vue 2025 状态调查...
晓得迷路了
· 25阅读 · 0点赞 优化永不止步：TinyVue v3.20.0 正式发布，更美观的官网UI，更友好的文档搜索，更强大的主题配置能力~
Kagol
· 83阅读 · 2点赞 切图多年，结果自己“被切”走了（一 ）
前端切圖仔
· 41阅读 · 1点赞 Hello，Three.js | 快速开始
不惑_
· 4阅读 · 1点赞
找对属于你的技术圈子 回复「进群」加入官方微信群
为你推荐
利用Cloudflare轻松搭建免费个人网站
cortxu
10月前
2.0k
1
评论
前端
【体验报告】Serverless 技术初体验，使用Cloudflare Pages开发了一个免费开源的自建图床程序，无需服务器，支持图片管理，兼容 picgo
用户1405142835055
1年前
915
2
评论
Serverless
如何利用服务器源IP绕过Cloudflare WAF
黑夜BUG多
5年前
1.1k
点赞
评论
免费 CDN 加速你的个人网站
可乐罐头
1年前
193
1
评论
前端
开源
性能优化
使用Astro+Vercel+Cloudflare一天时间开发部署上线一个知识博客网站
程序猿代码之路
4月前
155
1
评论
前端
实现Writerside文档到Cloudflare Pages的自动部署
知北游丶
5月前
1.0k
2
评论
GitHub
使用免费的 Cloudflare Workers 搭建 Serverless 站点计数服务
Willin老王带你躺平养老
2年前
692
2
评论
架构
Backblaze + Cloudflare + Picgo 打造免费顺畅的图床体验
cos
1年前
4.5k
13
5
前端
后端
使用vitepress和cloudflare部署个人博客
橙红年代
7月前
2.2k
9
评论
VitePress
Vue.js
服务器
手把手实现 Github 代理加速
一键霜寒十四州
2年前
722
点赞
评论
GitHub
开源
OpenSNN推文：个人博客汇总
OpenSNN开思通智网
4月前
20
点赞
评论
前端
后端
Backblaze云存储+Cloudflare搭建高速安全的免费图床
晚阳Crown
1年前
1.1k
5
评论
前端
Microsoft Edge 新增内置 VPN 功能
战场小包
2年前
2.9k
点赞
评论
资讯
建站操作--使用CDN加速（网站访问加速，使用CloudFlare具体操作方法及相关的基础知识）（CDN加速及原理，NS记录，TTL）
JanInz
1年前
250
点赞
评论
CDN
免费！如何用Cloudflare轻松搭建Uptime-Flare监控服务！实时掌握网站状况！
AM科技
4天前
13
1
评论
数据可视化
运维
APP内打开
登录掘金领取礼包
更多登录后权益等你解锁 登录 / 注册
沉浸阅读