常见前端安全知识总结

云嘤
335 阅读5分钟

主要总结Web安全中浏览器安全策略、常见攻击方式和防御手段等。

1、web安全策略

（1）同源策略

  • 同源含义：host（主机名）、schema（协议）、port（端口）相同。
  • 具体内容
    • iframe
      • 可嵌入不同源的url，取决于CSP（内容安全策略）或者X-Frame-Options配置
      • 但不可读取内容，获取不了iframe的document
    • CSS
      • 可使用<link>或者@import加载不同源的CSS资源
      • 要求是需要资源需要使用正确的Content-Type
    • forms
      • action地址可跨域
    • images
      • 可以嵌入不同源的图像
      • 但读取跨源图像是不允许的
    • multimedia
      • 同images一样，可使用<video><audio>
    • script
      • 可使用<script>引入不同源资源
      • 不允许使用fetch API等
  • 参考内容

（2）CORS: Cross-Origin-Resources-Share 跨源资源共享

  • 含义：根据请求类型判断是否需要预检，预检通过响应头确定是否可请求。
  • 请求类型
    • 简单请求
      • 只能是get、post、head其中一种
      • 允许的请求头字段
        • 被用户代理自动设置的首部字段
        • Fetch 规范中定义为禁用首部名称的其他名称
        • 允许认为设置Fetch规范CORS安全首部字段，比如Accept,Accept-Language等
      • Content-Type允许值范围：text/plain,multipart/form-data,application/x-www-form-urlencoded
      • 请求中没有使用ReadableStream对象
    • 预检请求
      • 当请求不符合简单请求类型
      • 浏览器发起options请求，该请求的请求头会包含两个字段
        • Access-Control-Request-Method，该请求头的值为实际请求的请求方法
        • Access-control-Request-Headers，该请求头的值为需要检查的实际请求的请求头字段
      • 服务端对请求头进行检查，并通过相应头通知浏览器是否可以发起实际请求
        • Access-Control-Allow-Origin，允许请求的来源
        • Access-Control-Allow-Methods，允许请求的请求方法
        • Access-Control-Allow-Headers，允许请求的请求头字段
        • Access-Control-Max-Age, 预检通过的有效期
      • 如果通过了预检，则发起实际请求，如果没有通过预检请求，则终止请求
  • 参考内容

（3）CSP：Content Security Policy 内容安全策略

  • 含义：通过设置安全策略，限制页面内iframe、image等资源请求行为
  • 应对的威胁：XSS、数据包嗅探攻击
  • 设置方式
    • 相应头：Content-Security-Policy
    • head meta标签：http-equiv="Content-Security-Policy"
  • 常用策略配置：base-uri, child-src, connect-src, default-src, font-src, form-action, frame-ancestor, frame-src, img-src, media-src, object-src, report-uri, script-src, style-src
  • 示例：default 'self' *.trusted.com;img-src *;media-src media.com media2.com;
  • 参考内容

2、常见攻击和防御

（1）XSS

  • 含义：Cross-Site-Script 跨站脚本攻击，指的是执行的脚本不是本站原有的脚本而导致的攻击方式。

  • 分类，根据攻击方式可以分为三种类型：

    • 反射型XSS：通过输入立即执行起效，比如url中输入
    • 存储型XSS：将攻击脚本持久性存储达到攻击其他用户
    • DOM型XSS：一般也是反射型XSS，但作用于DOM，而不是服务端

  • 防御，从攻击方式可以看得出来，一般攻击的方式都是先有输入，才能进行攻击，所以从入口控制，即可防御攻击。

    • XSS-Filter：对输入的内容做严格的校验
    • 输出时过滤：编码转换内容，使用innerText，特别需要注意富文本编辑器场景下的XSS
    • 不要将不受信任的数据插入在页面元素中：script内、HTML注释、属性名称、标签名称、style中
    • HTML内容经编码后插入，比如：&#x27;, &amp; 等
    • HTML属性编码：针对空格，%，*，+，-，/, :, <, =, >, ^, |
    • JavaScript编码：除了字母数字外，使用\xHH格式对所有少于256个的字符进行编码
    • JSON处理：确保Content-Type为application/json
    • CSS编码：确保仅支持http开头而不是javascript开头的表达式，其他跟JavaScript编码规则一致
    • URL编码：除数字字母外，使用%HH编码格式对ASCII值小于256的字符进行编码
    • 富文本处理库：HtmlSanitizer, DomPurify
    • 注意href中的javascript:以及iframe的src
    • 使用http-only cookie
    • 使用CSP
    • 使用自动编码的模板系统
    • 使用现代JS框架
      • 需要自行把控的风险：
        • Angular 2+：bypassSecurityTrust
        • React：dangerouslySetInnerHTML
        • Svelte：{@html...}
        • Vue2+: v-html

  • 参考内容

(2)CSRF: 跨站请求伪造 Cross-Site-Request-Forgery

  • 含义：不校验请求来源，导致攻击者可在第三方站点发起HTTP请求
  • 例子：构造一个链接，然后用户点击后被发起某个用户信息修改的请求
  • 防御：
    • 判断用户是否点击了真实的修改按钮
    • 敏感操作添加二次校验交互：验证码、短信、链接等
    • token
  • 防御的本质是：唯一性、来源可信
  • 参考内容

（3）文件上传时的防御手段

  • 校验扩展名
  • 校验文件类型（非扩展名），Content-Type是可以被修改的
  • 修改文件名称
  • 文件名长度限制、字符限制
  • 文件大小限制
  • 只允许已授权用户上传文件
  • 保存文件在不同的服务器上
  • 使用沙箱或防病毒环境执行文件
  • 确保使用的所有库均已安全配置，并keep latest
  • 保护文件上传免受CSRF攻击

3、安全漏洞扫描工具

avatar
文章
阅读
粉丝