Web 开发安全 - 防御篇 | 青训营笔记

99 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第10天

一、本节课重点内容

面临错综复杂的网络环境,我们要在了解哪些手段会造成 Web 安全事故之后,本节课将通过第二种「防御者」角色的视角,剖析不同攻击手段的技术细节,帮助大家逐个击破安全漏洞,更好地维护 Web 安全。

课程重点如下所示: 我们可以看到,这些内容与我们之前看到的攻击篇有所对应。

  1. XSS 的防御
  2. 防御 CSRF 的正确姿势
  3. 防御 DoS
  4. 防御 Injection
  5. 防御中间人

二、详细知识点介绍

防御XSS攻击的现成工具:

  1. 前端
  • 主流框架默认防御XSS
  • google-closure-library
  1. 服务端(Node)
  • DOMPurify

如果必须动态生成DOM,则要记住以下几点:

  1. 直接调用这个API,我们需要对string进行转义; image.png
  2. 如果允许用户上传svg文件,我们也要对图片文件进行扫描,因为svg中可以被插入攻击代码; image.png
  3. 如果允许用户自定义文件,我们也要及时的对自定义的内容进行过滤; image.png 同源:两个服务器上的协议、域名、端口号统统一致,我们才叫它们同源; image.png 12不同协议、23不同域名;

Content Security Policy(CSP): CSP

  1. 哪些源(域名)被认为是安全的
  2. 来自安全源的脚本可以执行,否则直接抛错
  3. 对eval + inline script禁止的

CSRF的防御:请求头部

  • if伪造请求=异常来源
  • then限制请求来源>限制伪造请求
  • 0rigin-同源请求中,GET + HEAD不发送
  • Referer

CSRF——token:

除了Origin + Referrer,其他判断[请求来自于合法来源]的方式: 先有页面,后有请求:

  1. if (请求来自合法页面)
  2. then (服务器接收过页面请求)
  3. then (服务器可以标识) 原理: image.png

CSRF——iframe 攻击: image.png 从根源上解决CSRF冲击的方式: image.png 具体samesite的含义: image.png SameSite vs CORS: image.png 防御模式: image.png Injection beyond SQL:一些防御措施的列举如下所示 image.png Regex DoS:

  • Code Review (禁止/(ab*)+/)
  • 代码扫描+正则性能测试
  • 禁止-用户提供的使用正则 DDOS: image.png

中间人:传输层的防御方式 image.png HTTP的一些特性: image.png

image.png 数字签名:私钥生成自己的数字签名,公钥对其进行验证; image.png image.png 证书的更新迭代比较先进,可以较放心的进行证书的使用: image.png 协议升级: image.png

Feature Policy/Pemission Policy: 一个源(页面)下,可以使用哪些功能

  1. camera
  2. microphone
  3. autop Lay

三、总结

AAnpminstall除了带来了黑洞,还可以带来漏洞 安全无小事,本节课我学会了基础的web安全的防御,对应上节课的攻击学习,有了自己的理解 对我们来说:使用的依赖(npm package,甚至是NodeJS)可能成为最薄弱的一环

  • left- -pad事件
  • eslint-scope 事件
  • event-stream事件 我们要保持学习心态,不断地挖掘并学习相关知识,保证我们的知识、隐私、数据不会被不法的篡改与泄露。