web安全-xss的原理及防御

理解XSS的攻擊原理和手段

反射型：發(fā)出請(qǐng)求時(shí)，XSS代碼出現(xiàn)在URL中，作為輸入提交到服務(wù)器端，服務(wù)器端解析后響應(yīng)，XSS代碼隨響應(yīng)內(nèi)容一起傳回給瀏覽器，最后瀏覽器解析并執(zhí)行XSS代碼，這個(gè)過程像一次反射，故叫反射型XSS。

    // 如：index.html?xss=<img src ="null" onerror="alert(1)">

存儲(chǔ)型： 存儲(chǔ)型和反射型XSS的差別在于提交的代碼會(huì)存儲(chǔ)在服務(wù)器端（數(shù)據(jù)庫、內(nèi)存、文件系統(tǒng)等），下次請(qǐng)求目標(biāo)頁面時(shí)不用再提交XSS代碼。

掌握XSS攻擊的防范措施

1，編碼

    // 如 xss =?xss=<img src ="null" onerror="alert(1)"<button onclick="alert('點(diǎn)我')">點(diǎn)我</button>
    function html_encode( str ){
        var s = '';
        if(str && str.length == 0) return '';
        s = str.replace(/&/g, '&');
        s = s.replace(/</g, '<');
        s = s.replace(/>/g, '>');
        s = s.replace(/\s/g, ' ');
        s = s.replace(/\'/g, ''');
        s = s.replace(/\"/g, '"');
        s = s.replace(/\n/g, '<br>');
        return s;
    }
    //后臺(tái)存入的數(shù)據(jù)為
    "<img src="null" onerror="alert(1)"> <button onclick="alert('點(diǎn)我')">點(diǎn)我</button>"

    將以上特殊字符進(jìn)行轉(zhuǎn)義存入，讀取時(shí)則按存入的文本進(jìn)行展現(xiàn)，腳本不運(yùn)行。
    轉(zhuǎn)碼方式和下面（過濾+校正）組合方式 選一種即可

2，過濾

3，校正

    // 將字符串進(jìn)行過濾和校正
///https://github.com/blowsie/Pure-JavaScript-HTML5-Parser/blob/master/htmlparser.js
//https://github.com/mathiasbynens/he.js
    var parse = function( str ){
            var results = '';
            try{
                HTMLParser(he.unescape(str,{strict: true}),{
                    start: function(tag, attrs, unary){ // unary 是否單標(biāo)簽
                        if(tag == 'script' || tag == 'style' || tag == 'link' || tag == 'iframe' || tag == 'frame'){
                            return;
                        }
                        results += '<' + tag;
                        // 循環(huán)屬性，這里可以過濾onclick mouseover onerror等事件屬性
                        for(var i = 0, len = attrs.length; i < len; i++){
                            if(attrs[i].name == 'onclick' || attrs[i].name == 'onerror'){
                                break;
                            }
                            results += ' '+attrs[i].name + ' = ' + attrs[i].escaped;
                        }
                        results += (unary?' /':'') + '>'
                    },
                    end: function(tag){
                        results += '</'+tag+'>';
                    },
                    chars: function(text){ // dom內(nèi)容
                        results +=text;
                    },
                    comment: function(text){ // 注釋
                        results +='<!--' +text+'--->';
                    }
                });
                return results;
            }catch(e){
                console.log(e);
            }finally{
                
            }
        }
        getBtn.addEventListener('click',function(){
            var xhr = new XMLHttpRequest();
            var url = 'users/getComment';
            xhr.open('get',url,true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // 過濾+校正
                        var com = parse(JSON.parse(xhr.response).comment);
                        var txt = document.createElement('span');
                        txt.innerHTML = com;
                        document.body.appendChild(txt);
                    }
                }
            }
            xhr.send();
        })
        簡(jiǎn)要說明：當(dāng)用戶存入![](null) <button onclick="alert('點(diǎn)我')">點(diǎn)我</button>時(shí)，數(shù)據(jù)庫保存的是該字符串，當(dāng)讀取該字段后，在ajax中進(jìn)行了parse方法的過濾，校正工作，parse方法主要是解析當(dāng)前字符串，對(duì)tag標(biāo)簽進(jìn)行過濾組裝，形成一個(gè)按需求的字符串，最后將該字符串插入到DOM中節(jié)點(diǎn)中。

比較：編碼方式：對(duì)輸入的內(nèi)容進(jìn)行轉(zhuǎn)義，不做其他處理；可以阻止XSS攻擊，有時(shí)候想要表達(dá)的代碼也無法表達(dá)，靈活性較差；
過濾+校正方式：對(duì)輸入的內(nèi)容不做處理（可做編碼處理），在輸出的時(shí)候，對(duì)字符串進(jìn)行標(biāo)簽過濾操作，過濾危險(xiǎn)標(biāo)簽，如script style link (改變頁面樣式，如display等) iframe frame onerror等,最后閉合標(biāo)簽，保留需要的字符串，這種方式可以阻止XSS攻擊,按需配置，靈活性較好。

總結(jié)： 理解了XSS攻擊的原理，手段，最最重要的是理解了如何去防御XSS攻擊