什么是跨域？一次性带你理解透
跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有webpack-dev-server搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉得不能再继续这样混下去了，我一定要彻底搞懂这个东西！于是就有了这篇文章。
要掌握跨域，首先要知道为什么会有跨域这个问题出现
确实，我们这种搬砖工人就是为了混口饭吃嘛，好好的调个接口告诉我跨域了，这种阻碍我们轻松搬砖的事情真恶心！为什么会跨域？是谁在搞事情？为了找到这个问题的始作俑者，请点击：浏览器的同源策略。
这么官方的东西真难懂，没关系，至少你知道了，因为浏览器的同源策略导致了跨域，就是浏览器在搞事情。
所以，浏览器为什么要搞事情？就是不想给好日子我们过？对于这样的质问，浏览器甩锅道：“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”
这么官方的话术真难懂，没关系，至少你知道了，似乎这是个安全机制。
所以，究竟为什么需要这样的安全机制？这样的安全机制解决了什么问题？别急，让我们继续研究下去。
没有同源策略限制的两大危险场景
据我了解，浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。试想一下没有这样的限制上述两种动作有什么危险。
没有同源策略限制的接口请求
有一个小小的东西叫cookie大家应该知道，一般用来处理登录等场景，目的是让服务端知道谁发出的这次请求。如果你请求了接口进行登录，服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中，服务端就能知道这个用户已经登录过了。知道这个之后，我们来看场景：
你准备去清空你的购物车，于是打开了买买买网站www.maimaimai.com，然后登录成功，一看，购物车东西这么少，不行，还得买多点。
你在看有什么东西买的过程中，你的好基友发给你一个链接www.nidongde.com，一脸yin笑地跟你说：“你懂的”，你毫不犹豫打开了。
你饶有兴致地浏览着www.nidongde.com，谁知这个网站暗地里做了些不可描述的事情！由于没有同源策略的限制，它向www.maimaimai.com发起了请求！聪明的你一定想到上面的话“服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中”，这样一来，这个不法网站就相当于登录了你的账号，可以为所欲为了！如果这不是一个买买买账号，而是你的银行账号，那……
这就是传说中的CSRF攻击。
看了这波CSRF攻击我在想，即使有了同源策略限制，但cookie是明文的，还不是一样能拿下来。于是我看了一些cookie相关的文章：聊一聊 cookie、Cookie/Session的机制与安全，知道了服务端可以设置httpOnly，使得前端无法操作cookie，如果没有这样的设置，像XSS攻击就可以去获取到cookie（Web安全测试之XSS）；设置secure，则保证在https的加密通信中传输以防截获。
没有同源策略限制的Dom查询
有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进www.yinghang.com改密码。你吓尿了，赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了。
睡眼朦胧的你没看清楚，平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，这个钓鱼网站做了什么呢？
// HTML
// JS // 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom const iframe = window.frames['yinhang'] const node = iframe.document.getElementById('你输入账号密码的Input') console.log(`拿到了这个${node}，我还拿不到你刚刚输入的账号密码吗`) 由此我们知道，同源策略确实能规避一些危险，不是说有了同源策略就安全，只是说同源策略是一种浏览器最基本的安全机制，毕竟能提高一点攻击的成本。其实没有刺不穿的盾，只是攻击的成本和攻击成功后获得的利益成不成正比。
什么是跨域？一次性带你理解透相关推荐
- Cors跨域(一)：深入理解跨域请求概念及其根因
Talk is cheap. Show me the money. 前言 你好,我是YourBatman. 做Web开发的小伙伴对"跨域"定并不陌生,像狗皮膏药一样粘着几乎每位同学 ...
- 前端跨域的理解和解决跨域的方案详解（全）
作为前端开发,我们遇到最多的应该就是跨域问题,对于萌新来说,跨域就是一道墙,不知所措,其实只要理解了跨域的含义和原理,解决它是不难的,今天给大家介绍下什么是跨域和跨域的解决方案! 什么是跨域? 跨域是 ...
- JavaScript跨域总结与解决办法
JavaScript跨域总结与解决办法 什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window ...
- JavaScript跨域方法
一.什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: ...
- JavaScript跨域总结与解决办法（转）
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- Nginx缓存引发的跨域惨案(转：https://www.baidu.com/home/news/data/newspage?nid=9966642810298490574n_type=0p_f)
[51CTO活动]8.26 带你与清华大学.搜狗.京东大咖们一起探讨基于算法的IT运维实践 1. 前言 贵金属wap版直播间上线后,偶尔有用户反馈,在进入wap直播间的时候,出现空白页面,但是重新刷新 ...
- JavaScript 九种跨域方式实现原理
前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全 ...
- springboot 跨域_SpringBoot跨域加SpringSecurity就失效
来自:SegmentFault,作者:欧阳我去 链接:https://segmentfault.com/a/1190000019485883 作为一个后端开发,我们经常遇到的一个问题就是需要配置 CO ...
- 九种跨域方式实现原理
前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 本文完整的源代码请猛戳github 博客 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略 ...
最新文章
- Udacity机器人软件工程师课程笔记（二）-样本搜索和找回-基于漫游者号模拟器
- [LeetCode] Kth Smallest Element in a BST
- JavaFx 实用小工具超 60+ 大集合
- MongoDB干货篇之查询数据
- Python 科学计算库 Numpy（一）—— 概述
- IDRLnet: 基于内嵌物理知识神经网络的开源求解框架
- Magento 添加后台管理 addColumn
- 探究.NET的bin引用程序集运行机制看.NET程序集部署原理
- 【廖雪峰官方网站/Java教程】注解
- Linux 内存管理（二）——伙伴系统
- 代码检查工具 Sonar 安装使用
- 系统越用越臃肿，你需要的系统瘦身技巧.
- 新浪微博技术架构分析
- 解决win10系统网络连接正常，但是网页打不开的问题
- Commands that may modify the data set are disabled, because this instance is configured to report er
- 统计英文字数c语言,c语言题目，纯英文字数统计，怎么错了？
- 应届毕业生选择国企还是外企好
- 一篇论文又是Major Revision
- entity、bo、vo、po、dto、pojo、dao、service、controler如何理解和区分？
- php配置教程ecstore,ecstore初记