前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AXAJ跨域

AXAJ跨域

作者头像
晚上没宵夜
发布2020-03-10 10:50:34
4210
发布2020-03-10 10:50:34
举报
文章被收录于专栏:Howl同学的学习笔记

1. 什么是跨域

发起请求的url中协议、域名、端口号三者任意一个与当前页面url中的不同就是跨域,跨域针对的是AJAX,即跨域问题限制了AJAX访问不同域时的操作

2. 是谁限制了AJAX

为了用户的安全性,是浏览器的同源策略限制了AJAX操作,同源策略分为:

DOM 同源策略:不同域之间不能操作DOM对象

XMLHttpRequest 同源策略:不同域之间不能操作Cookie

假如没有浏览器的同源策略:

一个钓鱼网站用了<frame>标签把登录QQ邮箱的网页嵌套进来,那么当用户来到此钓鱼网站时输入密码账号登录时是真的能登录成功并操作的,但此时钓鱼网站也能获取到用户密码(DOM不同源)

用户登录了QQ邮箱其Cookie存在了本地,当其访问钓鱼网站并带上该Cookie时,钓鱼网站就能获取到Cookie,利用Cookie来伪造登录(XMLHttpRequest 不同源),而从实现CSRF攻击

3. 如何解决跨域问题

使用CORS方法来解决跨域问题,也可以使用Nginx(这里不做说明),CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制,注意:需要浏览器和服务器的支持,现在市面上的浏览器都支持CORS,并且是后台自动使用,是感觉不到的。跨域请求可以分为简单请求和非简单请求

3.1. 简单请求

简单请求需要在下面的条件内

代码语言:javascript
复制
请求方法:HEAD、GET、POST

请求头信息:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

基本流程

  • 发起简单跨域请求后,浏览器会在头部增加一个字段:Origin: http://www.howl.com
  • 服务器接收到请求后,判断是否在许可范围内。若在,则服务器的回应会添加多几个字段Access-Control-Allow-OriginAccess-Control-Allow-CredentialsAccess-Control-Expose-Headers,分别表示服务可接收的跨域地址,是否允许发送Cookie,是否允许添加额外请求头。若不在,服务器正常响应,但是没有上述的响应头,从而报错

3.2 非简单请求

非简单请求是对服务器有特殊要求的请求,比如请求方法是PUT或DELETE。非简单请求会在请求之前发送预检请求(OPTIONS,询问是否支持本次操作),只有服务器支持本次请求AJAX才会才会继续请求,否则报错。一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

3.3 后端服务器

只需配置个全局Filter即可

代码语言:javascript
复制
@WebFilter(filterName="OriginFilter",urlPatterns="/*")
public class FilterTest implements Filter {

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        
        // 存放许可的地址
        TreeSet originSet = new TreeSet();
        originSet.add("www.howl.com");
        
        // 存放许可的请求头
        TreeSet headersSet = new TreeSet();
        headersSet.add("X-howl-Header,X-howlet-Header");
        
        // 强转增强功能
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;
        
        // 获取跨域请求地址
        String origin = req.getHeader("Origin");
        
        // 若在许可范围内
        if(originSet.contains(origin)){
            res.addHeader("Access-Control-Allow-Origin", origin);
            res.addHeader("Access-Control-Allow-Credentials", "true");
        }
        
        // 获取非简单请求的头
        String headers = req.getHeader("Access-Control-Request-Headers");
        
        // 若在许可范围内
        String[] arr = headers.split(",");
        for(String value : arr){
            if(!headersSet.contains(value.toUpperCase())){
                break;
            }
            res.addHeader("Access-Control-Allow-Headers", headers); 
        }

        // 预检许可的方法
        res.addHeader("Access-Control-Allow-Methods", "*");
        
        //表示放行
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-02-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2. 是谁限制了AJAX
  • 3. 如何解决跨域问题
    • 3.1. 简单请求
      • 3.2 非简单请求
        • 3.3 后端服务器
        相关产品与服务
        云服务器
        云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档