XSS攻击防范：从入门到精通
XSS攻击
- 什么是XSS攻击
- 演示xss攻击
- 防范xss攻击
- HTML转义
- 使用textContent
- 加入正则进行输入验证
- 其实波煮之前是没有听过xss攻击这个事情的，或者听过也不知道它对于前端的意义是什么，直到被字节面试官拷打之后才明白防范XSS攻击的重要性，接下来就是我的一些学习心得
什么是XSS攻击
- XSS（Cross-Site Scripting，跨站脚本攻击）是攻击者向 Web 页面注入恶意脚本、并在用户浏览器内执行的一类代码注入攻击。利用 XSS，攻击者可窃取会话 Cookie、篡改页面内容、记录键盘输入、执行钓鱼或进一步传播恶意代码，从而破坏数据机密性、完整性与用户可用性。根据攻击脚本注入与触发方式的不同，XSS 通常分为反射型、存储型与 DOM 型三类。
演示xss攻击
-
这里我实现了一个评论区功能，但存在严重的安全漏洞。它使用
innerHTML直接渲染用户输入的评论内容，这会导致XSS（跨站脚本）攻击风险，恶意用户可以通过输入包含JavaScript代码的评论来执行任意脚本。 -
这里我在输入框中输入这段代码
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtJrdwkh3yaJAb9YKi9T5BoxOYmUltcldfKQ&s" alt="" style=" position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; object-fit: cover; " /> -
这段代码作用是插入一张小丑图片然后显示在页面最上层。然后只要进入这个页面的用户都只能看到一张小丑图片，这就是所谓的
xss攻击
防范xss攻击
HTML转义
- HTML 转义是防范 XSS 最基础、最有效的输出侧防御手段：
把用户数据当作普通文本而非可执行代码来展示，从而阻断恶意脚本的解析与执行。 - 这个escapeHtml函数是一个HTML转义函数，它的主要功能是防止XSS攻击，它将HTML中的特殊字符转换为对应的HTML实体，这样浏览器就不会将这些字符解析为HTML标签或属性，而是作为普通文本显示。
function escapeHtml(unsafe) {return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");}
使用textContent
- 使用
textContent代替innerHTML，避免直接执行HTML代码 innerHTML代码：会造成xss攻击，如下：
comments.forEach((comment) => {const commentElement = document.createElement("div");commentElement.innerHTML = `<strong>${comment.user}</strong>: ${comment.content}`;commentContainer.appendChild(commentElement);});
- 使用
textContent可以防止xss攻击，如下：
comments.forEach((comment) => {const commentElement = document.createElement("div");commentElement.className = "comment-item";// 创建用户名字元素const userNameElement = document.createElement("div");userNameElement.className = "user-name";userNameElement.textContent = comment.user; // 使用textContent而不是innerHTML// 创建评论内容元素const contentElement = document.createElement("div");contentElement.className = "comment-content";contentElement.textContent = comment.content; // 使用textContent而不是innerHTMLcommentElement.appendChild(userNameElement);commentElement.appendChild(contentElement);commentContainer.appendChild(commentElement);});
加入正则进行输入验证
- 在用户输入时就进行处理，如果时不安全内容就禁止用户提交即可
