摘要:為了解決協議的這一缺陷,需要使用另一種協議安全套接字層超文本傳輸協議,為了數據傳輸的安全,在的基礎上加入了協議,依靠證書來驗證服務器的身份,并為瀏覽器和服務器之間的通信加密。是超文本傳輸協議,信息是明文傳輸,則是具有安全性的加密傳輸協議。
1、請說說從用戶輸入url到呈現網頁,這中間都發生了什么 ?
1、域名解析 域名解析的過程: 1).查詢瀏覽器自身DNS緩存 2).若上面沒有查找到,則搜索操作系統自身的dns緩存 3).若上面沒有找到,則嘗試讀取hosts文件 4).若上面沒有找到,向本地配置的首選DNS服務器發送請求 5).win系統 如果上面沒有找到,操作系統查找NetBIOS name cache 6).win系統 如果上面沒有找到,查詢wins服務器 7).win系統 如果上面沒有找到,廣播查找 8).win系統 如果上面沒有找到,讀取LMHOSTS文件 若以上多沒有找到,解析失敗 2、 TCP三次握手 a. 為什么需要三次握手 下面解釋明明兩次就可以建立連接的為什么還要加第三次的確認。 如果發送兩次就可以建立連接話,那么只要客戶端發送一個連接請求,服務端接收到并發送了確認,就會建立一個連接。 可能出現的問題:如果一個連接請求在網絡中跑的慢,超時了,這時客戶端會從發請求,但是這個跑的慢的請求最后還是跑到了,然后服務端就接收了兩個連接請求,然后全部回應就會創建兩個連接,浪費資源! 如果加了第三次客戶端確認,客戶端在接受到一個服務端連接確認請求后,后面再接收到的連接確認請求就可以拋棄不管了。 b. 為什么需要四次分手 TCP是雙向的,所以需要在兩個方向分別關閉,每個方向的關閉又需要請求和確認,所以一共就4次。 3、瀏覽器向服務器發送http請求 一旦建立了TCP連接,Web瀏覽器就會向Web服務器發送請求命令。例如:GET/sample/hello.jsp HTTP/1.1。 4、瀏覽器發送請求頭信息 瀏覽器發送其請求命令之后,還要以頭信息的形式向Web服務器發送一些別的信息,之后瀏覽器發送了一空白行來通知服務器,它已經結束了該頭信息的發送。 5、服務器處理請求 服務器軟件收到http請求,確定執行什么(ASP.net PHP RUBY JAVA等)來處理他。讀取參數并進行邏輯操作后,生成指定的數據。 6、服務器做出應答 客戶機向服務器發出請求后,服務器會客戶機回送應答,HTTP/1.1 200 OK ,應答的第一部分是協議的版本號和應答狀態嗎 7、服務器發送應答頭信息 正如客戶端會隨同請求發送關于自身的信息一樣,服務器也會隨同應答向用戶發送關于它自己的數據及被請求的文檔。 8、服務器發送數據 Web服務器向瀏覽器發送頭信息后,它會發送一個空白行來表示頭信息的發送到此為結束,接著,它就以Content-Type應答頭信息所描述的格式發送用戶所請求的實際數據。 9、tcp連接關閉 一般情況下,一旦Web服務器向瀏覽器發送了請求數據,它就要關閉TCP連接,然后如果瀏覽器或者服務器在其頭信息加入了這行代碼: Connection:keep-alive TCP連接在發送后將仍然保持打開狀態,于是,瀏覽器可以繼續通過相同的連接發送請求。保持連接節省了為每個請求建立新連接所需的時間,還節約了網絡帶寬2、請說說瀏覽器渲染頁面的過程 ?
分析:這道題的考察點重點在于瀏覽器渲染頁面的機制上面,只有充分理解渲染機制以后才能去更好的優化咱們的頁面,比如css為什么放到head里面,js為什么放到body后面,重繪重排概念 參考回答: 瀏覽器渲染頁面是一個從上至下的過程,當拿到html以后首先會生成dom樹,加載解析css構建cssom樹,解析css的時候不會阻塞進程,我們通常會把首屏樣式放到head里面,然后加載執行js,在js里面可能會有動態創建修改dom的邏輯,瀏覽器為了優化整個渲染過程,會在解析到js的時候阻塞整個進程,我們通常把js放到body后面來優化首屏的加載速度,當dom以及cssom都構建完成后會生成渲染樹,再根據渲染樹將dom樹上的節點布局到屏幕上的正確位置,最后遍歷繪制的所有節點,為其添加對應的樣式 延伸理解 重繪:改變dom的外觀屬性,如背景色,outline等 重排: 改變dom的結構,幾何屬性等 為了減少瀏覽器的重排重繪,我們應該將多次改變樣式的操作合并成一次操作3、說說http,https的區別,他們的優缺點是什么?
超文本傳輸協議HTTP協議被用于在Web瀏覽器和網站服務器之間傳遞信息,HTTP協議以明文方式發送內容,不提供任何方式的數據加密,如果攻擊者截取了Web瀏覽器和網站服務器之間的傳輸報文,就可以直接讀懂其中的信息,因此,HTTP協議不適合傳輸一些敏感信息,比如:信用卡號、密碼等支付信息。 為了解決HTTP協議的這一缺陷,需要使用另一種協議:安全套接字層超文本傳輸協議HTTPS,為了數據傳輸的安全,HTTPS在HTTP的基礎上加入了SSL協議,SSL依靠證書來驗證服務器的身份,并為瀏覽器和服務器之間的通信加密。 一、HTTP和HTTPS的基本概念 HTTP:是互聯網上應用最為廣泛的一種網絡協議,是一個客戶端和服務器端請求和應答的標準(TCP),用于從WWW服務器傳輸超文本到本地瀏覽器的傳輸協議,它可以使瀏覽器更加高效,使網絡傳輸減少。 HTTPS:是以安全為目標的HTTP通道,簡單講是HTTP的安全版,即HTTP下加入SSL層,HTTPS的安全基礎是SSL,因此加密的詳細內容就需要SSL。 HTTPS協議的主要作用可以分為兩種:一種是建立一個信息安全通道,來保證數據傳輸的安全;另一種就是確認網站的真實性。 二、HTTP與HTTPS有什么區別? HTTP協議傳輸的數據都是未加密的,也就是明文的,因此使用HTTP協議傳輸隱私信息非常不安全,為了保證這些隱私數據能加密傳輸,于是網景公司設計了SSL(Secure Sockets Layer)協議用于對HTTP協議傳輸的數據進行加密,從而就誕生了HTTPS。 簡單來說,HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,要比http協議安全。 HTTPS和HTTP的區別主要如下: 1、https協議需要到ca申請證書,一般免費證書較少,因而需要一定費用。 2、http是超文本傳輸協議,信息是明文傳輸,https則是具有安全性的ssl加密傳輸協議。 3、http和https使用的是完全不同的連接方式,用的端口也不一樣,前者是80,后者是443。 4、http的連接很簡單,是無狀態的;HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,比http協議安全。 三、HTTPS的工作原理 我們都知道HTTPS能夠加密信息,以免敏感信息被第三方獲取,所以很多銀行網站或電子郵箱等等安全級別較高的服務都會采用HTTPS協議。 1、客戶端發起HTTPS請求 這個沒什么好說的,就是用戶在瀏覽器里輸入一個https網址,然后連接到server的443端口。 2、服務端的配置 采用HTTPS協議的服務器必須要有一套數字證書,可以自己制作,也可以向組織申請,區別就是自己頒發的證書需要客戶端驗證通過,才可以繼續訪問,而使用受信任的公司申請的證書則不會彈出提示頁面(startssl就是個不錯的選擇,有1年的免費服務)。 這套證書其實就是一對公鑰和私鑰,如果對公鑰和私鑰不太理解,可以想象成一把鑰匙和一個鎖頭,只是全世界只有你一個人有這把鑰匙,你可以把鎖頭給別人,別人可以用這個鎖把重要的東西鎖起來,然后發給你,因為只有你一個人有這把鑰匙,所以只有你才能看到被這把鎖鎖起來的東西。 3、傳送證書 這個證書其實就是公鑰,只是包含了很多信息,如證書的頒發機構,過期時間等等。 4、客戶端解析證書 這部分工作是有客戶端的TLS來完成的,首先會驗證公鑰是否有效,比如頒發機構,過期時間等等,如果發現異常,則會彈出一個警告框,提示證書存在問題。 如果證書沒有問題,那么就生成一個隨機值,然后用證書對該隨機值進行加密,就好像上面說的,把隨機值用鎖頭鎖起來,這樣除非有鑰匙,不然看不到被鎖住的內容。 5、傳送加密信息 這部分傳送的是用證書加密后的隨機值,目的就是讓服務端得到這個隨機值,以后客戶端和服務端的通信就可以通過這個隨機值來進行加密解密了。 6、服務段解密信息 服務端用私鑰解密后,得到了客戶端傳過來的隨機值(私鑰),然后把內容通過該值進行對稱加密,所謂對稱加密就是,將信息和私鑰通過某種算法混合在一起,這樣除非知道私鑰,不然無法獲取內容,而正好客戶端和服務端都知道這個私鑰,所以只要加密算法夠彪悍,私鑰夠復雜,數據就夠安全。 7、傳輸加密后的信息 這部分信息是服務段用私鑰加密后的信息,可以在客戶端被還原。 8、客戶端解密信息 客戶端用之前生成的私鑰解密服務段傳過來的信息,于是獲取了解密后的內容,整個過程第三方即使監聽到了數據,也束手無策。 六、HTTPS的優點 正是由于HTTPS非常的安全,攻擊者無法從中找到下手的地方,從站長的角度來說,HTTPS的優點有以下2點: 1、SEO方面 谷歌曾在2014年8月份調整搜索引擎算法,并稱“比起同等HTTP網站,采用HTTPS加密的網站在搜索結果中的排名將會更高”。 2、安全性 盡管HTTPS并非絕對安全,掌握根證書的機構、掌握加密算法的組織同樣可以進行中間人形式的攻擊,但HTTPS仍是現行架構下最安全的解決方案,主要有以下幾個好處: (1)、使用HTTPS協議可認證用戶和服務器,確保數據發送到正確的客戶機和服務器; (2)、HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,要比http協議安全,可防止數據在傳輸過程中不被竊取、改變,確保數據的完整性。 (3)、HTTPS是現行架構下最安全的解決方案,雖然不是絕對安全,但它大幅增加了中間人攻擊的成本。 七、HTTPS的缺點 雖然說HTTPS有很大的優勢,但其相對來說,還是有些不足之處的,具體來說,有以下2點: 1、SEO方面 據ACM CoNEXT數據顯示,使用HTTPS協議會使頁面的加載時間延長近50%,增加10%到20%的耗電,此外,HTTPS協議還會影響緩存,增加數據開銷和功耗,甚至已有安全措施也會受到影響也會因此而受到影響。 而且HTTPS協議的加密范圍也比較有限,在黑客攻擊、拒絕服務攻擊、服務器劫持等方面幾乎起不到什么作用。 最關鍵的,SSL證書的信用鏈體系并不安全,特別是在某些國家可以控制CA根證書的情況下,中間人攻擊一樣可行。 2、經濟方面 (1)、SSL證書需要錢,功能越強大的證書費用越高,個人網站、小網站沒有必要一般不會用。 (2)、SSL證書通常需要綁定IP,不能在同一IP上綁定多個域名,IPv4資源不可能支撐這個消耗(SSL有擴展可以部分解決這個問題,但是比較麻煩,而且要求瀏覽器、操作系統支持,Windows XP就不支持這個擴展,考慮到XP的裝機量,這個特性幾乎沒用)。 (3)、HTTPS連接緩存不如HTTP高效,大流量網站如非必要也不會采用,流量成本太高。 (4)、HTTPS連接服務器端資源占用高很多,支持訪客稍多的網站需要投入更大的成本,如果全部采用HTTPS,基于大部分計算資源閑置的假設的VPS的平均成本會上去。 (5)、HTTPS協議握手階段比較費時,對網站的相應速度有負面影響,如非必要,沒有理由犧牲用戶體驗。4、請說說js里的this的指向
參考回答: js中this的指向總是指向一個對象,而具體指向哪個對象是在運行時基于函數的執行環境動態綁定的, 而非函數被聲明時的環境 具體到實際應用中,this 的指向大致可以分為以下幾種 * 作為對象的方法調用指向當前對象 * 作為普通函數調用指向全局window * 構造函數調用指向返回的對象 * call,apply 調用指向其第一個參數5、怎么理解js中的原型鏈?如何實現繼承?
參考回答: 每個構造函數都有一個原型對象 每個原型對象都包含一個指向構造函數的指針 每個實例都包含一個指向原型對象的指針 查找方式是一層層向上查找直至頂層Object.prototype 實現繼承的方式常用的有: 原型鏈繼承 借用構造函數(call,apply) 組合繼承(原型鏈+構造函數) 原型式繼承 寄生式組合式繼承 延伸理解: 優缺點? 每一種繼承的方式都有自己的優缺點 組合繼承的特點是會調用構造函數兩次, 都是將多種繼承方式組合到一起相輔相成. new 運算符具體干了什么? 創建一個空的對象 將空的對象的__proto__成員指向構造函數的prototype成員對象 調用構造函數將this指向前面創建的對象6、Js中的內存泄露怎么理解?
參考回答: 內存泄漏的定義為當程序不再需要的內存,由于某種原因其不會返回到操作系統或可用內存池,內存泄漏會導致一系列問題,比如: 運行緩慢,崩潰,高延遲等 js中常見的內存泄露: 意外的全局變量 遺忘的計時器或回調函數 脫離文檔的DOM引用 閉包7、如何理解瀏覽器的跨域問題?常用的解決方式有哪些?
參考回答: 瀏覽器的同源策略會導致跨域,這里同源策略又分為以下兩種 : DOM同源策略:禁止對不同源頁面DOM進行操作。這里主要場景是iframe跨域的情況,不同域名的iframe是限制互相訪問的。 XmlHttpRequest同源策略:禁止使用XHR對象向不同源的服務器地址發起HTTP請求。只要協議、域名、端口有任何一個不同,都被當作是不同的域,之間的請求就是跨域操作 注:協議、域名、端口有任何一個不同,都視為不同的域 常用的解決方式: 1.CORS(Cross-origin resource sharing) 跨域資源共享 注: 這種方式如果想要攜帶cookie需要xhr設置withCredentials為true, 服務端 Access-Control-Allow-Credentials:true 2.jsonp實現跨域(動態創建script,利用src屬性進行跨域) 3.服務器代理(瀏覽器有跨域限制,服務端沒有) 4.document.domain 5.window.name 6.hash傳值 7.possMessage8、函數防抖,函數節流的基本概念以及工作中實際使用到的場景?實現的思路是?
函數防抖,函數節流的基本概念以及工作中實際使用到的場景?實現的思路是? 參考回答: 函數防抖(debounce) 基本概念: 在事件被觸發n秒后再執行回調,如果在這n秒內又被觸發,則重新計時。 舉例理解: 我們用手指一直按住一個彈簧,它將不會馬上彈起直到你松手為止 使用場景: 按鈕重復點擊 輸入框連續輸入 判斷scroll是否滑到底部 簡單實現: const debounce = (fn,delay) => { let timer = null return () => { let ctx = this, args = arguments clearTimeout(timer) timer = setTimeout( ()=> { fn.apply(ctx,args) }, delay) } } 函數節流(throttle) 基本概念: 在規定的時間范圍內相同的操作觸發多次只執行一次 DOM拖拽 Canvas畫筆 窗口resize 簡單實現: const throttle = (fn,gapTime = 100) => { let timer = null let start_time = new Date().getTime() return () => { let ctx = this, args = arguments, current_time = new Date().getTime() clearTimeout(timer) if(curr_time - start_time >= gapTime()){ fn.apply(ctx,args) start_time = current_time }else{ timer = setTimeout( ()=> { fn.apply(ctx,args) }, gapTime) } } }9、說說js中的eventloop機制?
參考回答: 首先javascript是單線程機制,就是指當我們在執行一個任務的時候,其它的事情都得等待他執行完畢 在js中所有任務分為兩種, 同步任務及異步任務 執行棧執行主線程任務,當有操作dom,ajax交互,使用定時器異步操作的時候,這些任務會被移入到 callback queue 任務隊列中 當主線程任務執行完畢為空時,會讀取callback queue隊列中的函數,進入主線程執行 上述過程會不斷重復,也就是常說的Event Loop(事件循環) 在一個事件循環中,異步任務返回結果后會被扔進一個任務列隊中,根據異步事件上的類型,這個事件會被放到對應的宏任務或者微任務列隊中去, 當執行棧為空的時候,主線程會先查看微任務中的事件列隊,如果微任務不是空先依次執行微任務,如果是空的再去宏任務列隊中取出一個事件并把對應的回調加入到當前執行棧,如此反復,進入循環 下面用一道題來加深印象 setTimeout(function () { console.log(1); }); new Promise( (resolve,reject) => { console.log(2) }).then( (val) => { console.log(val); }) 輸出的結果是2,110、web安全攻擊手段有哪些?以及如何防范
常見的有xss, csrf, sql注入 xss(cross site scripting) 跨站腳本攻擊 定義: 指攻擊者在網頁嵌入腳本,用戶瀏覽網頁觸發惡意腳本執行 XSS攻擊分為3類:存儲型(持久型)、反射型(非持久型)、基于DOM 如何防范: 設置HttpOnly以避免cookie劫持的危險 過濾,對諸如