尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

WEB网站安全漏洞问题 跨域资源共享 基于GO语言和VUE的整改

WEB网站安全漏洞问题 跨域资源共享 基于GO语言和VUE的整改 跨域资源共享CORS漏洞Any origin is accepted我们需要在 Go 后端服务中严格限制允许的源仅放行您自己的前端域名例如 Vue 应用部署的域名。下面是基于 GoGin 框架和 Vue 的详细整改方案。一、漏洞根本原因当前后端响应头中包含了Access-Control-Allow-Origin: *或直接反射了请求头中的Origin值导致任意网站都可以跨域请求您的接口可能造成敏感数据被窃取或 CSRF 攻击。二、整改目标只允许明确配置的白名单域名进行跨域访问。对于不在白名单中的域名不返回Access-Control-Allow-Origin头并拒绝预检请求。禁止使用null或*作为允许的源。三、Go 后端整改以 Gin 框架为例1. 定义白名单将允许的源配置在环境变量或配置文件中例如// config.go package config import os var AllowedOrigins []string{ https://your-frontend-domain.com, // 你的生产前端域名 https://test-frontend-domain.com, // 测试环境如有 http://localhost:8080, // 本地开发酌情保留 }2. 编写 CORS 中间件创建一个中间件对每个请求的Origin头进行校验只对白名单内的源返回 CORS 头。// middleware/cors.go package middleware import ( net/http strings github.com/gin-gonic/gin your-project/config ) func CORSMiddleware() gin.HandlerFunc { return func(c *gin.Context) { origin : c.Request.Header.Get(Origin) if origin { // 同源请求无需处理 c.Next() return } // 检查是否在白名单中 allowed : false for _, allowedOrigin : range config.AllowedOrigins { if strings.EqualFold(origin, allowedOrigin) { allowed true break } } if allowed { // 设置具体的源不要用 * c.Header(Access-Control-Allow-Origin, origin) c.Header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS, PATCH) c.Header(Access-Control-Allow-Headers, Origin, Content-Type, Accept, Authorization, X-Requested-With) c.Header(Access-Control-Expose-Headers, Content-Length, Content-Disposition) c.Header(Access-Control-Allow-Credentials, true) // 如需携带 cookie // 预检缓存 12 小时 c.Header(Access-Control-Max-Age, 43200) } else { // 非白名单不设置 CORS 头并中止请求可选 // 对于预检请求直接返回 403 if c.Request.Method http.MethodOptions { c.AbortWithStatus(http.StatusForbidden) return } // 对于实际请求不添加任何 CORS 头让浏览器拦截 } // 处理预检请求 if c.Request.Method http.MethodOptions { c.AbortWithStatus(http.StatusNoContent) // 204 return } c.Next() } }3. 注册中间件在路由初始化时使用该中间件// main.go 或 router.go package main import ( github.com/gin-gonic/gin your-project/middleware ) func main() { r : gin.Default() r.Use(middleware.CORSMiddleware()) // 全局使用 // 或只对特定路由组使用 // api : r.Group(/api) // api.Use(middleware.CORSMiddleware()) // ... 其他路由 r.Run(:8080) }4. 如果使用标准库net/http可以编写一个包装函数在Handler中处理func corsWrapper(next http.Handler) http.Handler { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { origin : r.Header.Get(Origin) if origin ! isAllowed(origin) { w.Header().Set(Access-Control-Allow-Origin, origin) // 设置其他头... } if r.Method http.MethodOptions { w.WriteHeader(http.StatusNoContent) return } next.ServeHTTP(w, r) }) }四、Vue 前端整改前端本身不需要修改但需确认以下几点确保请求不发送不必要的凭证如果接口不需要携带 cookie不要在请求中设置withCredentials: true以免因 CORS 配置中的Access-Control-Allow-Credentials要求而产生额外限制。开发环境代理在 Vue 开发时可使用vue.config.js配置代理避免跨域问题这样生产环境只开放正式域名。// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://backend-dev-domain, changeOrigin: true, // 代理会绕过浏览器CORS不影响生产 } } } };验证生产环境确保前端请求的Origin是您配置的白名单域名。五、验证整改是否生效使用 curl 测试curl -H Origin: https://malicious-site.com -I https://your-domain.com/api/xxx检查返回头中是否有Access-Control-Allow-Origin若没有则说明拦截成功。浏览器开发者工具在控制台中尝试从非白名单域名请求您的接口查看是否被浏览器拦截状态码 403 或没有 CORS 头。使用在线 CORS 检测工具如 https://cors-test.codehappy.tech/进行测试。六、补充建议动态白名单管理将白名单存入数据库或配置中心方便运维调整。日志监控记录被拒绝的 Origin 请求方便发现异常访问。API 密钥/Token除了 CORS还应配合身份认证JWT、OAuth2增强安全性。测试环境测试环境可放宽限制但应通过环境变量区分避免泄露到生产。通过以上整改您的 Go 后端将只响应白名单域名的跨域请求彻底修复“任意源接受”的漏洞。如果有多个前端应用只需将它们的域名加入白名单即可。
返回列表