您的位置:首页 > 其它

CORS 关于跨域问题的一些了解

2018-02-02 10:51 344 查看

Cross-origin resource sharing

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源-浏览器同源政策及其规避方法使用的限制。

所谓”同源”指的是”三个相同 协议相同 域名相同 端口相同,同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。随着互联网的发展,”同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制(1) Cookie、LocalStorage 和 IndexDB 无法读取。(2) DOM 无法获得。(3) AJAX 请求不能发送。

跨域资源共享 CORS 详解,这里解释得非常的清楚,阮一峰大神写的,非常的简单明了

什么是JS跨域访问?-知乎话题

前端常见跨域解决方案(全)

CORS开发标准讲解

查找相关问题时一个博客写的两个问题比较的不错

参考-SpringMVC解决跨域问题

1. 为什么在浏览器地址栏输入URL不会出现跨域问题。

2. 不在服务器运行的html是否可以完成一次http请求

对于第一个问题:跨域限制是浏览器行为,不是服务器行为。 浏览器认为地址栏输入时安全的,所以不限制认为是跨域。比如js的src,img的src,可以请求来至于不同网址的图片的信息。通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许。JSONP,就是通过这个实现的。

对于第二个问题,不再服务器上一般通常指的是前端和后端没有在相同的服务器上通过普通的请求是否可以访问资源,由于CORS标准,当前端请求跨资源访问的时候,会进行一次预访问请求,查看当前的服务器是否支持CORS访问,在根据服务器返回的HEAD头进行判断,如果允许,浏览器会请求访问,这个相当于说和浏览器之间进行了一个协议的沟通,只要你服务端允许了,我浏览器就可以让你访问了。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。 对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因为这个限制是浏览器的行为,一般代理服务器都可以搞定这些问题,代理服务器不会存在这样的问题,不过是否需要传递一些cookie、head等需要具体的配置。

小例子

背景:前后端分离的开发环境前端使用vue+axios,后端使用Java开发,需要登陆别的单点登录服务,访问后端服务API中有很多的资源的请求都需要TGC(TGC存放用户身份认证凭证的cookie)CAS 实现单点登录(SSO)基本实现流程-对于单点登录的概念进行介绍,获取TGC之后再访问,登陆服务中存在的资源信息,所以开发很不方便,目前采用的手段为,后端服务手动拦截、然后将通过session获取TGC的信息都改为手动替换了。因此我想先访问后端服务请求然后登陆成功,前端开发环境中虽然跨域访问到了后档的资源信息(node代理)前端常见跨域解决方案(全),但是没有携带cookie,因此没有登录的凭证,就想解决这个问题。

参考-跨域资源共享 CORS 详解

1. 访问请求的时候携带上cookie,这个需要得到后端的许可。xhr.withCredentials=true;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<title>Title</title>
<script>
$(function () {
var xhr = new XMLHttpRequest();
xhr.withCredentials=true;
xhr.open('GET', 'http://10.11.165.12:8082/egms/menus.action');
xhr.send();
xhr.onreadystatechange=function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
}
}
});
</script>
</head>
<body>
</body>
</html>


后端在登录拦截器中添加信息(spring 4.0版本支持配置,我这里就手动了)参考-SpringMVC解决跨域问题

给予许可证书,前端收到后,可以请求跨资源访问了。

response.addHeader("Access-Control-Allow-Origin", "http://localhost:63342");
response.addHeader("Access-Control-Allow-Credentials", "true");


…好像这样子就可以访问了,但是后端还对于Head的Referer字段(可以被浏览器修改、有些浏览器不上传这个字段)进行了校验,只允许当前登录服务的IP、代理服务的IP,其他的不允许,这里可以添加可以配置参数,让前端调试的IP可以被运行就好了,虽然这样可以解决问题,但是安全问题还是挺多的.CSRF可能就是其中的一个。目前防御 CSRF 攻击主要有三种策略:验证 HTTP Referer 字段;在请求地址中添加 token 并验证;在 HTTP 头中自定义属性并验证。 CSRF攻击与防御(写得非常好)

axios的cookie跨域以及相关配置

安全常识了解

XSS:跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

CSRF:跨站请求伪造(英语:Cross-site request forgery [‘fɔrdʒəri]伪造;赝品;伪造罪;伪造品),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

XSS:通过客户端脚本语言(最常见如:JavaScript)

在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入,如果这个代码内容有请求外部服务器,那么就叫做XSS!

CSRF:又称XSRF,冒充用户发起请求(在用户不知情的情况下),完成一些违背用户意愿的请求(如恶意发帖,删帖,改密码,发邮件等)。

HTTP之referer

用大白话谈谈XSS与CSRF

如何防范XSS和CSRF?

CSRF攻击与防御(写得非常好)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: