同源策略和跨域
一、同源介绍
同源策略:限制从同一个源加载的文档或脚本与另一个源的资源进行交互。是用于隔离潜在恶意文件的重要机制。
1.怎么算是同源
如下的访问方式:
2.如果没有同源策略的危险场景
没有同源策略的接口请求:
当你进行了接口请求的时候,服务器验证之后会在响应头set-cookie字段,下次再发起请求的时候,浏览器自动将cookie附加在Http请求头字段cookie中,就可以验证登录过。
当我们登录一个网站的时候,收到一个其他网站的链接,点击进入这个其他网站时候,如果没有同源策略的话,这个其他网站的就可以在无需登录的情况下进入你之前的网站。
没有同源策略的Dom查询:
可以通过获取不同源网站dom,不如你输入密码的input标签的内容,这样就可以轻松拿到用户名和密码,这样就有点太危险了吧!
二、跨域解决方案
1.用有src属性的标签都可以跨域,比如
可以添加< script src>来进行跨域访问使后端服务添加一个回调函数,需要前后端共同处理。
2.jquery 的jsonp类型
12 $.ajax({
13 url: "http://localhost:9090/student",
14 type: "GET",
15 dataType: "jsonp", //指定服务器返回的数据类型
16 success: function (data) {
17 var result = JSON.stringify(data); //json对象转成字符串
18 $("#text").val(result);
19 }
20 });
jsonp 指定服务器返回的数据类型为jsonp类型,自动带一个callback=xxx,xxx是jquery随机生成的一个回调函数。支持get方法
3.CROS
并不是浏览器限制了发起跨站请求,可能是跨站请求可以正常发起,只会返回结果被浏览器拦截了,加了如下的Filter就可以了。
public class CrossDomainFilter implements Filter {
public CrossDomainFilter() {
}
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse)res;
response.setHeader("Access-Control-Allow-Origin", "*");//主要这个*
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, souche-security-token-inc, Souche-Security-Token");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {
}
public void destroy() {
}
}
同时在web.xml中加上如下
<filter>
<filter-name>crossDomain</filter-name>
<filter-class>com.souche.optimus.core.interceptor.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>crossDomain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>