es6 使用 cure53/DOMPurify 来防止xss 攻击

拼搏的小浣熊

已于 2023-06-15 17:08:47 修改

阅读量1.5k

点赞数

文章标签： es6 javascript xss

于 2019-12-17 22:14:44 首次发布

本文链接：https://blog.csdn.net/qq_44891434/article/details/103588791

版权

es6 使用 cure53/DOMPurify 来防止xss 攻击

	<!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>
        使用 cure53/DOMPurify 来防止xss 攻击
    </title>
</head>
<body>
     <div class="container">
         <form action="" class="add-comment">
             <textarea name="" id="" cols="30" rows="10" class="comment-text"></textarea>
             <button>Post Comment</button>
         </form>
         <div class="comment"></div>
     </div>
     <script>
         const addCommentForm = document.querySelector('add-comment');
         const textarea = document.querySelector('.comment-text');
         const commentDiv = document.querySelector('.comment')
         const user = 'zhang';
        function sanitize(string,...values){
            const dirty = strings.reduce((pre,curr,i) => `${pre} ${curr} ${values[i] || ' '},' '`)
        }


         addCommentForm.addEventListener('sumbit',function(event){
             event.preventDefault();//Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，那么它默认的动作也不要做
             //（因为默认是要做的）。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。
             const newComment = textarea.value.trim();//去除字符串的头尾空格:
             if(newComment){
                 commentDiv.innerHTML = sanitize`
                    <div class="comment-header">${user}</div>
                    <div class="comment-body">${textarea}</div>
                 `
             }
             textarea.value = newComment;
         })
     </script>
</body>
</html>