乐趣区

前端培训中级阶段10-同源策略20190815期

jiezi

前端最基础的就是 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. 前端培训 - 初级阶段（13、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. 浏览器同源策略及跨域的解决方法
退出移动版