① 前端程序员必须知道的 Web 漏洞，快来看看
随着互联网的发展，早已经不是仅限于简单的网页或是社交，电商购物、银行转账、企业管理等等。上次看到一个新闻，后台程序员离职后，利用职位之便，每天还不断的给自己转账，转了好多次才被发现，想想这多可怕。或者会窃取重要的商业信息，所以 Web 安全也是非常值得注意的。
什么是 Web 安全？
黑客利用网络操作系统的漏洞和 Web 服务器的 SQL 注入漏洞等，得到 Web 服务器的控制权，轻则篡改、删除、添加数据，重则窃取重要的商业信息、转账等，更严重的就是在网页中植入恶意代码，使网站受到不可预期的侵害。
常见的攻击可分为三类：XSS、CSRF、SQL注入。
Cross Site Scripting 跨站脚本攻击，为了与 CSS 区分，所以简写为 XSS 。
恶意攻击给 Web 页面植入恶意的 Script 代码，当用户浏览该网页的时候，嵌入 Web 里面的 script 代码会被执行，从而达到攻击的效果。
讲直白点，就是恶意攻击者通过在输入框处添加恶意 script 代码，用户浏览网页的时候执行 script 代码，从而达到恶意攻击用户的目的。
1.1、XSS 的危害
1.2、XSS 的攻击类型
发出请求时，XSS代码会出现在 url 中，作为输入提交到服务器端，服务器再返回给浏览器，然后浏览器解析执行 XSS 代码，这一过程像一次反射，所以称之为反射型。
这种类型的攻击，通常是把 XSS 攻击代码放入请求地址的 数据传输部分，如：
提交的 XSS 代码会存储在服务器端，如数据库、内存、文件系统内，下次请求目标页面时不再提交 XSS 代码。
文档型的 XSS 攻击不会经过服务器，作为中间人的角色，在数据传输过程中劫持到网络数据包，然后修改里面的 html 文档。
1.3、XSS 的防御措施
措施1：编码。
对这些数据进行 html entity 编码。客户端和服务器端都需要进行转义编码。
转义后为：
放入上边的代码中，还是会自动解析为上边的代码，所以放到外边。
措施2：过滤。
移除用户上传的 DOM 属性，如上边的 onerror。
移除用户上传的 style、script、iframe 节点。
措施3：利用 CSP
浏览器中的内容安全策略，就是决策浏览器加载哪些资源。
Cross site request forgery 跨站点请求伪造。
攻击者诱导受害者进入第三方网站，向被攻击网站发送跨站请求，利用被攻击者在被攻击网站已经获取的注册凭证，绕过后台的用户验证达到冒充用户对攻击网站进行的某种操作。
CSRF 攻击特点：
2.1、CSRF 的危害
2.2、CSRF 的攻击类型
使用非常简单，只需要一个 http 请求。
比如页面中的一个图片添加链接，还有 iframe、script ，最容易完成 CSFR 攻击，且不易被用户发现，隐蔽性超强。
由于 get 接口是最常见的一种 CSRF 攻击类型，所以很多重要的接口不适用 get 方式，使用 post 一定程度上可以防止 CSRF 攻击。
这种类型的 SCRF 攻击，通常使用的是一个自动提交的表单。简单讲就是伪造一个自动提交的表单，一旦访问页面时，表单就会自动提交。
如：
比起前两个，这个类型的比较少见，链接类型的攻击必须要用户点击链接，才能触发。
通常在论坛中发布的图片嵌入恶意的链接，或以广告的形式诱导用户点击中招。所以我们在邮箱中看到乱七八糟的广告，尽量别点击，防止遇到三方攻击。
伪造一种新型的攻击方式，用户误以为是在网站正常登录，实际上是使用账户和密码登录到了黑客网站，这样黑客可以监听到用户的所有操作，甚至知道用户的账户信息。
2.3、CSRF 的防御措施
措施1：检查 http 头部的 referer 信息
referer 包含在请求头内，表示请求接口的页面来源。
服务端通过检查 referer 信息，发现来源于外域时，就可以拦截请求，通过阻止不明外域的访问，一定程度上可以减少攻击。
措施2：使用一次性令牌
使用一次性令牌做身份识别，黑客是无法通过跨域拿到一次性令牌的，所以服务端可以通过判断是否携带一次性令牌，就可以排除一部分的非法操作者。
措施3：使用验证图片
服务端生成一些文本和数字，在服务端保存这份信息，同时以图片的形式在客户端展现，让用户去合法填写信息，当 CSRF 攻击时，拿不到这个验证码的时候，无法向服务器提供这个信息，导致匹配失败，从而识别它是非法攻击者。
这个应用非常常见，之前登录的时候，需要填写图形验证码。
现在滑动图片验证也非常常见。
SQL 注入，一般发生在注册、评论、添加等，只有有用户输入的地方，就有可能发生 SQL 注入。SQL 注入是一种常见的 Web 安全漏洞，攻击者会利用这个漏洞，可以访问或修改数据，利用潜在的数据库漏洞进行攻击。
所谓SQL注入，就是通过把SQL命令插入到Web 表单 提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将(恶意的)SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符暴出的，这类表单特别容易受到 SQL注入式攻击 .
3.1、SQL 注入危害
任意的账号都可以登录，可以进行任意的操作，粗暴点讲，就是随便来。
3.2、 SQL注入分类
当输入的参数为整数时，则有可能存在数字型漏洞。
当输入参数为字符串时，则可能存在字符型注入漏洞。数字型与字符型注入最大的区别在于：数字型不需要单引号闭合，而字符型一般需要使用单引号来闭合。
字符型注入最关键的是如何闭合 SQL 语句以及注释多余的代码。
其实我觉得 SQL 注入只有两种类型：数字型与字符型。很多人可能会说还有如：Cookie 注入、POST 注入、延时注入等。
的确如此，但这些类型的注入归根结底也是数字型和字符型注入的不同展现形式或者注入的位置不同罢了。
以下是一些常见的注入叫法：
3.3、SQL注入的防范措施
凡是用户输入的地方，我们都应该防止黑客攻击，永远不要相信用户的输入。所以对应的防御措施分别有：
前后端分离之后，前端每天都会接触到很多接口。发送网络请求的时候，有些接口就会使用 get 方法。最常见的传参方式就是，直接在 url 地址后面加参数。
直接采用这种方式传输数据，如果数据被劫持或抓包工具偷走之后，就会直接被人盗取走，特别危险。若是采用接口加密，如下：
上边那个看不懂的一长串符号，正是经过加密的数据。
接口加密就是将接口请求调用中传递的参数进行加密，目的就是为了保证接口请求中传递参数和返回的结果的安全性，一般比较敏感数据，如身份证、电话号码、账号、密码等需要进行加密。
常见的加密方式：
加密方式较多，可以根据自己具体的需要和项目语言选择其中一种。
加密之后的数据更安全，那我们能不能将接口所有的数据都进行加密呢？加密是非常消耗资源的，如果有大批量的数据都进行加密时，返回数据需要的时间就更长，会直接影响用户体验。所以我们进行加密时，只需要对敏感的重要的信息进行加密。
好了我今天的文章就到此结束了，本篇文章没有介绍到的 web 安全，欢迎评论区交流！
② 客户端 前端 后端 服务端 的区别分别是什么
客户端是指开发面向客户的程序，分很多平台，比如Windows 安卓 苹果，还有游戏客户端也算一类。
前端指的是通过浏览器和用户交互的那部分。
后端是在服务器上跑的，一般是管理数据，为前端 客户端提供数据传输的。
服务器端就是后端。
服务端各种安全机制，比如身份验证，这一条的情况在于，有的前端做身份验证就是调用一下接口，获取到类似token字段，自己也不知道是什么意思，就乱丢乱用等。
本质上来说，前端是做不了什么安全措施的，但是，相应的拦截和安全还是要做，因为可以帮后端挡掉很多低质量攻击以及前端自身的用户体验。
客户端是默认支持json的，后端是需要处理的。这点可以引申到，前后端各自传递的数据格式问题。有些前端 null undefined 空串分不清楚，到了后端就各种问题。
③ 前后端接口对接规范（主要前端内容）.md
前后端分离意味着，前后端之间使⽤ JSON 来交流，两个开发团队之间使⽤ API 作为契约进⾏交互。从此，后台选⽤的技术栈不影响前台。当我们决定需要前后端分离时，我们仍然还需要⾯对⼀系列的问题：
RESTful API 统一约束客户端和服务器之间的接口。简化和分离系统架构，使每个模块独立！
REST即表述性状态传递（英文：Representational State Transfer，简称REST）是Roy Fielding博士在2000年他的博士论文中提出来的一种 软件架构 风格。它是一种针对 网络应用 的设计和开发方式，可以降低开发的复杂性，提高系统的可伸缩性。 REST是设计风格而不是标准。 REST通常基于使用 HTTP ，URI，和 XML （ 标准通用标记语言 下的一个子集）以及 HTML （标准通用标记语言下的一个应用）
统一接口约束定义客户端和服务器之间的接口。它简化了分离的结构，使各部分独立发展。
REST要求状态要么被放入资源状态中，要么保存在客户端上。或者换句话说，服务器端不能保持除了单次请求之外的，任何与其通信的客户端的通信状态。 从客户端的每个请求要包含服务器所需要的所有信息。 这样做的最直接的理由就是可伸缩性—— 如果服务器需要保持客户端状态，那么大量的客户端交互会严重影响服务器的内存可用空间（footprint）。
服务器返回信息必须被标记是否可以缓存，如果缓存，客户端可能会重用之前的信息发送请求。
客户端无需关注数据存储，服务器端无需关注用户界面，提高了前后端可移植性。
客户端不关心直接连接到最终服务器还是连接到中间服务器。中间服务器可以通过启用负载平衡和提供共享缓存来提高系统可扩展性。分层系统也可以执行安全策略。
服务器可以通过传输逻辑来临时扩展或定制客户端的功能。
GET https//domain.com/api/{模块名}/{?菜单名}/{接口名}/:param
说明：
被用于获取资源。不允许对服务器上资源做任何修改操作。
示例：
常用于更新资源。通过请求体携带资源发送给服务器。 注意： 在资源ID由客户端而不是由服务器选择的情况下，也可以使用PUT来创建资源。修改成功返回200，创建成功返回201。 建议使用post进行创建新资源。
常用于创建新资源。创建成功通常返回201。
删除资源。
status说明
---------------------------------------------------------------------------分割线-----------------------------------------------------------
请求方式：POST
参数:说明
返回值：
示例1
正确的
错误的
④ 如何处理restful对接口安全性问题
REST (REpresentation State Transfer) 描述了一个架构样式的网络系统，比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中，他是 HTTP 规范的主要编写者之一。REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。Web 应用程序最重要的 REST 原则是，客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知。此外，无状态请求可以由任何可用服务器回答，这十分适合云计算之类的环境。客户端可以缓存数据以改进性能。在服务器端，应用程序状态和功能可以分为各种资源。资源是一个有趣的概念实体，它向客户端公开。资源的例子有:应用程序对象、数据库记录、算法等等。每个资源都使用 URI (Universal Resource Identifier) 得到一个惟一的地址。所有资源都共享统一的界面，以便在客户端和服务器之间传输状态。使用的是标准的 HTTP 方法，比如 GET、PUT、POST 和 DELETE。Hypermedia 是应用程序状态的引擎，资源表示通过超链接互联。另一个重要的 REST 原则是分层系统，这表示组件无法了解它与之交互的中间层以外的组件。通过将系统知识限制在单个层，可以限制整个系统的复杂性，促进了底层的独立性。当REST 架构的约束条件作为一个整体应用时，将生成一个可以扩展到大量客户端的应用程序。它还降低了客户端和服务器之间的交互延迟。统一界面简化了整个系统架构，改进了子系统之间交互的可见性。REST 简化了客户端和服务器的实现。RESTful的实现:RESTful Web 服务与 RPC 样式的 Web 服务了解了什么是什么是REST，我们再看看RESTful的实现。最近，使用 RPC 样式架构构建的基于 SOAP 的 Web 服务成为实现 SOA 最常用的方法。RPC 样式的 Web 服务客户端将一个装满数据的信封(包括方法和参数信息)通过 HTTP 发送到服务器。服务器打开信封并使用传入参数执行指定的方法。方法的结果打包到一个信封并作为响应发回客户端。客户端收到响应并打开信封。每个对象都有自己独特的方法以及仅公开一个 URI 的 RPC 样式 Web 服务，URI 表示单个端点。它忽略 HTTP 的大部分特性且仅支持 POST 方法。由于轻量级以及通过 HTTP 直接传输数据的特性，Web 服务的 RESTful 方法已经成为最常见的替代方法。可以使用各种语言(比如 Java 程序、Perl、Ruby、Python、PHP 和 Javascript[包括 Ajax])实现客户端。RESTful Web 服务通常可以通过自动客户端或代表用户的应用程序访问。但是，这种服务的简便性让用户能够与之直接交互，使用它们的 Web 浏览器构建一个 GET URL 并读取返回的内容。在REST 样式的 Web 服务中，每个资源都有一个地址。资源本身都是方法调用的目标，方法列表对所有资源都是一样的。这些方法都是标准方法，包括 HTTP GET、POST、PUT、DELETE，还可能包括 HEADER 和 OPTIONS。在RPC 样式的架构中，关注点在于方法，而在 REST 样式的架构中，关注点在于资源 -- 将使用标准方法检索并操作信息片段(使用表示的形式)。资源表示形式在表示形式中使用超链接互联。Leonard Richardson 和 Sam Ruby 在他们的着作 RESTful Web Services 中引入了术语 REST-RPC 混合架构。REST-RPC 混合 Web 服务不使用信封包装方法、参数和数据，而是直接通过 HTTP 传输数据，这与 REST 样式的 Web 服务是类似的。但是它不使用标准的 HTTP 方法操作资源。它在 HTTP 请求的 URI 部分存储方法信息。好几个知名的 Web 服务，比如 Yahoo 的 Flickr API 和 del.icio.us API 都使用这种混合架构。RESTful的实现:RESTful Web 服务的 Java 框架有两个 Java 框架可以帮助构建 RESTful Web 服务。erome Louvel 和 Dave Pawson 开发的 Restlet(见 参考资料)是轻量级的。它实现针对各种 RESTful 系统的资源、表示、连接器和媒体类型之类的概念，包括 Web 服务。在 Restlet 框架中，客户端和服务器都是组件。组件通过连接器互相通信。该框架最重要的类是抽象类 Uniform 及其具体的子类 Restlet，该类的子类是专用类，比如 Application、Filter、Finder、Router 和 Route。这些子类能够一起处理验证、过滤、安全、数据转换以及将传入请求路由到相应资源等操作。Resource 类生成客户端的表示形式。JSR-311是 Sun Microsystems 的规范，可以为开发 RESTful Web 服务定义一组 Java API。Jersey是对 JSR-311 的参考实现。JSR-311 提供一组注释，相关类和接口都可以用来将 Java 对象作为 Web 资源展示。该规范假定 HTTP 是底层网络协议。它使用注释提供 URI 和相应资源类之间的清晰映射，以及 HTTP 方法与 Java 对象方法之间的映射。API 支持广泛的 HTTP 实体内容类型，包括 HTML、XML、JSON、GIF、JPG 等。它还将提供所需的插件功能，以允许使用标准方法通过应用程序添加其他类型。RESTful的实现:构建 RESTful Web 服务的多层架构RESTful Web 服务和动态 Web 应用程序在许多方面都是类似的。有时它们提供相同或非常类似的数据和函数，尽管客户端的种类不同。例如，在线电子商务分类网站为用户提供一个浏览器界面，用于搜索、查看和订购产品。如果还提供 Web 服务供公司、零售商甚至个人能够自动订购产品，它将非常有用。与大部分动态 Web 应用程序一样，Web 服务可以从多层架构的关注点分离中受益。业务逻辑和数据可以由自动客户端和 GUI 客户端共享。惟一的不同点在于客户端的本质和中间层的表示层。此外，从数据访问中分离业务逻辑可实现数据库独立性，并为各种类型的数据存储提供插件能力。图1 展示了自动化客户端，包括 Java 和各种语言编写的脚本，这些语言包括 Python、Perl、Ruby、PHP 或命令行工具，比如 curl。在浏览器中运行且作为 RESTful Web 服务消费者运行的 Ajax、Flash、JavaFX、GWT、博客和 wiki 都属于此列，因为它们都代表用户以自动化样式运行。自动化 Web 服务客户端在 Web 层向 Resource Request Handler 发送 HTTP 响应。客户端的无状态请求在头部包含方法信息，即 POST、GET、PUT 和 DELETE，这又将映射到 Resource Request Handler 中资源的相应操作。每个请求都包含所有必需的信息，包括 Resource Request Handler 用来处理请求的凭据。从Web 服务客户端收到请求之后，Resource Request Handler 从业务逻辑层请求服务。Resource Request Handler 确定所有概念性的实体，系统将这些实体作为资源公开，并为每个资源分配一个惟一的 URI。但是，概念性的实体在该层是不存在的。它们存在于业务逻辑层。可以使用 Jersey 或其他框架(比如 Restlet)实现 Resource Request Handler，它应该是轻量级的，将大量职责工作委托给业务层。Ajax 和 RESTful Web 服务本质上是互为补充的。它们都可以利用大量 Web 技术和标准，比如 HTML、JavaScript、浏览器对象、XML/JSON 和 HTTP。当然也不需要购买、安装或配置任何主要组件来支持 Ajax 前端和 RESTful Web 服务之间的交互。RESTful Web 服务为 Ajax 提供了非常简单的 API 来处理服务器上资源之间的交互。图1 中的 Web 浏览器客户端作为 GUI 的前端，使用表示层中的 Browser Request Handler 生成的 HTML 提供显示功能。Browser Requester Handler 可以使用 MVC 模型(JSF、Struts 或 Spring 都是 Java 的例子)。它从浏览器接受请求，从业务逻辑层请求服务，生成表示并对浏览器做出响应。表示供用户在浏览器中显示使用。表示不仅包含内容，还包含显示的属性，比如 HTML 和 CSS。 业务规则可以集中到业务逻辑层，该层充当表示层和数据访问层之间的数据交换的中间层。数据以域对象或值对象的形式提供给表示层。从业务逻辑层中解耦 Browser Request Handler 和 Resource Request Handler 有助于促进代码重用，并能实现灵活和可扩展的架构。此外，由于将来可以使用新的 REST 和 MVC 框架，实现它们变得更加容易，无需重写业务逻辑层。数据访问层提供与数据存储层的交互，可以使用 DAO 设计模式或者对象-关系映射解决方案(如 Hibernate、OJB 或 iBATIS)实现。作为替代方案，业务层和数据访问层中的组件可以实现为 EJB 组件，并取得 EJB 容器的支持，该容器可以为组件生命周期提供便利，管理持久性、事务和资源配置。但是，这需要一个遵从 Java EE 的应用服务器(比如 JBoss)，并且可能无法处理 Tomcat。该层的作用在于针对不同的数据存储技术，从业务逻辑中分离数据访问代码。数据访问层还可以作为连接其他系统的集成点，可以成为其他 Web 服务的客户端。数据存储层包括数据库系统、LDAP 服务器、文件系统和企业信息系统(包括遗留系统、事务处理系统和企业资源规划系统)。使用该架构，您可以开始看到 RESTful Web 服务的力量，它可以灵活地成为任何企业数据存储的统一 API，从而向以用户为中心的 Web 应用程序公开垂直数据，并自动化批量报告脚本。什么是REST:结束语REST 描述了一个架构样式的互联系统(如 Web 应用程序)。REST 约束条件作为一个整体应用时，将生成一个简单、可扩展、有效、安全、可靠的架构。由于它简便、轻量级以及通过 HTTP 直接传输数据的特性，RESTful Web 服务成为基于 SOAP 服务的一个最有前途的替代方案。用于 web 服务和动态 Web 应用程序的多层架构可以实现可重用性、简单性、可扩展性和组件可响应性的清晰分离。Ajax 和 RESTful Web 服务本质上是互为补充的。
⑤ 接口测试测试点
1.可以发现很多在页面上操作发现不了的bug（接口的）
2.可以检查系统（接口）的异常处理能力
3.可以检查系统（接口）的安全性、稳定性
4.前端随便变，接口测好了，后端不用变
5.可以测试并发情况，一个账号，同时（大于2个请求）对最后一个商品下单，或不同账号，对最后一个商品下单
6.可以修改请求参数，突破前端页面输入限制（如金额），检查系统（接口）有没有进行校验
⑥ 记录一下前端使用CryptoJS的几种加密方式
自己太小白了，之前在PC端项目中使用的MD5加密，现在的小程序项目使用了 CryptoJS 里面的 enc-base64 和 hmac-sha1 ，之前没有用到过这两种，所以比较疑惑，为何在小程序不继续使用 MD5 呢？所以在这里记录一下自己解疑惑的一些知识点。
随着互联网的兴起，我们对信息的安全越来越受重视，这样就导致在web开发中，对用户密码等各种加密变得更加重要了。与服务器的交互中，为了确保数据传输的安全性，避免被黑客抓包篡改。
对于Base64编码的，我觉得看一篇文章能够解决你的疑惑，我在这里就不赘述了
🧐 Base64编码原理
如： 用户密码，请求参数，文件加密
如： 接口参数签名验证服务
支付数据、CA数字证书
前端的朋友可能会关注前端js加密，我们在做 WEB 的登录功能时一般是通过 Form 提交或 Ajax 方式提交到服务器进行验证的。为了防止抓包，登录密码肯定要先进行一次加密（RSA），再提交到服务器进行验证。一些大公司都在使用，比如淘宝、京东、新浪 等。
前端加密也有很多现成的js库，如：
JS-RSA： 用于执行OpenSSL RSA加密、解密和密钥生成的Javascript库， https://github.com/travist/jsencrypt
MD5： 单向散列加密md5 js库， https://github.com/blueimp/JavaScript-MD5
crypto-js： 对称加密AES js库， https://github.com/brix/crypto-js
-CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。
HMAC 系列是消息验证，用于验证一个消息是否被篡改——如网站上传递 email 和 hmac(email)，则接收时可以通过 hmac(email) 获知 email 是否是用户伪造的