浏览器同源策略

同源是指什么？

• 如果两个URL的协议，主机，端口一致，则称这两个URL是同源。
• 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
• 在页面中通过about:blank或者javascript:URL执行的脚本会继承打开该URL的文档的源，因为这类URL没有包含源服务器的相关信息。
• 脚本可以将document.domain的值设置为当前域或其当前域的父域

document.domain = ''
// 使用document.domain 来允许子域安全访问其父域时，需要在父域和子域中设置document.domain为相同的值,这是必要的,即使这样做也只是将父域设置回原始值,不这么处理会导致权限错误。

• 跨域写和跨域资源嵌入一般是允许的，跨域读操作一般不被允许。

如何如何允许跨源访问

• JSONP跨域script标签不受浏览器同源策略的影响，允许跨域引用资源，因此script标签可以利用src属性进行跨域，这也是JSONP跨域的基本原理

// 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
body.appendChild(script);
//缺点
1.支持GET请求,
2.从其他域获取资源,存在安全问题.

• 服务器代理，nginx代理
• document.domain跨域，适用于iframe跨域的情况。
• postMessage 跨域，页面通信解决DOM跨域通用方法。

window.postMessage(message，targetOrigin) 
// message是要发送的信息，targetOrigin用来限定接受消息的window对象所在的域

// a 页面
<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" >
function test(){
	document.getElementById('myIframe')。contentWindow.postMessage('a页面信息', '*');
}
// b页面
window.onmessage = function(e) {
        e = e || event; // 获取事件对象
        console.log(e.data); // 通过 data 属性得到发送来的消息
    }

如何阻止跨源访问，CSRF（跨站请求伪造）

• 尽量使用POST，限制GET
• 将cookies设置为HttpOnly

response.setHeader( "Set-Cookie", "cookiename=cookievalue;HttpOnly");

• 在session中添加token

HttpSession session = request.getSession();
Object token = session.getAttribute("_token");
if(token == null || "".equals(token)) {
    session.setAttribute("_token", UUID.randomUUIDO .toString());
}