最前端

Web 安全

# XSS

XSS (opens new window)(跨网站指令码 Cross-site scripting) 是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言。

XSS 分为三种：反射型，存储型和 DOM-based

# 如何攻击

XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。例如，通过 URL 获取某些参数：

<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div>，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击。

也有另一种场景，比如写了一篇包含攻击代码 <script>alert(1)</script> 的文章，那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击，也可以说是 DOM-based 攻击，并且这种攻击打击面更广。

# 如何防御

# 字符转义

最普遍的做法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义：

function escape(str) {
    str = str.replace(/&/g, '&amp;')
    str = str.replace(/</g, '&lt;')
    str = str.replace(/>/g, '&gt;')
    str = str.replace(/"/g, '&quto;')
    str = str.replace(/'/g, '&#39;')
    str = str.replace(/`/g, '&#96;')
    str = str.replace(/\//g, '&#x2F;')
    return str
}

通过转义可以将攻击代码 <script>alert(1)</script> 变成：

// -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
escape('<script>alert(1)</script>');

对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多，更加推荐使用白名单的方式。

var xss = require('xss');
var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');
// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html);

以上示例使用了 js-xss 来实现。可以看到在输出中保留了 h1 标签且过滤了 script 标签。

# CSP

另外，我们还可以通过 CSP 来尽量减少 XSS 攻击。CSP 本质上也是建立白名单，规定了浏览器只能够执行特定来源的代码。

CSP (opens new window)(内容安全策略 Content Security Policy) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

通常可以通过 HTTP Header 中的 Content-Security-Policy 来开启 CSP：

  • 只允许加载本站资源：

    Content-Security-Policy: default-src 'self'

  • 只允许加载 HTTPS 协议图片：

    Content-Security-Policy: img-src https://*

  • 允许加载任何来源框架：

    Content-Security-Policy: child-src 'none'

除此之外，<meta> 元素也可以被用来配置该策略，例如：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

更多属性可以查看这里 (opens new window)。

# CSRF

CSRF (opens new window)(跨站请求伪造 Cross-site request forgery)，也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。跟 XSS 相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

简单点说，CSRF 就是利用用户的登录态发起恶意请求。

# 如何攻击

假设网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口：

<img src="http://www.domain.com/xxx?comment='attack'" />

如果接口是 POST 提交的，就相对麻烦点，需要用表单来提交接口：

<form action="http://www.domain.com/xxx" id="CSRF" method="post">
    <input name="comment" value="attack" type="hidden" />
</form>

# 如何防御

防范 CSRF 可以遵循以下几种规则：

  • GET 请求不对数据进行修改
  • 阻止不明外域的访问
    • 同源检测，阻止第三方网站请求接口
    • Samesite Cookie，不让第三方网站访问到用户 Cookie
  • 提交时要求附加本域才能获取的信息
    • CSRF Token
    • 双重 Cookie 验证

SameSite：

可以对 Cookie 设置 SameSite 属性。该属性设置 Cookie 不随着跨域请求发送，该属性可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

验证 Referer：

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

Token：

服务器下发一个随机 Token（算法不能复杂），每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

# 点击劫持

# 如何攻击

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌入自己的网页中，并将 iframe 设置为透明，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的 iframe 页面。

# 防御方法

还是让后端大佬解决，使用一个 HTTP 响应头 —— X-Frame-Options。X-Frame-Options 可以说是为了解决点击劫持而生的，它有三个可选的值：

  1. DENY: 浏览器会拒绝当前页面加载任何 frame 页面
  2. SAMEORIGIN: frame 页面的地址只能为同源域名下的页面
  3. ALLOW-FROM origin: 允许 frame加载的页面地址（这是一个被弃用的指令，不再适用于现代浏览器 - MDN (opens new window)）

# window.opener

# 如何攻击

window.opener 返回打开当前窗口的那个窗口的引用，例如：在 A 页面中打开了 B 页面，B 页面的 window.opener 返回 A 页面的 window。

一般来说，打开同源的页面，不会有什么问题。但对于跨域的外部链接来说，存在一个被钓鱼的风险。比如你正在浏览购物网站，从当前网页打开了某个外部链接，在打开的外部页面，可以通过 window.opener.location 改写来源站点的地址。利用这一点，将来源站点改写到钓鱼站点页面上，例如跳转到伪造的高仿购物页面，当再回到购物页面的时候，是很难发现购物网站的地址已经被修改了的，这个时候你的账号就存在被钓鱼的可能了。

通过以下方式跳转链接，新页面的 window.opener 会保留原父页面 window 对象的引用：

  • 通过 window.open 打开新页面，并且该 API 第 3 个参数未设置 noopener（参考文档 (opens new window)）
  • 通过 a 标签打开页面，并且该 a 标签设置了 target="_blank" 及 rel="opener" 属性

# 如何防御

  1. 通过 a 标签跳转链接，不同时设置 target="_blank"、rel="opener" 属性
  2. 通过 window.open 跳转链接，第 3 个参数 windowFeatures (opens new window) 设置 noopener 属性
  3. HTTP 响应头 Cross-Origin-Opener-Policy (opens new window) 的值设置为 same-origin
  4. 将外链替换为内部的跳转连接服务，跳转时先跳到内部地址，再由服务器 redirect 到外链

# 中间人攻击

# 如何攻击

中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息。中间人攻击的本质是客户端和服务端之间的认证和信任问题。

# 如何防御

对称加密、非对称加密、混合加密技术都没有有效防止中间人攻击，因为中间人可以截取首次传输的密钥并偷天换日，而客户端或服务端并无法得知。HTTPS 作为防止中间人攻击的终极手段，引入证书机制解决了客户端和服务端的信任问题，从而较为有效的防止了中间人攻击。

# 密码安全

密码安全虽然大多是后端的事情，但是作为一名优秀的前端程序员也需要熟悉这方面的知识。

加盐：

对于密码存储来说，必然是不能明文存储在数据库中的，否则一旦数据库泄露，会对用户造成很大的损失。并且不建议只对密码单纯通过加密算法加密，因为存在彩虹表的关系。

通常需要对密码加盐，然后进行几次不同加密算法的加密。

// 加盐也就是给原密码添加字符串，增加原密码长度
sha256(sha1(md5(salt + password + salt)));

但是加盐并不能阻止别人盗取账号，只能确保即使数据库泄露，也不会暴露用户的真实密码。一旦攻击者得到了用户的账号，可以通过暴力破解的方式破解密码。对于这种情况，通常使用验证码增加延时或者限制尝试次数的方式。并且一旦用户输入了错误的密码，也不能直接提示用户输错密码，而应该提示账号或密码错误。

# SQL 注入

# 如何攻击

拼接 SQL 时未仔细过滤，黑客可提交畸形数据改变语义。比如查某个文章，提交了这样的数据 id=-1 or 1=1 等。1=1 永远是 true，导致 where 语句永远是 ture。那么查询的结果相当于整张表的内容，攻击者就达到了目的。或者，通过屏幕上的报错提示推测 SQL 语句等。

# 如何防御

  1. 禁止目标网站利用动态拼接字符串的方式访问数据库
  2. 减少不必要的数据库抛出的错误信息
  3. 对数据库的操作赋予严格的权限控制
  4. 净化和过滤掉不必要的 SQL 保留字，比如：where, or, exec 等

# 参考资料

上次更新: 2025/1/24 08:03:38