前端笔记(三) 前端怎样提防XSS，浅谈JS中种种宽高属性

2019年8月24日 159次阅读来源: RetroAstro

前端怎样提防XSS

XSS ( Cross Site Scripting )

跨站剧本进击, 是一种进击者向用户的浏览器注入歹意代码剧本的进击。

XSS进击的品种：

延续型XSS进击

进击者输入歹意代码并经由历程批评或表单提交等体式格局将其提交到网站, 而网站的后端却对用户的数据不做任何处置惩罚进而直接存入数据库, 当其他用户接见该网站而且须要要求网站的批评数据时网站后端直接从数据库中掏出带有歹意代码的数据返回给用户页面此时用户就会遭受到进击, 比方while { alert( ‘Attack!’ ) } 如许的歹意剧本。

反射型XSS进击

用户向网站发送get要求某个网页的url, 但用户点开的是带进击的url类似于:

/* http://xxx?name=<script>alert('233')</script>   <-- evil url
   ctx.render('index.html', { name:name });
   --index.html--
   <html>
   <div>${name}</div>  
   </html>
*/

基于DOM的XSS进击

它是反射型进击的一种, 此时服务器返回的页面是一般的, 只是页面在实行JS时会将歹意剧本一并实行。

/*
http://xxx?name=<script>alert('233')</script>     <-- evil url
--index.js-- 
var name = getparm('name');
document.querySelector('div').innerHTML = name;
*/

防备XSS注入的一些要领：

对用户输入举行转义

    function htmlEncode(html) {
        var sub = document.createElement('div');
        sub.textContent != null ? sub.textContent = html : sub.innerText = html;
        var output = sub.innerHTML;
        sub = null;
        return output;
    }

//既然有转义固然也有反转义的要领

function htmlDecode(text) {
    var sub = document.createElement('div');
    sub.innerHTML = text;
    var output = sub.textContent || sub.innerText;
    sub = null;
    return output;
}

对数据举行编码

    /*
     @ escape()
     
     @ encodeURI()
     
     @ encodeURIComponent()
     -- 对应的解码要领 --
     @ unescape()
     
     @ unencodeURI()
     
     @ unencodeURIComponent()
    */

CSP( Content Security Policy )

CSP的本质就是白名单轨制, 开发者明白关照客户端, 哪些外部资本能够加载和实行, 等同于供应白名单。它的完成和实行悉数由浏览器完成, 开发者只需供应设置, CSP大大增强了网页的安全性。

有两种要领能够启用CSP, 一种是经由历程设置HTTP头信息的Content-Security-Policy 字段, 别的一种是经由历程网页中的<meta> 标签。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

CSP经由历程设置限定选项来供应我们所需的白名单：

/*
 @ script-src: 外部剧本
 
 @ style-src: 样式表
 
 @ img-src: 图象
 
 @ media-src: 媒体文件 ( 音频和视频 )
 
 @ font-src: 字体文件
 
 @ object-src: 插件 ( 比方Flash )
 
 @ child-src: 框架
 
 @ connect-src: HTTP 衔接 ( 经由历程 XHR、WebSockets、EventSource等 )
 
 ......
*/

default-src 用来设置上面每一个选项的默许值:

Content-Security-Policy: default-src 'self'     // 限定一切的外部资本, 只能从当前域名加载

其他的一些限定：

/*
 @ block-all-mixed-content：HTTPS 网页不得加载 HTTP 资本（浏览器已默许开启）
 
 @ upgrade-insecure-requests：自动将网页上一切加载外部资本的 HTTP 链接换成 HTTPS 协定
 
 @ sandbox：浏览器行动的限定，比方不能有弹出窗口等
*/

运用report-uri 还能够纪录XSS注入的行动并报告给指定的url：

Content-Security-Policy: default-src 'self'; ...; report-uri https://retroastro.com;

设置多个值, 用空格分开：

Content-Security-Policy: script-src 'self' https://host1.com https://host2.com

script-src 中的一些特别值：

/*
 @ nonce: 每次HTTP回应给出一个受权token，页面内嵌剧本必须有这个token，才会实行。
 
 @ hash: 列出许可实行的剧本代码的Hash值，页面内嵌剧本的哈希值只要符合的情况下，才实行。
*/

 /* nonce值的例子：
 
    Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

    <script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
        // some code
    </script>
  
    设置的nonce值要与内嵌剧本中的nonce相称才会实行代码
 */

/*  hash值的例子：

    Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
    
    <script> //somecode </script>
    
    服务器给出一个许可实行代码片断的hash值, 对应的代码才会实行, 由于hash值相称。
*/

JavaScript的种种宽高属性

网上看到有一篇博客讲的挺好挺周全的, 有须要的能够去看看：

戳这里看JS中的种种宽高图解

本身写的一个小demo

场景：完成bilibili右边导航栏的切换导航结果。


    // HTML
    <main>
        <div class="container">
            <div class="part">Live</div>
            <div class="part">Comics</div>
            <div class="part">Drama</div>
            <div class="part">Native</div>
            <div class="part">Music</div>
            <div class="part">Dance</div>
            <div class="part">Game</div>
            <div class="part">Science</div>
            <div class="part">Life</div>
            <div class="part">Kichiku</div>
            <div class="part">Advertise</div>
            <div class="part">Entertain</div>
            <div class="part">Fashion</div>
            <div class="part">TVshows</div>
            <div class="part">Film</div>
            <div class="part">Movies</div>
        </div>
    </main>
    <aside class="elevator-module">
        <div class="nav-list">
            <div class="item active" data-id=0>直播</div>
            <div class="item" data-id=1>动画</div>
            <div class="item" data-id=2>番剧</div>
            <div class="item" data-id="3">国创</div>
            <div class="item" data-id="4">音乐</div>
            <div class="item" data-id="5">跳舞</div>
            <div class="item" data-id="6">游戏</div>
            <div class="item" data-id="7">科技</div>
            <div class="item" data-id="8">生涯</div>
            <div class="item" data-id="9">鬼畜</div>
            <div class="item" data-id="10">广告</div>
            <div class="item" data-id="11">文娱</div>
            <div class="item" data-id="12">时髦</div>
            <div class="item" data-id="13">TV剧</div>
            <div class="item" data-id="14">影视</div>
            <div class="item" data-id="15">影戏</div>
        </div>
        <div class="s-line"></div>
        <div class="back-top">
            <div class="circle"></div>
        </div>
    </aside>

    // CSS
    .elevator-module{
        position:fixed;
        top:20px;
        left:50%;
        margin-left:590px;
        transition:all .4s ease;
        z-index:10;
    }
    .elevator-module .nav-list{
        position:relative;
        background-color:#f6f9fa;
        border:1px solid #e5e9ef;
        overflow:hidden;
        border-radius:4px;
    }
    .elevator-module .nav-list .item{
        width:48px;
        height:32px;
        line-height:32px;
        text-align:center;
        transition:all .3s;
        cursor:pointer;
    }
    .elevator-module .nav-list .item.on, .elevator-module .nav-list .item:hover{
        background-color:#00a1d6;
        color:#fff;
    }
    .nav-list .item.active{
        color:#fff;
        background:#00a1d6;
    }
    .elevator-module .s-line{
        position:relative;
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;
        height:9px;
        width:30px;
        margin:0 auto;
    }
    .elevator-module .back-top:hover{
        background-color:#00a1d6;
        border-color:#00a1d6;
    }
    .elevator-module .back-top{
        position:relative;
        display:block;
        cursor:pointer;
        height:50px;
        background-color:#f6f9fa;
        overflow:hidden;
        border: 1px solid #e5e9ef;
        border-radius:4px;
        text-align: center;
    }
    .circle{
        display:inline-block;
        width:30px;
        height:30px;
        margin-top:10px;
        border-radius:50%;
        background:#ffafc9;
    }
    .part{
        width:800px;
        height:600px;
        margin:20px auto;
        background:#00a1d6;
        text-align:center;
        line-height:600px;
        font-size:13em;
        font-family:Comic Sans MS;
        color:#fff;
        font-weight:700;
        border-radius:4px;
    }
    .container{
        width:1160px;
        margin:0 auto;
        position:relative;
    }

    // JavaScript
    var ElevatorModule = {
        init() {
            this.scrollEvent();
        },
        scrollEvent() {
    
            var elevator = document.querySelector('.elevator-module');
            var navList = document.querySelector('.nav-list');
            var items = document.querySelectorAll('.nav-list .item');
            var modules = document.querySelectorAll('.part');
            var backtop = document.querySelector('.back-top');
    
            window.addEventListener('scroll', slipper);
            navList.addEventListener('click', moveTo);
            backtop.addEventListener('click', fly);
    
    
            function slipper() {
    
                for ( var item of items ) {
    
                    var rect = item.getBoundingClientRect();
    
                    var scrollTop = document.documentElement.scrollTop;
    
                    var item_top = rect.top + scrollTop; //猎取右边导航每一个分区上方到页面最顶部的间隔
    
                    var fetch = getLocation();
    
                    var id = item.getAttribute('data-id');
    
                    if ( item_top >= fetch[id] - 100 ) {  //移到哪一个分区右边的hover就停止在哪
    
                        items.forEach((el) => {
                            el.classList.remove('active'); 
                        })
    
                        item.classList.add('active');
    
                    }
    
                }
    
            }
    
            var flag = true;
    
            //定位到指定分区
            function moveTo() {
    
                var e = window.event;
    
                items.forEach((item) => {
                    item.classList.remove('active');
                })
    
                if ( e.target && e.target.nodeName == 'DIV' ) {
    
                    var id = e.target.getAttribute('data-id');
    
                    e.target.classList.add('active');
    
                    var fetch = getLocation();
    
                    if ( flag ) {
    
                        AnimationFrame(fetch[id]);
    
                        id ? flag = false : flag = true; 
                        //设置撙节结果, 即在活动的历程当中不许可再次触发AnimationFrame函数
    
                    }
    
                }
    
            }
            //scrollTop过渡
            function AnimationFrame(future_top) {
    
                let current_top = document.documentElement.scrollTop;
    
                var timer = setInterval( () => {
    
                    if ( current_top > future_top ) {
    
                        current_top -= 60;
                        document.documentElement.scrollTop = current_top;
    
                    } else if ( current_top < future_top ) {
    
                        current_top += 60;
                        document.documentElement.scrollTop = current_top;
    
                    }
                    
                    if ( current_top >= future_top - 30 && current_top <= future_top + 30 ) { 
                         //当移动到指定的范围内时直接定位到对应的位置
                      
                        document.documentElement.scrollTop = future_top;
                        clearInterval(timer);
                        flag = true;
    
                    }
                },10)
            }
            //猎取pageY
            function getLocation() {
    
                var arr = [];
    
                modules.forEach((module) => {
                    var thing = pageY(module);
                    arr.push(thing);
                })
    
                return arr;
    
            }
            //猎取页面中心每一个分块上方到页面最顶部的间隔
            function pageY(el) {
    
                if ( el.offsetParent ) {
    
                    return el.offsetTop + pageY(el.offsetParent);
    
                } else {
    
                    return el.offsetTop;
    
                }
    
            }
            //腻滑返回页面顶部
            function fly() {
    
                cancelAnimationFrame(timer);
    
                var timer = requestAnimationFrame( function fn() {
    
                    var top = window.pageYOffset;
    
                    if ( top > 0 ) {
    
                        document.documentElement.scrollTop = top - 80;
    
                        timer = requestAnimationFrame(fn);
    
                    } else {
                        cancelAnimationFrame(timer);
                    }
                })
    
            }
    
        }
    }
    ElevatorModule.init();

PS：

一些须要注重的罕见js事宜属性：

event.stopPropagation()

停止事宜在流传历程的捕捉、目的处置惩罚或起泡阶段进一步流传。挪用该要领后，该节点上处置惩罚该事宜的处置惩罚顺序将被挪用，事宜不再被分派到其他节点。

event.preventDefault()

该要领将关照 Web 浏览器不要实行与事宜关联的默许行动（假如存在如许的行动）。

不管鼠标指针穿过被选元素或其子元素，都邑触发 mouseover 事宜。对应mouseout
只要在鼠标指针穿过被选元素时，才会触发 mouseenter 事宜。对应mouseleave

参考文章：

https://www.cnblogs.com/caizh… 　XSS

https://www.cnblogs.com/zzgbl… 　转义要领

http://www.ruanyifeng.com/blo… 　　CSP

    原文作者：RetroAstro
    原文地址: https://segmentfault.com/a/1190000013805259
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

前端怎样提防XSS

XSS ( Cross Site Scripting )

对用户输入举行转义

对数据举行编码

CSP( Content Security Policy )

JavaScript的种种宽高属性

本身写的一个小demo