树酱的前端知识体系构建（下）

前沿：这周慢更了，但树酱还是来了，上周分享了他关于前端的知识体系构建上篇传送门，主要包括Vue、Node、前端工程化模块、性能优化等四大模块，这篇主要跟你聊聊关于安全、设计模式、微前端等方面的知识体系构建

1 安全

前端安全问题有哪些呢？比如发生在生浏览器、单页面应用中的，常见的前端安全攻击有：XSS(跨站脚本攻击)、CSRF（跨站请求伪造）、站点劫持等。正因为这些漏洞的存在，我们才需要根据不同的安全问题制定安全策略应对措施

1.1 XSS

1.1.1 关于XSS

XSS 全称叫 Cross Site Script，顾名思义就是跨站脚本攻击，XSS攻击是通过在网站注入恶意的脚本，然后借助脚本改变原有的网页，当用户访问网页时，对浏览器一种控制和劫持，XSS攻击主要分为以下几种类型

• 反射型XSS：攻击者通过特定的方式来诱惑受害者去访问一个包含恶意代码的URL
• 存储型XSS：将恶意脚本放到服务器中，下次只要受害者浏览包含此恶意脚本的页面就会自动执行恶意代码
• 基于DOM型XSS：客户端的js对页面dom节点进行动态的操作，比如插入、修改页面的内容
• SQL注入：通过客户端的输入把SQL命令注入到一个应用的数据库中，从而执行恶意的SQL语句

1.1.2 防范措施

针对XSS安全问题，我们主要有以下几点防范措施

• Cookie设置HttpOnly 因为浏览器禁止页面javascript访问带HttpOnly属性的Cookie，因为XSS攻击本质上可以通过恶意脚本获取cookie的信息，然后发起cookie劫持攻击，模拟用户的登录，导致用户权限和信息暴露 除了httpOnly，还有SecureOnly（只允许https请求读取）和 HostOnly （只允许主机域名与domain一致）
• 检查输入内容 对用户输入的所有内容都进行过滤和检查
  • 比如是否包含一些特殊字符、<,>等，将它们转义为实体字符
  • 将不可信数据作为 URL 参数值时需要对参数进行 URL 编码（encodeURIComponent）