佳学网络（建议多翻）
跨域：
瀏覽器 同源策略? 安全機制
沒有同源策略限制 的 兩大危險場景
1.針對 接口的請求
2.針對 dom的查詢
這兩方面 的危險
cookie? 處理登錄場景? 讓服務(wù)端知道誰發(fā)出的請求
cookie過程：
如果 請求了接口 進行 登錄，服務(wù)端? 通過后? 會在響應(yīng)頭（ResponseHeader） 加入 set-Cookie字段，
下次 再發(fā)送請求，瀏覽器 自動將 cookie? 附加在 HTTP請求（Request）的 頭字段cookie 中
（setCookie =》ResponseHeader ?? 下次 cookie 攜帶在http 請求的 頭字段 cookie中）
服務(wù)端 知道 用戶登錄過了
危險實例
你懂得 網(wǎng)站 向 買買買網(wǎng)站 發(fā)起請求（CSRF攻擊： 對方盜用你的身份，以你的名義 發(fā)送惡意請求）
服務(wù)端可以設(shè)置httpOnly，使得前端無法操作cookie
有一個 iframe，它的網(wǎng)址 是銀行登錄頁面
通過 window.frames獲取到 這個 iframe，然后 iframe.document.getElementById獲取 輸入密碼的 input框
// HTML <iframe name="yinhang" src="www.yinhang.com"></iframe> // JS // 由于沒有同源策略的限制，釣魚網(wǎng)站可以直接拿到別的網(wǎng)站的Dom const iframe = window.frames['yinhang'] const node = iframe.document.getElementById('你輸入賬號密碼的Input') console.log(`拿到了這個${node}，我還拿不到你剛剛輸入的賬號密碼嗎`)同源策略 不是絕對安全，但它能 提高攻擊的成本
同源策略 限制下 接口請求的 正確打開方式
1.jsonP：
在HTML標簽里，一些標簽比如script、img這樣的獲取資源的標簽是沒有跨域限制的
我就知道
// query.cb是前后端約定的方法名字，其實就是后端返回一個直接執(zhí)行的方法給前端，由于前端是用script標簽發(fā)起的請求，所以返回了這個方法后相當于立馬執(zhí)行，并且把要返回的數(shù)據(jù)放在方法的參數(shù)里。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'>// 后端返回直接執(zhí)行的方法，相當于執(zhí)行這個方法，由于后端把返回的數(shù)據(jù)放在方法的參數(shù)里，所以這里能拿到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 只能發(fā)送 get請求
https://segmentfault.com/a/1190000015597029?utm_source=tag-newest
我略微知道的是?? 先創(chuàng)建一個用來發(fā)送數(shù)據(jù)的iframe?? 注冊iframe的load事件處理程序，如果需要在響應(yīng)返回時執(zhí)行一些操作的話
在指定的 iframe中 執(zhí)行form??? 把表單添加到主文檔中? 表單提交后可以刪除，不影響下次數(shù)據(jù)發(fā)送
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
非簡單請求? 會發(fā)出 一次 預(yù)檢測請求， 返回碼是? 204，預(yù)檢測 通過 才會真正 發(fā)出請求，返回 200
4.代理
請求的時候? 還是前端的域名? 有個東西? 幫我們把請求 轉(zhuǎn)發(fā)到真正的? 后端域名上
nagix配置
server{
listen? xxxx???? //監(jiān)聽端口
server_name?? localhost?????? //域名是 localhost
location?? ^~? /api{
???? proxy_pass????? xxxxxx???????? //服務(wù)器端地址
}
}
server{# 監(jiān)聽9099端口listen 9099;# 域名是localhostserver_name localhost;#凡是localhost:9099/api這個樣子的，都轉(zhuǎn)發(fā)到真正的服務(wù)端地址http://localhost:9871 location ^~ /api {proxy_pass http://localhost:9871;} }前端 簡單配置后，后端? 也只要 寫下接口? 就可以了吧？
后端接口是一個公共的API，比如一些公共服務(wù)獲取天氣什么的，前端調(diào)用的時候總不能讓運維去配置一下Nginx，如果兼容性沒問題（IE 10或者以上），CROS才是更通用的做法吧。
同源策略下?? 限制dom查詢？？？
1.window.postMessage（） html5的一個接口
2.document.domain
適合 主域名相同? 子域名不同的iframe? 跨域
document.domain = crossdomain.com? ( 主域名)
----------------------------------------------------------------------------------------------------------------------------------------------------------
this指針：
2個 錦囊：
1,函數(shù) 被調(diào)用時（即 運行時），才會確定? 函數(shù)內(nèi)this 的指向。
函數(shù) 中的 this 和 arguments? 是兩個特殊的? 變量，在 函數(shù)被調(diào)用 才會? 取得它們。
2.要確定 函數(shù)中this的指向，必須?? 先找到? 該函數(shù)被調(diào)用的位置。 ？？
一.第一種 test()形式
var a = 1 function test () {console.log(this.a) } test()this指向? 全局對象。
瀏覽器 是 window，node 中是 global （非嚴格模式下）
（嚴格模式下） this? 是 undefined
口頭說明：
舉例說，一個函數(shù)，它 內(nèi)部?
二.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 的區(qū)別：
(1) 參數(shù)不同? on比bind? 多個 selector 參數(shù)
$(' xxx ').bind( "事件名", function() {} )
bind 三個參數(shù)，分別是? event、data、function
$('xxx').on("事件名", function() {} )
on 四個參數(shù)，分別是 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節(jié)點，因為 dom只 渲染一次（啥意思？），也就是說，bind 不能綁定 動態(tài)生成的 dom（ 還沒有 生成的 dom），呵呵，多來幾個說法，自己 體會吧
而 on 可以 綁定 頁面渲染時?? 不存在的 dom
總結(jié)：
引用：https://blog.csdn.net/YJD19970908/article/details/85224419 ????
作為一個學(xué)渣，學(xué)習(xí)失敗的 經(jīng)驗 最豐富了。
????? 前輩告訴你，就?? 多寫筆記吧。哪怕 記些? 不知所云，也比? 絲毫也無?? 好得多。
總結(jié)
以上是生活随笔為你收集整理的佳学网络（建议多翻）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过网页或者移动设备链接跳转qq（tim
- 下一篇： 利用Wifidog实现微信wifi连接以