前端培训-中级阶段（10）- 同源策略（2019-08-15期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

同源策略是什么？

同源策略是浏览器的一个安全功能，不一样源的数据禁止访问。
因此 lilnong.top 下的 ajax 访问 51vv.com 数据是会报错。(network 能够看到 response，证实限制是浏览器方的限制)

固然，也有例外

1. 表单提交、连接
   这些项等同于切换页面

2. script标签的src、link标签的href、img标签的src、iframe标签的src
   上述的资源能够引用，可是不可获取内容。

   1. img 能够显示出来，可是你没法放入canvas二次使用，会把canvas的源污染。
   2. iframe 能够显示，不能够获取DOM
   3. script 不可获取报错代码位置。

同源的定义

端口、域名、协议 都相同，定义为同源。
针对http://www.lilnong.top/static这个地址来讲。端口（80），域名（www.lilnong.top）,协议（http）

URL	端口	域名	协议	描述
https://www.lilnong.top	80	www.lilnong.top	https	协议不一样，不一样源
http://lilnong.top	80	lilnong.top	http	域名不一样，不一样源
http://lilnong.top:8080	8080	lilnong.top	http	域名不一样，端口不一样，不一样源
http://www.lilnong.top:8080	8080	www.lilnong.top	http	端口不一样，不一样源
http://www.lilnong.top/	80	www.lilnong.top	http	同源
http://www.51vv.com	80	www.51vv.com	http	域名不一样，不一样源

为何要有同源策略

1. 安全问题
   例子1：普通的网络用户，不会去记域名等内容。若是我在我本身的页面内，嵌套一个<iframe src="taobao.com">并把他放大，不就和淘宝如出一辙了？而且还会有淘宝的状态信息。
   这时候咱们能够获取用户的密码、给用户建立订单、注销用户的帐户等等有危害性的操做。
   例子2：领导说要一个腾讯新闻。嗯好，咱们<iframe src="news.qq.com">放大自适应。
   这时候，咱们能够加点小广告，截获一些用户操做。分分钟不花钱。获得了一个腾讯新闻。

2. 数据归属问题

   1. 你们都知道爬虫吧。想起来前几天在思否看到的头条（“饭友”APP 未经许可抓取微博数据，被判赔偿210万）。
      若是说没有同源策略，饭友直接 ajax 拉取微博数据。或许你能够说 referer 验证，在浏览器没有同源策略的状况下这些均可以绕过去。
      微博方看到的就是一个正常的微博用户，正常的ip，访问了他们的接口。
      那么爬虫呢？爬虫是主动触发的操做，是他们使用他们的ip，伪形成一个合理的用户，去抓取数据。

总结

同源策略是蛮好的，防护了大部分的攻击。可是合理是合理，一些特殊状况下咱们也是要绕过这个策略，下节咱们讲跨域。

微信公众号：前端linong

初级阶段文章目录

1. 前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
2. 前端培训-初级阶段（13） - 正则表达式
3. 前端培训-初级阶段（13） - 类、模块、继承
4. 前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
5. 前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
6. 前端培训-初级阶段（1三、18）
7. 前端培训-初级阶段（9 -12）
8. 前端培训-初级阶段（5 - 8）
9. 前端培训-初级阶段（1 - 4）

中级阶段文章目录

1. 前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
2. 前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
3. 前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
4. 前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
5. 前端培训-中级阶段（6）- jQuery元素节点操做（2019-07-18期）
6. 前端培训-中级阶段（7）- jQuery的事件绑定链式操做及原理（2019-07-25期）
7. 前端培训-中级阶段（8）- jQuery元素属性样式操做（2019-08-01期）
8. 前端培训-中级阶段（9）- 原生Ajax的运行原理与实现（2019-08-08期）

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. 浏览器同源策略及跨域的解决方法