前端安全性

xss(Cross Site Scripting)(跨站脚本攻击)

• 背景 1.通过找到将恶意脚本注入网页的方法，攻击者可以获得对敏感页面内容，会话cookie以及浏览器代表用户维护的各种其他信息的提升的访问权限。跨站点脚本攻击是代码注入的一种情况。
• xss攻击类型
  1. 反射型: url参数直接注入
  2. 存储型: 存储到DB后读取时注入
• XSS攻击注入点
  1. HTML节点内容

     <div>
       <script>document.cookie</script>
     </div>
     

  2. HTML属性
  3. JavaScript代码

    <script>
      var data = "hello"; alert(1); "";
    </script>
  

  4. 富文本
• XSS防御
  1. 转义"<>";转义引号("&quto"):针对html和属性;富文本按白名单保留部分标签和属性
  2. CSP(Content Security Policy):内容安全策略, 用于指定那些内容可执行。 2.1. 为了使CSP可用,需要配置网络服务器 Content-security-Policy,meta 元素也可以用来配置该策略

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

  3. 设置cookie httpOnly 属性
  

CSRF(Cross Site Request Forgy) 跨站请求伪造

• 攻击原理

1. 用户登录A网站;2.网站确认身份;3.B网站页面向A网站发起请求(带A网站身份cookie)

• 攻击危害

1. 盗取用户资金(转账和消费)
2. 冒充用户发帖背锅

• CSRF防御

1. 充分利用好cookie的SameSite属性 SameSite属性用来限制第三方Cookie，从而减少安全风险
   • SameSite=Strict:完全禁止第三方Cookie,跨站点时，任何情况都不会发送cookie.(只有网页的URL与请求目标一致，才会带上Cookie)
   • SameSite=Lax：导航到目标网址的GET请求。链接、预加载、get表单会带。
   • SameSite= None:前提必须同时设置Secure属性，cookie 只能通过Https协议发送。
2. 验证请求的来源站点(referer是HTTP请求头中一个字段，记录了该HTTP请求的来源地址)
3. 服务器策略优先判断Origin,请求头没有包含Origin属性，在根据实际情况判断使用referer属性
4. CSRF Token
5. 验证码(体验不好)

Cookies特性

1. 前端数据存储
2. 后端通过http头设置
3. 请求时通过http头传给后端
4. 前端可读写
5. 遵守同源策略

• 登录凭证

1. 用户
2. 用户ID+签名(签名防篡改):签名还是明文的，加密是密文的
3. SessionId
4. token

前端点击劫持

• 原理

1. 通过iframe设置opacity:0覆盖到上面

• 防御

1. javascript禁止内嵌
2. X-Frame-Options禁止内嵌
   • X-Frame-Options:deny:表示该页面不允许在frame中展示，即使相同域名的页面嵌套也不允许
   • X-Frame-Options:sameorigin:表示页面可以在相同域名页面的frame中展示
   • X-Frame-Options:allow-from-uri:表示页面可以在指定来源的frame中展示

Http传输安全

• 中间人攻击 浏览器<————>加密<————>中间人<————>加密<————>服务器
• 如何确定服务器身份