在 Web 开发中,安全性一直是一个重点。在前后端分离开发的情况下,前端应该怎样做好防范呢?其中一个可行的方式就是使用 CSRF Token,而使用 npm 包 express-csurf
则可以提供一个便捷的解决方案。
什么是 CSRF Token?
在 Web 开发中,为了保证用户账号的安全,通常需要将用户的 Cookies 存储在客户端浏览器中。此时如果网页被篡改,用户的 Cookies 将会被黑客基于浏览器的同源策略窃取,从而实现 CSRF(Cross-site request forgery)攻击。
为了避免 CSRF 攻击,我们可以通过向表单或 AJAX 请求中加入一个随机值(CSRF Token)来辨别合法请求(容易得到正确的 csrf token) 和非法请求(csrf token 不存在,或 csrf token 不正确)。
express-csurf 使用教程
express-csurf
是一个为 Express 框架提供 CSRF 防护功能的 npm 包。可以通过以下步骤来使用它。
第一步:安装依赖项
npm install --save csurf
第二步:配置
在 Express 程序中配置 express-csurf
,将 CSRF Token 加入表单和 AJAX 请求中。
const csrf = require('csurf'); app.use(csrf()); // 全局给 Response 对象加上 csrftoken() 方法 app.use((req, res, next) => { res.locals.csrftoken = req.csrfToken(); next(); });
然后,在请求中使用 csrftoken()
方法即可获取 CSRF Token。
第三步:防护表单
通过 csurf
的防护,可以辨别 CSRF 攻击。
app.post('/form', (req, res) => { res.send('success!'); });
第四步:防护 AJAX 请求
为了保护之前的请求,我们不只是需要在表单中加入 CSRF Token,还需要在 AJAX 请求中带上 CSRF Token。
-- -------------------- ---- ------- ----- ----- - --------------------------------------------- -------- ---- -------- ----- ------- ----- - -------- ------ -- --- -- -------- -------- ------ - ------------------ -- ------ -------- ----- ----------- ------------ - ----------------- - ---
总结
express-csurf
是一个方便易用的 CSRF 防护 npm 包。在实现前后端分离的 Web 开发中,安全性是一个重点。通过使用 CSRF Token 来防止 CSRF 攻击,我们能够让网站更加安全。才华横溢的前端工程师们也应该关注安全性,在他们完美平衡美学和安全性方面提供帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005602d81e8991b448de5db