JavaScript中的跨域与安全机制

同源策略是一种安全机制。
同源：协议、主机、端口号都相同。

没有同源策略限制的两大危险场景：

1. 没有同源策略限制的接口请求

CSRF攻击—跨站请求伪造

CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。
造成的问题：个人隐私泄露以及财产安全。包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账
CSRF原理：

CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！
CSRF的防御：验证码

xss—跨站脚本攻击

攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的.  比如获取用户的Cookie，导航到恶意网站,携带木马等。

2. 没有同源策略限制的Dom查询！

由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom。

跨域的方式

1. 同源策略限制下接口请求的正确打开方式

ajax请求不能跨域，所以引入jsonp 和 cors

实例：

如图，当请求api的位置ajax_get.html与服务器同源时，ajax_get.html发出的ajax请求可以访问到api接口。
api接口地址：http://localhost:8000/api/catelist

/*ajax_get.html*/


    
        
        
        
        
        
    
    
        请求数据
    

//后端接口（koa2框架）
router.get('/catelist',async (ctx)=>{
    let result=await DB.find('articlecate',{})
    ctx.body={
        results:result
    };
})

当把ajax_get.html 从该目录下移出，放到桌面。改请求就访问不到任何数据了。

JSONP

JSONP的原理 ：利用

也可以这样ajax_jsonp_jq.html

此时，之前的ajax_get.html中的ajax还不可以调用api接口。

CORS

CORS是一个W3C标准，全称是"跨域资源共享"。CORS有两种请求，简单请求和非简单请求。
简单请求:
前端什么也不用干，就是正常发请求就可以。
后端只要配置cors中间件即可：

const cors= require('koa2-cors);
//配置 jsonp 的中间件
app.use(cors());

配置完之后，之前的ajax_get.html中的ajax就可以调用api接口了。

2. 同源策略限制下 Dom查询的正确打开方式

参考文章：https://segmentfault.com/a/11...
参考文章：http://www.ruanyifeng.com/blo...