前端安全、浏覽器渲染機制、js運作機制、頁面性能、錯誤監控

一、安全類

1、csrf：跨站請求僞造；

原理：

（1）使用者C打開浏覽器，通路受信任網站A，輸入使用者名和密碼請求登入網站A；

（2）在使用者資訊通過驗證後，網站A産生Cookie資訊并傳回給浏覽器，此時使用者登入網站A成功，可以正常發送請求到網站A；（3）使用者未退出網站A之前，在同一浏覽器中，打開一個TAB頁通路網站B；

（4）網站B接收到使用者請求後，傳回一些攻擊性代碼，并發出一個請求要求通路第三方站點A；

（5）浏覽器在接收到這些攻擊性代碼後，根據網站B的請求，在使用者不知情的情況下攜帶Cookie資訊，向網站A送出請求。網站A并不知道該請求其實是由B發起的，是以會根據使用者C的Cookie資訊以C的權限處理該請求，導緻來自網站B的惡意代碼被執行。

防禦：

（1）驗證 HTTP Referer 字段，判斷頁面來源

（2）在請求位址中添加 token 并驗證；

（3）在 HTTP 頭中自定義屬性并驗證

2、xss：跨站腳本攻擊；

原理：向頁面注入腳本，（如：評論區）

防禦：

（1）對使用者輸入的資料進行HTML Entity編碼

（2）對資料過濾

二、渲染機制

1、DOCTYPE作用：用來聲明文檔類型和DTD規範，用途：檔案的合法性驗證

HTML4.0有一個嚴格模式（不包括展示性的和棄用的元素）和一個傳統模式（包括）

2、浏覽器如何渲染：

（1）解析HTML形成DOM Tree

（2）解析css産生css規則樹（css rule tree）

（3）根據DOM Tree和css規則樹來構造rendering Tree

（4）下一步操作稱之為Layout，用來計算每個節點在螢幕中的位置

（5）繪制，即周遊render樹，使用UI後端層繪制每個節點

Reflow：重排，當某個部分發生了變化影響了布局，就需要倒回去重新渲染

原因：

（1）增加、較少DOM節點

（2）修改css樣式的時候

（3）修改網頁的預設字型時

避免：

（1）HTML元素使用fixed或absolute，不會引起reflow

（2）使用預先定義好的css的class，修改DOM的className

Repaint：重繪，隻改變某個元素的背景顔色，不影響元素周圍或内部布局屬性，将隻會引起浏覽器的repaint，重畫某一部分

原因：

（1）操作DOM節點

（2）修改css樣式

減少repaint：

（1）建立一個節點，将最終的結果放進去，一次性插入

三、js運作機制

<script type="text/javascript">                   // 最終輸出1、3、2
		console.log(1);
		setTimeout(function() {
			console.log(2);
		}, 0);
		console.log(3);
	</script>

1、js是單線程的：同一時間隻能做一件事

2、任務隊列：同步任務和異步任務，

3、機制：從上往下執行，先執行同步任務，遇到異步任務先挂起，執行完同步任務在回去執行異步任務

4、異步任務：DOM事件、setTimeout、setInterval、es6中的promise

for (var i = 0; i < 4; i++) {            // 輸出4個4
          setTimeout(function () {
              console.log(i);
          }, 1000);                      // 過1s後，才會放入異步隊列中，
        }

将var改為let便會輸出0/1/2/3，作用域不同了

四、頁面性能

2、減少http請求

（1）HTML的map圖

<img usemap='#map1' src='./music.png'>
	<map name="map1">
		<area shape="rect" coords="0, 0, 45, 180" href="javascript:alert(1);" target="_blank" rel="external nofollow"  alt="">
		<area shape="rect" coords="45, 0, 90, 180" href="javascript:alert(2);" target="_blank" rel="external nofollow"  alt="">
		<area shape="rect" coords="90, 0, 135, 180" href="javascript:alert(3);" target="_blank" rel="external nofollow"  alt="">
		<area shape="rect" coords="135, 0, 180, 180" href="javascript:alert(4);" target="_blank" rel="external nofollow"  alt="">
	</map>

（2）css精靈

<a href="javascript: alert(1);" target="_blank" rel="external nofollow" >
			<span class="span1"></span>
		</a>
		<a href="javascript: alert(2);" target="_blank" rel="external nofollow" >
			<span class="span2"></span>
		</a>
		<a href="javascript: alert(3);" target="_blank" rel="external nofollow" >
			<span class="span3"></span>
		</a>
		<a href="javascript: alert(4);" target="_blank" rel="external nofollow" >
			<span class="span4"></span>
		</a>

span {
	    	display: inline-block;
	    	width: 45px;
	    	height: 45px;
	    	background: url('./music.png');
	    }
		.span1 {
			background-position: 0 0;
		}
		.span2 {
			background-position: -45px 0;
		}
		.span3 {
			background-position: -90px 0;
		}
		.span4 {
			background-position: -135px 0;
		}

（3）合并css或js檔案

（4）使用base64位圖檔

3、緩存

（1）強緩存：直接從緩存中取

（2）304協商緩存：問一下伺服器緩存中的能不能用

（3）http請求頭：

Cache-Control: no-store            // 禁止浏覽器緩存
Cache-Control: no-cache            // 不允許直接緩存，即協商緩存
Cache-Control: max-age             // 秒，緩存的有效時間

pragma: no-cache                   // 禁止浏覽器緩存


expires: 時間                       // 格林威治時間，在之前有效

優先級：pragma>Cache-Control>expires

（4）響應頭

Last-Modified                      // 通知資源最後修改的時間
ETag                               // 文章内容修改

緩存先expires->Last-Modified->ETag 都沒過期，返304響應

4、異步加載

<script src="./xxx.js" charset="utf-8" async></script>

<script src="./xxx.js" charset="utf-8" defer>

defer

：用于開啟新的線程下載下傳腳本檔案，并使腳本在文檔解析完成後執行。

async

：HTML5新增屬性，用于異步下載下傳腳本檔案，下載下傳完畢立即解釋執行代碼。

5、預解析DNS

<meta http-quiv="x-dns-prefetch-control" content="on">         // 強制打開預解析DNS，http是預設開啟的，https是預設關閉的
<link rel="dns-prefetch" href="//local_name.com" target="_blank" rel="external nofollow" >              // 将裡面的位址預解析

五、錯誤監控

1、錯誤分類：

（1）即時運作錯誤

捕獲：

1）try...catch

2）window.onerror

（2）資源加載錯誤（沒有冒泡）

1）object.onerror

2）performance.getEntries()

performance.getEntries().forEach((item) => { console.log(item.name) } )       // 擷取所有已經加載的資源

3）Error事件捕獲

<head>
    <meta charset="utf-8">
    <title>錯誤監控</title>
    <script type="text/javascript">
      window.addEventListener('error', function (e) {
          console.log('捕獲', e);
      }, true);                                               // 一定要加true
    </script>
  </head>
  <body>
    <script src="//badu.com/test.js" charset="utf-8"></script>
  </body>

2、跨域錯誤能捕獲嗎？可以

（1）用戶端：在script标簽中加crossorigin屬性

<script crossorigin  src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>

（2）服務端：在響應頭Access-Control-Allow-Origin:域名或*

3、上報錯誤的基本原理

（1）采用Ajax通信的方式上報

（2）利用Image對象上報

(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';    // 後面為上報的的位址

前端安全、浏覽器渲染機制、js運作機制、頁面性能、錯誤監控

繼續閱讀

「網絡攻防」前端安全攻防大全——專注于攻擊和防禦

跨站僞造請求(CSRF)

加密函數庫（cryptojs庫）

前端開發資料傳輸加密方式之：AES加密AES 加密

web前端應該注意的安全問題1.跨站腳本攻擊（XSS攻擊）2. 跨站請求僞造(CSRF攻擊)3.SQL注入

結合測試題分析XSS跨站腳本攻擊幾種常見手段(内附https://xss.haozi.me/試題答案)

vue使用axios時如何跨域

web前端安全與防禦

如何避免XSS攻擊

扒一扒各種跨域的原理了解同源政策了解跨域跨域實踐

【利用AI讓知識體系化】前端安全攻防知識點

前端安全性問題

【前端安全】淺談XSS攻擊和防範

一次項目雜記

至簡·js運作機制

前端之安全部分