签证
签证/vit·ɛdʒ/)是HMR和OIDC用于本地开发的Vite插件
会话饼干生命周期语义.
开始
从 npm 安装 Visage :
npm install @blakearoberts/visage@next
将插件添加到 vite.config.ts数字 :
import { defineConfig } from 'vite';
import visage from '@blakearoberts/visage';
export default defineConfig({
plugins: [visage()],
});
正常启动 Vite :
vite
默认情况下,您可以在 https://localhost:9001你会是
重新定向到 Dex 注册 。 默认用户名和密码是
[email protected] 财务报告和审定财务报表 pass。 。 。 .
为什么是Visage
Visage是一个本地开发工具,用于运行在网络应用程序后面 认证保护的边缘, 浏览器会话由安全的 cookie 代表 由 OIDC 符号支持.
Visage缩小了本地开发、自动化测试和 将类似生产的会议周期语义带入当地 Vite 在不放弃HMR的情况下发展。 这样就可以在安全部门改革上提法 身份注入、会话超时恢复、锁屏和认证 API电话.
Visage也可以使用主机IDP,所以本地前端代码可以调用主机后端 具有真实资格的API. 这样可以避免只使用前端的 Auth 模拟或只使用后端 本地绕道:代码可以被写作制作,仍然在当地工作.
系统块图
flowchart LR
browser([Browser])
vite([Vite])
upstreams([Upstreams])
subgraph docker[Docker]
nginx[NGINX]
services([Services])
Oauth2-Proxy
idp(["IdP (Dex)"])
nginx -.-> idp
nginx -.-> Oauth2-Proxy -.-> idp
nginx --> services
end
browser --> nginx
nginx --> vite
nginx ---> upstreams
配置
Visage 通过配置 visage(options?) 内 vite.config.ts。 。 。 .
高层 host 财务报告和审定财务报表 port 配置本地 Visge 源代码
浏览器访问 :
visage({ host: 'localhost', port: 9001 });
服务
服务是多克编译服务,由Vite dev-server生命周期管理.
服务在应用程序主机上自动创建上游位置 /{name}
visage 在向服务主机代理请求之前删除它.
visage({
services: { whoami: { image: 'traefik/whoami' } },
});
服务网络
每个服务都加入自己的私人多克网络. NGINX 加入个人
上游服务网络。 允许直接服务
连接, 在每个服务中添加相同的网络名称 networks 列表中选择一个选项.
visage({
services: {
api: { image: 'example/api' },
res: { image: 'mysql', upstream: false, networks: ['api'] },
},
});
远程
远程是上游的,没有Visage管理的多克集装箱流程。 远程
在后面的应用程序主机上自动创建上游位置 /{name}
visage 在向上游主机代理请求之前删除它.
visage({
remotes: {
api: { host: 'api.remote.test' },
},
});
服务和远程地点不默认转发无记名符号. 设定
auth.forward 改为 true 向上游转发默认的无记名符号
类型:远程接收 OAuth 访问符,而服务接收 OIDC ID
符号 .
主机后端的验证持卡人认证的 API 一般应当接收
只要是给API的发行人、观众和
瞄准镜。 使用 'access' 或者说 'id' 当你需要强迫一种特定的标志.
visage({
remotes: {
api: {
host: 'api.remote.test',
auth: { forward: true },
},
},
});
OAuth2 证书 代理服务器也可以返回 X-Auth-Request-Groups 财务报告和审定财务报表
X-Auth-Request-Preferred-Username但Visage不捕捉或转发它们
自动。 根据需要获取和转发可选身份值:
visage({
remotes: {
api: {
directives: {
auth_request_set: [
'$auth_groups $upstream_http_x_auth_request_groups',
'$auth_preferred_username $upstream_http_x_auth_request_preferred_username',
],
},
headers: {
'X-Auth-Request-Groups': '$auth_groups',
'X-Auth-Request-Preferred-Username': '$auth_preferred_username',
},
},
},
});
经认证的地点还默认会获得CSRF的检查. 设定 csrf: false 何时
上游故意处理跨站点浏览器请求本身。 见
CSRF 政策。 。 。 .
外部 IdPs 软件
默认的 IdP, Dex 可以替换为外部的 OIDC 提供者 :
visage({
idp: { issuer: 'https://idp.example.test/oauth2/default' },
});
配置 authorization, (中文(简体) ), token,或 jwks 仅在提供者端点时
必须明确表示,而不是从发行人那里发现。 配置
end_session_endpoint 当提供者支持 OIDC 结束会话重定向时.
身份提供者的主要认可和配置
OAuth2 代理接受任何由该发行商声称的非空邮件. 管理
德克丝, idp.users 是完整的合格用户列表。 与外部IPP,它的
客户登记和申请分配政策必须确保每个身份
为 Visage 客户端获取 OIDC 响应的
本地应用程序; Visage 不应用额外的电子邮件域允许列表 .
遥测
设定 telemetry 以便收集、编辑和导出遥测信号
通过OTLP/gRPC.
-
当启用时, Visage 配置 :
- (一) NGINX出口进入收集器;
- OAuth2 代理Prometheus 度量衡听取器被收集器刮去;
- 向收集者发送 stdout/stder的服务容器;
- 接收经认证的OTLP/HTTP信号的收集器
/t/。 。 。 .
-
收集器输出OTLP到
host.docker.internal:4317默认 遥测示例 演示如何配置 Grafana作为Visage公司管理着接收和观看遥测的服务.
见 VisageOptions 整个选项表面.
所需工具
- 夹克 随作曲 v2
通过下列方式提供支助:
docker compose。 。 。 . mkcert安装于PATH,或配置为VISAGE_MKCERT=/path/to/mkcert。 。 。 .
管理多克图像
Visage根据配置需要拉出这些:
| 服务 | 图像 |
|---|---|
| 纳吉林克斯 | visage-nginx |
| OAuth2 代理服务器 | quay.io/oauth2-proxy/oauth2-proxy |
| 德克斯语Name | ghcr.io/dexidp/dex |
| 打开数位收集器 | otel/opentelemetry-collector-contrib |
| 小猫 | alpine/socat |
Visage默认使用的图像标签由显示文件定义, docker-compaces.images.yml 页面存档备份,存于互联网档案馆。 。 。 .
安全说明
Visage是地方开发工具。 它启动了本地认证基础设施, 终止本地 HTTPS, 并将认证身份或符号材料转发给 上游配置 .
请通过 GitHub 私人弱点报告疑似弱点 报告说明 安全政策。 。 。 .
不将管理中的 Dex 和 OAuth2 代理默认作为生产认证处理 基础设施.
Visage的CSRF政策是CSRF对饼干后置位置的边缘控制.
普通同源SPA变异不需要CSRF令牌
根据这项政策。 当一个位置禁用时, App 级的符号可能仍然有用
边框策略,有意接受跨站点浏览器请求,或需要
符号编码额外的授权语义 。 萨赫勒农药委员会, frame-ancestors, (中文(简体) ),
其他点击劫持控制仍然是应用政策.
解决问题
- 如果启动立即失败, 请确认 Docker 正在运行
docker compose工作时. - 如果 NGINX 无法启动, 请检查是否配置
port已经使用. - 如果主机名无法解决, Visage 可能需要权限更新
/etc/hosts。 。 。 .