Jiananshi's Blog

如何在 React 中绑定一个事件处理函数

这篇文章的起因是最近看到同事的在处理一个可以响应用户交互需求时的代码： 1234567891011import React from 'react';class App extends React.Component { render() { return ( <button onClick={() => alert('Clic......

Posted by jiananshi on 2018-07-29

HTTP Response Splitting

前阵子安全部门报过来了一个非常有意思的漏洞，在我们支持 HTTPS 后，HTTP 访问都会被 301 到 HTTPS，在服务端配置如下： 12345server { # ... server_name example.com; return 302 https://$host$request_uri;} 乍一看是非常简单的配置，但其中有一个容易忽视的地方是，我们直接......

Posted by jiananshi on 2018-03-29

keepalive 简介

前端关注的 keep-alive如果你关注过「缓存」这件事，写前端的时候一定会注意到诸如：Cache-control / etag / connection… 诸如此类的 HTTP 头，如下图所示：（注：keep-alive 属于 HTTP/1.1 的内容，h5.ele.me 很多资源上了 h2，这里特意选了一个 HTTP/1.1 的请求做例子）我们都知道 HTTP 请求是很昂贵的，......

Posted by jiananshi on 2018-02-22

Flex 的一些常见问题

记得 Flexbox 刚刚开始有人用时，除了兼容性问题大家一致觉得这个特性节省了前端写页面的时间，记得移动端的美食墙（目前已经这个功能已经下线了）就是利用了 Flex 可以在垂直方向上排列元素的特性来写的。使用 Flexbox 免去了往常写 float 要处理高度坍塌，有的场景要考虑到 BFC（Flex container 本身会创建一个 FFC - Flex Formatting Cont......

Posted by jiananshi on 2017-11-23

如何设计 Mongodb 的数据模型

公司的存储服务上线后，我遇到过很多次使用 MySQL 的表设计模式来设计 Mongodb 存储模型的服务，并在服务拓展后遇到 Mongodb 不支持数据库级别的 join 而觉得它不好用的情况（其他还有如事务、外键等等）。在使用了一段时间 Mongodb 后，我觉得这些评价是有失公允的，Mongodb 有它适应的场景，不应该处处同 MySQL 比较。比如不支持 join 我们可以通过应用级......

Posted by jiananshi on 2017-08-02

什么是 XSS 攻击

XSS 的全称是 Cross Site Scripting，为了避免同 CSS 的缩写重复所以用了 XSS 代替，相比于上一篇介绍的 CSRF 攻击，XSS 攻击的威力更大，它可以直接在用户当前正在浏览的页面运行自定义的 javascript 脚本，操作得当的话可以污染浏览这个页面的所有用户。 XSS 最主要的方式是通过服务端没有对用户上传的内容进行编码/过滤，然后直接返回给客户端并展示在......

Posted by jiananshi on 2017-07-15

如何防范 CSRF 攻击

CSRF 的全称是 Cross-site request forgery，中文翻译是跨站请求伪造，简单来说就是用户在登录 A 站点后假冒用户向站点 B 发送请求，如退出用户当前帐号等操作。下面这张图可以解释 CSRF 攻击的原理：用户访问站点 A 时，站点 A 用一个图片 html 标签就可以发起 CSRF 攻击： 1<img src="//yemengying.com/logo......

Posted by jiananshi on 2017-07-08

HTTP 头 X-FORWARDED-FOR

Disqus 被墙以后配置了一个反向代理去调 Disqus api，那个服务到现在运行的还不错，美中不足的是经过了一层反向代理后我们丢掉了用户的 IP 信息，最终提交给 Disqus 的只有转发服务器的 IP，这样所有用户的请求都来自于同一个 IP，假如要展示访客地区分布就捉🐔了。反向代理对于用户来说是透明的，客户端并不知道这个接口后面有几层代理，而最后一层代理甚至有可能不知道真实用户的......

Posted by jiananshi on 2017-07-01

小巧好用的压力测试工具 wrk

上周服务被打挂了一次，发现的时候 CPU + Memory 几乎被占满，但是请求并发量只有 ~50 左右。修复 + 重启以后一直在想平时怎么在日常自测服务，压力测试需要联系公司专门的团队 + 排期并不十分方便，佳浩老师给推荐了 wrk，这里记录一下使用心得。 wrk 的官网关于用法介绍的挺详细的，这里就只简单举一个例子： 1wrk -t4 -c100 -d10s -T30s --latenc......

Posted by jiananshi on 2017-06-24

Nginx HTTPS 性能调优

相比于普通的 HTTP 请求，HTTPS 请求需要占用更多的资源用于 TLS 协议、证书的验证、请求实体的加密验证等等，最直观的体验就是访问 HTTPS 的网站会比访问 HTTP 协议的网站要慢（不支持 http2 的话）。本篇文章我们来看一下如何在服务端优化 HTTPS 请求，文中以 Nginx 为例。 Session Cache 和 Session Ticket Session Cac......

Posted by jiananshi on 2017-06-18