浏览器同源策略-初步认识

同源策略说明

客户端交互安全问题

传统表单提交（不设置target），只能提交到当前地址栏的URL，这个过程会伴随着非常明显的交互反馈，比如浏览器会刷新整个页面，如果有任何危险的操作势必会引起用户的警觉。但针对iframe也有安全问题，比如你在登陆银行页面的时候，如果返回的数据在恶意的iframe中被接受，则会造成重要信息的泄露。
javascript如果接管了整个后续请求与提交数据的过程，如果被恶意代码攻击了，用户根本无法觉察在后台数据发生了严重泄漏。换句话说控制权其实交给了脚本，而不是与用户直接发生交互的浏览器，那么脚本对于用户来说是不可知不可信的，鬼知道这段脚本是业务逻辑还是攻击代码。

解决策略

同源策略是浏览器客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载，即浏览器会进行同源策略的验证。这里的同源指的是：同协议，同域名和同端口。

跨域是浏览器的一种安全机制，form提交没有跨域是因为form提交情况下，跨域没有任何安全问题。ajax提交跨域，或者说iframe之间跨域，都会有安全问题。

目的

用安全术语来说就是为了保障数据的机密性。

分类

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种：
1、DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2、XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

跨域的定义

需要协议、域名、端口都一样，都被当作是同源，否则则是跨域。网上找的参考，
找出http://store.company.com/dir/page.html的同源检测：

跨域问题说明

问题：既然有为了保证数据安全的同源策略，那如何解决跨域数据交互问题？
跨域问题是浏览器强加给浏览器的同源规则引起的数据无法跨域交互的问题而已。世界本无跨域限制，是浏览器为了保证数据安全强制不允许不同源的资源，但是浏览器却没有限制它自己。比如说img标签可以加载任何域的图片，script可以加载任何域的js。再比如说你不能从前端js去调淘宝的接口获取ip对应的城市地址信息，但是你可以手敲在浏览器地址栏，直接打开。

参考文档：https://mp.weixin.qq.com/s?__biz=MzU0OTExNzYwNg==&mid=2247483685&idx=1&sn=543e9736146405e9e5b37ec5a1c4b448&chksm=fbb58aecccc203faa4517d77e3f0f723896d2cd5c3ddba2c360b0f0a03f0dc873a1df552d563&scene=0&key=72da87db120ba9cf61099ab1aa1018a958a343b288aa45db018dfe9121cff1879fabc215189a94b80df3231def1863854c558191cee62b44b7723f16099866bb8c3922d77f3430599807dfa31f570e9f&ascene=0&uin=MjIxODIxNjA0MA%3D%3D&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.11.6+build(15G1004)&version=12010110&nettype=WIFI&fontScale=100&pass_ticket=yNbtn1PSEE2%2B4fxr6HsvYzix%2F29VqEk%2FSw%2BUz7LY0%2FJn75cfBnENdWcok3S%2FcXRr