佳学网络（建议多翻）

原创于 2019-08-09 06:11:31 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

跨域：

浏览器同源策略安全机制

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

1.针对接口的请求

2.针对 dom的查询

这两方面的危险

cookie 处理登录场景让服务端知道谁发出的请求

cookie过程：

如果请求了接口进行登录，服务端通过后会在响应头（ResponseHeader）加入 set-Cookie字段，

下次再发送请求，浏览器自动将 cookie 附加在 HTTP请求（Request）的头字段cookie 中

（setCookie =》ResponseHeader 下次 cookie 携带在http 请求的头字段 cookie中）

服务端知道用户登录过了

危险实例

你懂得网站向买买买网站发起请求（CSRF攻击：对方盗用你的身份，以你的名义发送恶意请求）

服务端可以设置httpOnly，使得前端无法操作cookie

有一个 iframe，它的网址是银行登录页面

通过 window.frames获取到这个 iframe，然后 iframe.document.getElementById获取输入密码的 input框

// HTML
<iframe name="yinhang" src="www.yinhang.com"></iframe>
// JS
// 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom
const iframe = window.frames['yinhang']
const node = iframe.document.getElementById('你输入账号密码的Input')
console.log(`拿到了这个${node}，我还拿不到你刚刚输入的账号密码吗`)

同源策略不是绝对安全，但它能提高攻击的成本

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

1.jsonP：

在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的

我就知道

// query.cb是前后端约定的方法名字，其实就是后端返回一个直接执行的方法给前端，由于前端是用script标签发起的请求，所以返回了这个方法后相当于立马执行，并且把要返回的数据放在方法的参数里。
    ctx.body = `${query.cb}(${JSON.stringify(successBody({msg: query.msg}, 'success'))})`

前端是 window.jsonpCb = function (res) { console.log(res) }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
      window.jsonpCb = function (res) {
        console.log(res)
      }
    </script>
    <script src='http://localhost:9871/api/jsonp?msg=helloJsonp&cb=jsonpCb' type='text/javascript'></script>
  </body>
</html>

2.空iframe + form

jsonp 只能发送 get请求

https://segmentfault.com/a/1190000015597029?utm_source=tag-newest

我略微知道的是先创建一个用来发送数据的iframe 注册iframe的load事件处理程序，如果需要在响应返回时执行一些操作的话

在指定的 iframe中执行form 把表单添加到主文档中表单提交后可以删除，不影响下次数据发送

3.CORS( 跨域资源共享 cross-origin resource sharing)

分为简单请求和非简单请求

简单请求同时满足两大条件

请求方法是 head、get、post 之一；

http 的头信息不超出以下几种字段：accept、accept-language、content-language、content-type：（有三个值，一个是 application/x-www-form-urlencoded）、last-event-id

非简单请求会发出一次预检测请求，返回码是 204，预检测通过才会真正发出请求，返回 200

4.代理

请求的时候还是前端的域名有个东西帮我们把请求转发到真正的后端域名上

nagix配置

server{

listen xxxx //监听端口

server_name localhost //域名是 localhost

location ^~ /api{

proxy_pass xxxxxx //服务器端地址

}

server{
    # 监听9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

前端简单配置后，后端也只要写下接口就可以了吧？

后端接口是一个公共的API，比如一些公共服务获取天气什么的，前端调用的时候总不能让运维去配置一下Nginx，如果兼容性没问题（IE 10或者以上），CROS才是更通用的做法吧。

同源策略下限制dom查询？？？

1.window.postMessage（） html5的一个接口

2.document.domain

适合主域名相同子域名不同的iframe 跨域

document.domain = crossdomain.com ( 主域名)

----------------------------------------------------------------------------------------------------------------------------------------------------------

this指针：

2个锦囊：

1,函数被调用时（即运行时），才会确定函数内this 的指向。

函数中的 this 和 arguments 是两个特殊的变量，在函数被调用才会取得它们。

2.要确定函数中this的指向，必须先找到该函数被调用的位置。？？

一.第一种 test()形式

var a = 1
function test () {
    console.log(this.a)
}
test()

this指向全局对象。

浏览器是 window，node 中是 global （非严格模式下）

（严格模式下） this 是 undefined

口头说明：

举例说，一个函数，它内部

二.xxx.test()

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
obj.test()

串串烧

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
var obj0 = {
    a: 3,
    obj 
}
obj0.obj.test()

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
var testCopy = obj.test
testCopy()

jquery bind 与 on 的区别：

(1) 参数不同 on比bind 多个 selector 参数

$(' xxx ').bind( "事件名", function() {} )

bind 三个参数，分别是 event、data、function

$('xxx').on("事件名", function() {} )

on 四个参数，分别是 event、selector、data、function

这个 selector 什么用呢？

如果是  addEventLister:

var x = docuemnt.getElementByClassName("name")[0];
x.addEventLister("click",function(e) {
    var target = e.target;
    if (target.className === "class1") {
        dosomething();
    }else if (target.className === "class2") {
        doanother();
    } else {
        console.err("ss");
    }
})

如果是 jquery .on:

$('.name').on("click",'.class1', function() {
    dosonmething();
}).on("click",'.class2', function() {
    doanother();
});

(2)bind 不能绑定用 js生成的 dom节点，因为 dom只渲染一次（啥意思？），也就是说，bind 不能绑定动态生成的 dom（还没有生成的 dom），呵呵，多来几个说法，自己体会吧

而 on 可以绑定页面渲染时不存在的 dom

总结：