浅谈Flux架构及Redux实践

Flux概述

Flux是Facebook用来构建用户端的Web应用程序的体系架构,与其它形式化的框架相比,它更像是一个架构思想,用于管理和控制应用中数据的流向。这里应用中的数据指包括但不限于来自服务端的数据页面中view的一些状态(如一个面板是展开还是关闭),临时存储在本地需要持久化到服务端的数据等。

好了,说了这么多好像还是一脸懵逼,不慌,接下来看看展开式。

clipboard.png

Read More

实现一个简单的HTTP Client

httpclient-cli

Linux下用C语言实现发送HTTP请求并获取html文档内容的CLI程序

理论基础

HTTP请求报文格式

一个HTTP请求报文由请求行(request line)、请求头部(header)、空行和请求数据4个部分组成,下图给出了请求报文的一般格式。

Read More

XSS持久型攻击实例--向学校图书馆网站页面注入JS

XSS攻击是Web中很常见的攻击,其原理有点类似与SQL注入,改变了原来的执行逻辑。之前了解过一些XSS,但是没有去具体实现,刚刚拿学校的网站做了下XSS攻击,成功的给图书馆网站下了毒+_+…

XSS攻击大概可以分为两种,一种是非持久型攻击,这一般只会影响个体用户,不会造成长期的影响,另一种为持久型攻击,也就是我们要讲的这种,将我们的代码注入到目标服务器页面上,所有访问这个页面的用户都会被攻击。其实之前没有去具体实现因为比较“出名”的网站一般在防XSS上做的比较完善,不好去找漏洞,所以才拿学校网站做测试(以前经常这样干抓数据什么的。。。),在最后我们实现的是向页面中注入自己的js代码,并将访问该页面用户的cookie信息传到我自己的服务器上。

找到漏洞

XSS一般会发生在提交表单或者其他与服务器交互的场景中,然而好像学校网站基本没有可以用户自己回复信息,发布信息什么的,但是记得好像学校图书馆的页面可以评论,就拿这个测试了。

/images/lib-cqut-1.png

Read More

浅析JS中的自定义事件

./images/js-event-target.png
在JS中事件是与浏览器进行交互的主要途径,事件与DOM进行交互是最常见的方式,但是也可以用于非DOM代码中,实现自定义的事件。自定义事件的主要概念是创建一个管理事件的对象,用来删除,增加,触发事件等。事件是瞬间触发的,所以自定义事件也一样,当程序执行到某处时,触发了用户注册的事件处理程序完成这个过程。

在下面我们实现了一个自定义的事件管理类,以及一个弹出层对话框的Dialog组件,这个组件继承了事件类里的方法,通过给Dialog实例注册事件以及用户的操作进行触发,完成了自定义事件大概的过程。

下面的内容涉及到了JS中prototype chain,继承模式等相关姿势,不太熟悉的同学可以先看看JS面向对象部分相关的内容。

Read More

优雅的清除浮动

为何要清除浮动?

直接看代码

<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>

.container {
background-color: yellow;
}
.a, .b, .c {
width: 200px;
height: 100px;
background-color: red;
margin: 10px;
float: left;
}

此时出现了一个著名的问题高度坍塌,本来我们像用3个div撑起父容器的高度,从而达到自适应的目的,但是由于子元素全部浮动脱离了文档流,从而容器没有元素来撑起它的高度,导致”坍塌“。

/images/clear.png

此时container的高度为0,那么如何撑起父容器?就要用到清除浮动了。

Read More