前端安全: 如何防止 XSS 攻击?

前端安全: 如何防止 XSS 攻击?

分享简介

今天想分享给大家的是 如何防止 XSS 攻击.
为什么想分享的原因是: 感觉大家对前端安全了解不够, 重视不够.

内容是:

• 什么是 xss, 常见 xss 的类型. 并且通过小游戏来实践.
• 如何去防止 xss 攻击

如何利用 XSS 进行攻击

什么是 XSS 攻击

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

XSS 有哪些类型

• 存储型
• 反射型
• DOM 型

存储型

场景: 用户发表评论, 论坛发帖, 用户私信等

• 攻击者将恶意的代码, 提交到数据库中.
• 后端服务器, 从数据库中获取的内容拼接成 html, 返回给浏览器
• 用户打开页面, 混入其中的恶意代码被浏览器执行.
• 恶意代码获取浏览器端的关键信息发送给攻击者的服务器

<% @post.comments.each.do |_c| %>
  <%= _c.comment %>
<% end %>

<%= link_to "Personal Website", @user.website %>

反射型

场景: 网站搜索, 分享链接, 恶意邮件等

反射型 XSS 漏洞常见于通过 URL 传递参数的功能。
由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

• 攻击者构造出特殊的 URL，其中包含恶意代码。
• 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
• 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
• 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

http://xxx/search?keyword=<script>alert('XSS');</script>

<input type="text" value="<%= params[:keyword] %>">
<button>搜索<