js 对输入内容做净化处理防止 xss攻击

最新推荐文章于 2024-08-12 19:58:06 发布

tianmeng1999

最新推荐文章于 2024-08-12 19:58:06 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/102897579

版权

JavaScript 专栏收录该内容

184 篇文章 6 订阅

订阅专栏

XSS攻击是什么

通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
盗用cookie，获取敏感信息等

防止 xxs攻击

当你点击获取 textarea 的内容插入 dom结构时 textarea 的内容包含用户插入的js脚本
在这里插入图片描述

阻止方法

关于dompurify

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.min.js"></script>
    <style>
        .add{
            display: block;
            padding: 5px 20px;
            background-color: aquamarine;
            outline: none;
            border-radius: 2px;
            border-width: 1px;
            cursor: pointer
        }
        .textarea{
            width: 300px;
            height: 150px;
        }
        .response{
            width: 300px;
        }
        .res-header{
            color: #2ae2b8;
            padding: 10px 0;
            border-bottom:1px solid gray;
        }
        .res-body{
            margin-top: 10px;
            text-indent: 20px;
        }
    </style>
</head>
<body>
    <div class="com">
        <div>
            <textarea class="textarea" name="" id=""></textarea>
            <button class="add">add</button>
        </div>
        <div class="response"></div>
        
        <!-- <img src="https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png" alt="" onload="alert('attack')"> -->
    </div>
    <script>
        const texta = document.getElementsByClassName('textarea')[0],
            add = document.getElementsByClassName('add')[0],
            response = document.getElementsByClassName('response')[0],
            user = 'Hello';

        function sanitize(strs, ...args){
            const dirty = strs.reduce((prev, curr, i)=> `${prev}${curr}${args[i] || ''} `,'')
            return DOMPurify.sanitize(dirty)
        }

        add.addEventListener('click',function(e){
            e.preventDefault();
            const text = texta.value.trim();
            if(text){
                response.innerHTML = sanitize`
                    <div class="res-header">${user}</div>
                    <div class="res-body">${texta.value}</div>
                `
            }
        },false)
    </script>
</body>
</html>