JavaScript设计模式之代理模式（Proxy Pattern）

外话：周末为了放松大家的压力和提升大家的学习体验，我分享了自己发现的一些前端学习视频，大家可以和我一起在家里看看视频轻松学习，本周视频资源链接：
微信小程序视频教程来啦，每周末都有前端视频教程学

什么是代理模式

在现实生活中，proxy是一个被授权代表其他人的人。比如，许多州允许代理投票，这意味着你可以授权他人在选举中代表你投票。

拿最常遇到的收快递这一个社会行为举例吧。很早之前，我们收发快递都是直接和快递员交互的，例如：

而现在，加入了代理之后，可以通过第三方替我们接收快递，这是生活当中一个非常常见的例子，可以说代理的存在，大大的便利了“我”这个对象。即：

你很可能听说过proxy服务器，它会接收来自你这的所有流量，代表你发送给另一端，并把响应返回给你。当你不希望请求的目的地知道你请求的具体来源时，使用proxy服务器就很有用了。所有的目标服务器看到的只是来自proxy服务器的请求。

再接近本文的主题一些，这种类型的代理和ES6 proxy要做的就很类似了，涉及到使用类(B)去包装类(A)并拦截/控制对(A)的访问。

当你想进行以下操作时proxy模式通常会很有用：

拦截或控制对某个对象的访问
通过隐藏事务或辅助逻辑来减小方法/类的复杂性
防止在未经验证/准备的情况下执行重度依赖资源的操作

当一个复杂对象的多份副本须存在时，代理模式可以结合享元模式以减少内存用量。典型作法是创建一个复杂对象及多个代理者，每个代理者会引用到原本的复杂对象。而作用在代理者的运算会转送到原本对象。一旦所有的代理者都不存在时，复杂对象会被移除。

上面是维基百科中对代理模式的一个整体的定义.而在JavaScript中代理模式的具体表现形式就是ES6中的新增对象---Proxy

ES6中的代理模式

ES6所提供Proxy构造函数能够让我们轻松的使用代理模式:

let proxy = new Proxy(target, handler);

Proxy构造函数传入两个参数，第一个参数target表示所要代理的对象，第二个参数handler也是一个对象用来设置对所代理的对象的行为。如果想知道Proxy的具体使用方法，可参考阮一峰的《 ECMAScript入门 - Proxy 》。

Proxy构造器可以在全局对象上访问到。通过它，你可以有效的拦截针对对象的各种操作，收集访问的信息，并按你的意愿返回任何值。从这个角度来说，proxy和中间件有很多相似之处。

具体来说，proxy允许你拦截许多对象上常用的方法和属性，最常见的有get，set，apply(针对函数)和construct(针对使用new关键字调用的构造函数)。关于使用proxy可以拦截的方法的完整列表，请参考规范。Proxy还可以配置成随时停止接受请求，有效的取消所有针对被代理的目标对象的访问。这可以通过一个revoke方法实现。

代理模式常用场景

1 剥离验证逻辑

一个把Proxy用于验证的例子，验证一个数据源中的所有属性都是同一类型。下面的例子中我们要确保每次给numericDataStore数据源设置一个属性时，它的值必须是数字。

这很有意思，但有多大的可能性你会创建一个这样的对象呢？肯定不会。。。

如果你想为一个对象上的部分或全部属性编写自定义的校验规则，代码可能会更复杂一些，但我非常喜欢Proxy可以帮你把校验代码与核心代码分离开这一点。难道只有我讨厌把校验代码和方法或类混在一起吗？

通过这种方式，你就可以无限的扩展校验规则而不用修改类或方法。

再说一个和校验有关的点子。假设你想检查传给一个方法的参数并在传入的参数与函数签名不符时输出一些有用的帮助信息。你可以通过Proxy实现此功能，而不用修改该方法的代码。

在看一个表单验证的例子。Proxy构造函数第二个参数中的set方法，可以很方便的验证向一个对象的传值。我们以一个传统的登陆表单举例，该表单对象有两个属性,分别是account和password，每个属性值都有一个简单和其属性名对应的验证方法，验证规则如下：

下面我们来使用Proxy实现一个通用的表单验证器

我们调用getValidateProxy方法去生成了一个代理对象userFormProxy，该对象在设置属性的时候会根据validators的验证规则对值进行校验。这我们使用的是console.error抛出错误信息，当然我们也可以加入对DOM的事件来实现页面中的校验提示。

2 真正的私有属性

在JavaScript中常见的做法是在属性名之前或之后放一个下划线来标识该属性仅供内部使用。但这并不能阻止其他人读取或修改它。

在下面的例子中，有一个我们想在api对象内部访问的apiKey变量，但我们并不想该变量可以在对象外部访问到。

通过使用ES6 Proxy，你可以通过若干方式来实现真实，完全的私有属性。

首先，你可以使用一个proxy来截获针对某个属性的请求并作出限制或是直接返回undefined。

你还可以使用hastrap来掩盖这个属性的存在。

3 默默的记录对象访问

针对那些重度依赖资源，执行缓慢或是频繁使用的方法或接口，你可能喜欢统计它们的使用或是性能。Proxy可以很容易的悄悄在后台做到这一点。

注意：你不能仅仅使用applytrap来拦截方法。任何使用当你要执行某个方法时，你首先需要get这个方法。因此，如果你要拦截一个方法调用，你需要先拦截对该方法的get操作，然后拦截apply操作。

这很酷，因为你可以记录各种各样的信息而不用修改应用程序的代码或是阻塞代码执行。并且只需要在这些代码的基础上稍事修改就可以记录特性函数的执行性能了。

4 给出提示信息或是阻止特定操作

假设你想阻止其他人删除noDelete属性，想让调用oldMethod方法的人知道该方法已经被废弃，或是想阻止其他人修改doNotChange属性。以下是一种快捷的方法。

5 防止不必要的资源消耗操作--缓存代理

假设你有一个服务器接口返回一个巨大的文件。当前一个请求还在处理中，或是文件正在被下载，又或是文件已经被下载之后你不想该接口被再次请求。代理在这种情况下可以很好的缓冲对服务器的访问并在可能的时候读取缓存，而不是按照用户的要求频繁请求服务器。缓存代理可以将一些开销很大的方法的运算结果进行缓存，再次调用该函数时，若参数一致，则可以直接返回缓存中的结果，而不用再重新进行运算。例如在采用后端分页的表格时，每次页码改变时需要重新请求后端数据，我们可以将页码和对应结果进行缓存，当请求同一页时就不用在进行ajax请求而是直接返回缓存中的数据。在这里我会跳过大部分代码，但下面的例子还是足够向你展示它的工作方式。

再列举一个比较好理解的例子：下面我们以没有经过任何优化的计算斐波那契数列的函数来假设为开销很大的方法，这种递归调用在计算40以上的斐波那契项时就能明显的感到延迟感。

现在我们来写一个创建缓存代理的工厂函数:

当我们第二次调用getFibProxy(40)时，getFib函数并没有被调用，而是直接从cache中返回了之前被缓存好的计算结果。通过加入缓存代理的方式，getFib只需要专注于自己计算斐波那契数列的职责，缓存的功能使由Proxy对象实现的。这实现了我们之前提到的单一职责原则。

6. 即时撤销对敏感数据的访问

Proxy支持随时撤销对目标对象的访问。当你想彻底封锁对某些数据或API的访问时(比如，出于安全，认证，性能等原因)，这可能会很有用。以下是一个使用revocable方法的简单例子。注意当你使用它时，你不需要对Proxy方法使用new关键字。

到此，我们列举了很多实用的代理模式案例，大家应该对这个设计模式有了一定的印象和理解，希望大家能在接下来的工作中继续实践和积累，也期待大家在评论区和我分享自己的理解和实践过程

总结

在面向对象的编程中，代理模式的合理使用能够很好的体现下面两条原则:

单一职责原则: 面向对象设计中鼓励将不同的职责分布到细粒度的对象中，Proxy 在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。
开放-封闭原则：代理可以随时从程序中去掉，而不用对其他部分的代码进行修改，在实际场景中，随着版本的迭代可能会有多种原因不再需要代理，那么就可以容易的将代理对象换成原对象的调用

对于代理模式 Proxy 的作用主要体现在三个方面:

1、拦截和监视外部对对象的访问

2、降低函数或类的复杂度

3、在复杂操作前对操作进行校验或对所需资源进行管理

下期预告:

JavaScript设计模式之观察者模式（Observer Pattern）

参考

详解ES6中的代理模式——Proxy
https://juejin.im/post/5b71a90bf265da282958701b

言

今天面试的时候面试官叫我聊聊代理是怎么一回事儿，我支支吾吾磨磨蹭蹭就蹦出来了一个proxy，然后还有一个Object.defineProperty，剪不断理还乱，脑子里就像毛线打结一样思维缠绕，到底是怎么一回事儿，今天就写篇文章搞定他。

代理

代理是es6中的新特性，它可以在不修改原对象代码的情况下，控制对原对象的访问，这为JavaScript编程带来了更大的灵活性和控制能力。他可以实现对对象的拦截和自定义操作，比如属性查找、赋值、枚举、函数调用等。

在es5中没有代理这个操作，但是某些机制可以实现类似代理的操作，虽然没有像es6中的代理那么灵活，但是在一些简单的场景下可以使用。

在es5中如何模拟代理

可以通过一些间接的方式模拟代理的行为，但这通常会更复杂且不够灵活

使用闭包

你可以通过闭包，在外部函数里面定义变量，在get和set方法里面引用这个变量，并且做一些额外的逻辑，返回get和set方法。

function createCounter (){
    let _count = 0;
    return {
        getCount: function(){
        //当访问这个变量时可以做额外的逻辑
            console.log('get');
            return _count;
        },
        setCount(num){
        //当修改这个变量时可以做额外的逻辑
            console.log('set');
            _count = num;
        },
    }
}

const counter = createCounter();
console.log(counter.getCount());
counter.setCount(10);

2.使用闭包和对象字面量 你可以通过闭包来封装对目标对象的访问，并在访问时执行额外的逻辑。

var obj = {  
  _value: null,  
  get value() {  
  	//当访问这个变量时可以做额外的逻辑
  	console.log('get');
    return this._value;  
  },  
  set value(newValue) {   
  	//当修改这个变量时可以做额外的逻辑
  	console.log('set');
    this._value = newValue;  
  }  
};
console.log(obj.count);//get 0
obj.count = 10;// set

3.使用Object.defineProperty

Object.defineProperty 方法允许你精确地添加或修改对象的属性。你可以使用它来定义getter和setter，这与在对象字面量中定义它们类似，但提供了更多的灵活性和控制能力，因为它提供了一些属性来约束目标对象的属性，接下里是相关语法特性。

语法

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象。
prop：要定义或修改的属性的名称或Symbol。
descriptor：将被定义或修改的属性描述符。

属性描述符

value：属性的值。

writable：当且仅当该属性的writable为true时，属性的值才能被赋值运算符改变。默认为false

enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。换句话说，当使用for...in循环、Object.keys()方法、JSON.stringify()方法（除非属性值的原始值为undefined、函数、或symbol类型的键）等枚举对象属性的方法时，该属性会被包括在内。

configurable：当且仅当该属性的configurable为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。

get：一个给属性提供getter的方法，如果没有getter则为undefined。当访问该属性时，会调用此getter函数，执行时不传入任何参数，但是会传入this对象（由于函数绑定，this可能是调用对象本身）。

set：一个给属性提供setter的方法，如果没有setter则为undefined。当属性值被修改时，会调用此setter函数。该方法将接受唯一参数，即被赋予的新值。

如何使用Object.defineProperty模拟代理

var obj = {};  
Object.defineProperty(obj, 'value', {  
  get: function() {  
    console.log('get');  
    return this._value;  
  },  
  set: function(newValue) {  
    console.log('set');  
    this._value = newValue;  
  },  
  enumerable: true,  //该属性可枚举
  configurable: true  //该属性可配置
});

es6中的代理 Proxy

在es6中创建代理是通过构造函数来实现的。

const proxy = new Proxy(target,handler)

它接受两个参数：目标对象（target）和一个处理对象（handler），后者定义了要拦截并自定义的行为。

常见的handler对象中的拦截行为有：

get(target, propKey, receiver)：拦截对属性的读取操作。
set(target, propKey, value, receiver)：拦截对属性的赋值操作。
has(target, propKey)：拦截propKey in proxy的操作。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环、Object.values()和Object.entries()操作。
apply(target, thisArg, argumentsList)：拦截函数的调用。
construct(target, args, newTarget)：拦截new操作符。

示例

let obj = {}
let handler = {
    get(target, key, receiver) {
        console.log('get');
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        console.log('set');
        return Reflect.set(target, key, value, receiver);
    }
}

const proxy = new Proxy(obj, handler);
proxy.count = 10;
console.log(proxy.count);

使用Reflect

在编写代理的捕获器时，通常会用到Reflect对象。ReflectAPI中的方法与捕获器一一对应，提供了一种更直接的方式来调用目标对象上的方法。使用Reflect可以让代码更简洁、易于理解，同时也避免了直接操作对象可能带来的问题（如直接调用target[propKey]可能触发另一个代理的捕获器）。

应用场景

代理在JavaScript中有很多应用场景
数据绑定：在vue中，代理就被用于实现数据绑定和响应式系统
权限控制：在对象中的属性被访问时进行权限判断
记录日志：在对象被访问时记录日志

注意事项

代理主要用于操作对象，不能代理基本数据类型（如Number、String等）。
代理的性能通常会比直接操作目标对象稍差，因为每次操作都需要经过捕获器的处理。
代理的捕获器必须返回一个与操作类型相符的值（例如，get捕获器应该返回属性值），否则可能会导致意外的行为。

.Burp Suite工具安装及配置

1.Burp Suite

Burp Suite是用于Web应用安全测试、攻击Web应用程序的集成平台，它将各种安全工具无缝地融合在一起，以支持整个测试过程中，从最初的映射和应用程序的攻击面分析，到发现和利用安全漏洞。

Burp Suite为这些工具设计了许多接口，以加快攻击应用程序的过程。所有工具都共享一个请求，并能处理对应的HTTP 消息、持久性、认证、代理、日志、警报。Burp Suite结合先进的手工技术与先进的自动化，使你的工作更快，更有效，更有趣。

Burp Suite是Java编写的，所以在使用前需要安装JDK环境，这里不进行具体讲解如何安装JDK。作者从CSDN下载了一个版本，并能正常运行。

官方下载地址：https://portswigger.net/burp

2.安装

安装过程非常简单，傻瓜式点击“下一步”安装。

安装成功之后运行如下所示，点击“Next” -> “Start Burp”显示主界面。

3.功能

Burp Suite的模块几乎包含整个安全测试过程，从最初对目标程序的信息采集，到漏洞扫描及其利用，多模块间高融合的配合，使得安全测试的过程更加高效。主要模块如下：

Target(目标)： 显示目标目录结构。
Proxy(代理)： Burp Suite设置代理，抓取数据包。用于拦截HTTP/S的代理服务器，作为浏览器和目标应用程序之间的中间件，允许你拦截、查看、修改两个方向上的原始数据流。
Spider(蜘蛛)： Burp Suite的蜘蛛功能是用来抓取Web应用程序的链接和内容等。
Scanner(扫描器)： 高级工具，它能自动地发现Web应用程序的安全漏洞。主要用来扫描Web应用程序漏洞，发现常见的web安全漏洞，但会存在误报的可能。
Intruder(入侵)： 一个定制的高度可配置工具，可以对Web应用程序进行自动化攻击和暴力猜解，如：枚举标识符，收集有用的数据，以及使用fuzzing技术探测常规漏洞。
Repeater(中继器)： 对数据包进行重放（手动操作来触发单独的HTTP请求），分析服务器返回情况和响应，判断修改参数的影响。
Sequencer(会话)： 用来检查Web应用程序提供的会话令牌的随机性，分析那些不可预知的应用程序会话令牌和重要数据项的随机性，并执行各种测试。
Decoder(解码器)： 对数据进行加解密操作，包含url、html、base64等等。
Comparer(对比)： 用来执行任意两个请求、响应或任何其它形式的数据之间的比较，通常是通过一些相关的请求和响应得到两项数据的一个可视化的“差异”。
Extender(扩展)： 加载Burp Suite的扩展，使用你自己的或第三方代码来扩展Burp Suite的功能。
Options(设置)： 对Burp Suite的一些设置，如burp、字体、编码等。
Alerts(警告)： 用来存放报错信息的，用来解决错误。

4.配置代理

（1）添加foxyproxy附件功能。

在“设置”->“添加附件”中搜索“foxyproxy”。

添加安装该附件，如下图所示。

点击添加安装。

添加成功之后，可以选择打开FoxyProxy功能或关闭，如下图所示。

（2）设置火狐浏览器Firefox本地代理。在“网络”中设置HTTP代理为127.0.0.1，端口号为9090。

（3）接着设置Burp Suite代理，添加127.0.0.1且端口号为9090的代理，并使用它。

（4）用火狐浏览器打开网站则可获取网页相关信息。

二.Burp Suite工具Tareget

浏该功能主要用于查看网站的目录及元素，这里以某学校的管理系统为例，该网站的目录显示如下。

获取内容包括Host、提交方法、URL、参数、状态码、标题、Comment、Time等，并且能够设置对应网址的注释Comment，如作者添加了“登录页面”注释。

右下部分能显示Request请求和Response响应信息，包括Raw、Headers、Hex、HTML等，如下图所示。

点击Site map左脚上部分，能够选择要显示的信息，包括显示HTML、CSS、Images等，显示状态码2xx、3xx、4xx、5xx等，显示和隐藏设置等。该功能可以按照请求类型、请求的状态、mime类型、搜索关键字、文件后缀、监听的端口等等，按个人需求去缩小需要的范围。

比如作者设置只显示2xx状态码页面，则显示如下图所示。

同时，可以为不同的条目自定义设置背景颜色，代表不同的功能或类型。如果认为某个数据包比较重要，可将当前数据包设置某个醒目的颜色以提示其重要性

选中链接右键能实现更多功能，比如Spider、Scope等。

Scope主要是配合Site map做一些过滤的功能，如图所示。

三.Burp Suite工具Proxy

Proxy主要包括Intercept、HTTP histroy 、Websockets history、Options四个标签。

参考文章：

BurpSuite基础教程第八发：其他操作（HTTPS流量抓取&过滤器的使用）
BurpSuite基础教程第二发：Proxy模块(代理模块)
Web安全 — BurpSuite实战（上）
博客园Burp Suite使用介绍
《Web攻防之业务安全实战指南》作者：陈晓光等大神

1.Intercept模块

该模块主要是控制抓取到的数据包，用于显示修改HTTP请求及响应内容，并可以将拦截的HTTP请求快速发送至其他模块处理。

比如当“Intercept is on”开启时，火狐浏览器输入用户名和密码点击登录，则可以看到Burp Suite拦截的用户名和密码。

Raw：以纯文本形式显示数据包

Params：包含参数URL 查询字符串、cookies请求，并可双击该请求进行修改。

Headers：以名称、值的形式显示获取的数据包。

Hex：可编辑数据包的二进制数据，在进行00截断时非常好用。

拦截信息如下所示，其中密码为MD5加密。

POST /cas/login HTTP/1.1Host: xxxxx.edu.cnUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3Referer: http://xxxxx.edu.cn/cas/loginCookie: key_dcp_cas=nyfjdGZGmmYYdbN1fv2G349LydwzRhnrbGLqj4LMpRGd1YL3Qstl!-94055740Connection: closeContent-Type: application/x-www-form-urlencodedContent-Length: 221service=http%3A%2F%2Fi.xxxx.edu.cn%2Fdcp%2Findex.jsp&serviceName=null&loginErrCnt=0&username=20190804&password=e10adc3949ba59abbe56e057f20f883e&replace-pwd=...

在线解密，可以看到密码为“123456”，当然，这是错误的用户名和密码。

username=20190804 password=e10adc3949ba59abbe56e057f20f883e

2.HTTP histroy模块

该模块将记录经过代理服务器访问的所有请求，即使当Intercept is off时也会记录。包括Host(主机)、Method(请求方式)、URL(请求地址)、Params(参数)、Edited(编辑)、Status(状态)、Length(响应字节长度)、MIME type(响应的MLME类型)、Extension(地址文件扩展名)、Title(页面标题)、Comment(注释)、SSL、IP(目标IP地址)、Cookies、Time(发出请求时间)、Listener port(监听端口)。

当我们选中某个请求时，可以看他的请求包信息，同样也可查看他的响应包信息。

双击某个数据包即可打开详情，通过Previous/next功能切换到其他数据包，同时，也可将该数据包发送到其他功能模块当中。

3.Websockets history模块

该模块用于记录WebSockets的数据包，是HTML5中最强大的通信功能，定义了一个全双工的通信信道，只需Web上的一个 Socket即可进行通信，能减少不必要的网络流量并降低网络延迟。

4.Options模块

该模块主要用于设置代理监听、请求和响应、拦截反应、匹配和替换、ssl等。

（1）设置代理

侦听从您的浏览器传入的连接本地HTTP代理服务器。它允许您监视和拦截所有的请求和响应，并且位于BurpProxy的工作流的心脏。默认情况下，Burp默认监听12.0.0.1地址，端口8080。

（2）配置拦截规则

置拦截的匹配规则，当Intercept request based on the following rules为选中状态时，burpsuite会配置列表中的规则进行拦截或转发。注意：如果该复选框未选中，那么即使Intercept is on也无法截取数据包。

如下图所示，创建一个规则：只拦截请求头中匹配DVWA的数据包。在实际使用过中我们可能需要创建更多更复杂的规则，来找到想要的数据包。

（3）配置拦截规则 Intercept Server Responses

拦截response并修改response中的返回值。

（4）Response Modification

用于执行响应的自动修改，可以使用这些选项来自动修改HTML应用程序响应中匹配的内容。比如，设置高亮隐藏部分，勾选unhide hidden form fields（显示隐藏的表单，在html中type为hidden的表单）和prominently highlight unhidden fields（高亮隐藏部分）。

示例如下：

remove javascipt form validation 删除javascript表单验证。某些站点通过JavaScript过滤表单的内容，如字符串长度、文件后缀、字符串格式等，开启后删除验证javascript。

更详细的知识推荐读者阅读博客：

https://www.jianshu.com/p/73e1b0a974cc

四.Burp Suite工具暴库示例

下面以某网址为例，进行简单的暴库测试。注意，它是HTTP的登录请求。

第一步，用Burp Suite进行拦截请求，找到请求参数进行篡改。TextBoxUserName=15200000000

TextBoxPwd=111111

第二步，在界面中鼠标右键，在弹出菜单中选择“Send to Intruder”（Ctrl+I），此时会将请求数据分发给Intruder模块，并且Intruder变红。

第三步，使用Burp Suite工具中的Intruder模块进行破解参数配置，运行破解任务并成功破解用户名和密码。

（1）在Intruder模块中选择Positions选项，单击“Clear”按钮清楚相关默认参数前后的特殊符号“§”。

（2）鼠标选中请求数据页面中的Password参数值（需要进行暴力破解的密码值），单击“Add§”按钮进行位置标记。TextBoxPwd=§111111§

（3）选择Payloads选项，单击“Load items form file”，在弹出的对话框中选择暴力破解密码文件并单击“打开”按钮，将破解密码列表导入。

（4）单击“Start attack”按钮开始破解测试。

（5）在弹出的窗口“Intruder attack”中可以根据返回长度Length的不同判断破解是否成功，这里隐藏的密码是“013579”，它的长度最大并且为最终密码。注意，Length越大那么密码吻合就越大。

也可以通过查看Response返回信息或Status返回状态的不同信息判断是否成功。

错误的密码返回信息：

正确的密码返回信息：

（6）通过破解的密码尝试登陆。

（7）如果密码是经过MD5加密的，如上面第三部分测试的网站，则需要进行如下设置。在“Payload Processing”中点击“Add”添加哈希MD5加密。

此时点击攻击如下图所示，是经过加密的匹配。

个人建议，参考陈晓光大神的Web攻防书籍，也推荐大家阅读。

增加验证码，登录失败一次，验证码更换一次。
配置登录失败次数限制策略，如同一用户尝试登录的情况下，5分钟内登录失败超过4次，则禁止用此用户在2小时内登录系统。
在条件允许情况下，增加手机接收短信验证码或邮箱接收邮件验证码，实现双因素认证的防暴力破解机制。

补充知识：

在系统登录时密码加密流程一般是先将用户名和密码发送到服务器，服务器会把用户提交的密码经过Hash算法加密后和数据库中存储的加密值比对，如果加密值相同，则判定用户提交密码正确。

但有些网站系统的流程是在前台浏览器客户端对密码进行Hash加密后传输给服务器并与数据库加密值进行对比，如果加密至相同，则判定用户提交密码正确。此种流程不是很好，它会泄露密码加密方式，导致安全隐患。

五.火狐浏览器HTTPS访问之安全证书安装

当我们想访问HTTPS网站时，需要导入Burp Suite安装证书并安装，基本流程如下：

第一步，配置好浏览器代理。

第二步，在地址栏输入http://burp，回车下载证书。注意这里的证书不能是零字节，不然去找破解版。

第三步，向浏览器中导入证书，在firefox中，选项-> 高级->证书->查看证书->证书机构。

第四步，导入证书，信任证书。

如下图所示：

第五步，找个HTTPS网站测试即可。但作者测试百度始终没有成果，拦截的网站也不对，无语~

参考：

https://blog.csdn.net/zyw_anquan/article/details/47904495

六.总结

写到这里，整篇文章结束了，其实网络安全还是挺有意思的，尤其是最后解决了一个问题之后。每一篇文章都是站在无数大神和大佬的肩膀之上，作为一个网络安全的初学者，深深地感受到自己有太多的东西需要学习，还好态度比较端正，每天都在一步一个脚印前行。希望这篇基础性文章对你有所帮助，如果有错误或不足之处，还请海涵。后续将分享更多网络安全方面的文章了，从零开始很难，但秀璋会一路走下去的，加油。

在线咨询

上一篇：HTML 音频(Audio)
下一篇：20个超炫的html5视频背景页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商