update readme.md

okaychen · Oct 15, 2018 · b8ddb87 · b8ddb87
1 parent 786adbd
commit b8ddb87
Show file tree

Hide file tree

Showing 17 changed files with 418 additions and 103 deletions.
diff --git a/CNAME b/CNAME
@@ -1 +1 @@
-www.chenqaq.com
+www.chenqaq.com
diff --git a/README.md b/README.md
@@ -1,69 +1,71 @@
-# Blog
-
-- [okaychen](http://www.chenqaq.com/)
-- [cnblogs'okaychen](http://www.cnblogs.com/okaychen/)（已停更）
-
-# 专栏
-
-- [腾讯云+社区](https://cloud.tencent.com/developer/column/1712)
-- [掘金](https://juejin.im/user/59e3efdf6fb9a0451a756b78)
-
-# Express4.x API 译文 系列文章
-
--  [Express4.x API (一)：application (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-application/)
-
--  [Express4.x API (一)：request (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-request/)
-
--  [Express4.x API (三)：response (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-response/)
-
--  [Express4.x API (四)：router (译)](http://www.chenqaq.com/2017/12/23/express-api-cn-router/)
-
-# 2017年12月
-
-- [手起刀落-一起写经典的贪吃蛇游戏](http://www.chenqaq.com/2017/12/05/js-snakey/)
-
-- [同步、异步、回调执行顺序之经典闭包setTimeout分析](http://www.chenqaq.com/2017/12/06/js-setTimeout/)
-
-- [把所有的东西都对齐吧！](http://www.chenqaq.com/2017/12/07/css-verticalMiddle/)
-
-- [css标准盒模型、怪异模式&&box-sizing属性](http://www.chenqaq.com/2017/12/09/css-box-model/)
-
-- [过渡与动画 - 缓动效果之弹跳动画&弹性过渡](http://www.chenqaq.com/2017/12/10/css-animation-easing/)
-
-- [过渡与动画 - steps调速函数&CSS值与单位之ch ](http://www.chenqaq.com/2017/12/13/css-animation-frameBYframe/)
-
-- [express中间件，一篇文章就够了](http://www.chenqaq.com/2017/12/18/express-middleware-use/)
-
-- [Express4.x API 译文 系列文章](https://github.com/okaychen/Blog#express4x-api-译文-系列文章)
-
-- [dependencies和devDependencies的正确使用姿势-这一次彻底弄懂吧](http://www.chenqaq.com/2017/12/29/dependencies-devDependencies/)
-
-- [使用async和enterproxy控制并发数量](http://www.chenqaq.com/2017/12/31/async-enterproxy-control-concurrency/)
-
-# 2018年1月
-
-- [学校寒冬的清晨和深夜](http://www.chenqaq.com/2018/01/10/life-aboutSchool-finalExam/)
-
-- [我找不到dev-server，请允许我给mock数据找一个接口](http://www.chenqaq.com/2018/01/19/vueCl-exExpressDataMock-I-do-t-have-devServer/)
-
-- [一月就要结束，我的2018年已经开始！](http://www.chenqaq.com/2018/01/25/life-aboutLife-job/)
-
-# 2018年2月
-
-- [stricky footer的三种解决方案](http://www.chenqaq.com/2018/02/01/css-layout-strickyFooter/)
-
-# 2018年3月
-
-- [跟着underscore学习防抖和节流](http://www.chenqaq.com/2018/03/20/js-debounce-throttle/)
-
-- [浏览器同源政策](http://www.chenqaq.com/2018/03/15/cross-domain-cors/)
-
-- [拥抱未来的布局方式：flex 和 grid](http://www.chenqaq.com/2018/03/07/css-layout-flex-grid/)
-
-# 2018年4月
-
-- [碎言心语-短笔记](https://www.chenqaq.com/2018/04/09/life-aboutIT/)
-
-# 2018年5月
-
-- [requestAnimationFrame优化web动画](https://www.chenqaq.com/2018/05/15/js-requestAnimationFrame-md/)
+# Blog
+
+- [okaychen](http://www.chenqaq.com/)
+- [cnblogs'okaychen](http://www.cnblogs.com/okaychen/)（已停更）
+
+# 专栏
+
+- [腾讯云+社区](https://cloud.tencent.com/developer/column/1712)
+- [掘金](https://juejin.im/user/59e3efdf6fb9a0451a756b78)
+
+# Express4.x API 译文 系列文章
+
+-  [Express4.x API (一)：application (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-application/)
+
+-  [Express4.x API (一)：request (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-request/)
+
+-  [Express4.x API (三)：response (译)](http://www.chenqaq.com/2017/12/24/express-api-cn-response/)
+
+-  [Express4.x API (四)：router (译)](http://www.chenqaq.com/2017/12/23/express-api-cn-router/)
+
+# 2017年12月
+
+- [手起刀落-一起写经典的贪吃蛇游戏](http://www.chenqaq.com/2017/12/05/js-snakey/)
+
+- [同步、异步、回调执行顺序之经典闭包setTimeout分析](http://www.chenqaq.com/2017/12/06/js-setTimeout/)
+
+- [把所有的东西都对齐吧！](http://www.chenqaq.com/2017/12/07/css-verticalMiddle/)
+
+- [css标准盒模型、怪异模式&&box-sizing属性](http://www.chenqaq.com/2017/12/09/css-box-model/)
+
+- [过渡与动画 - 缓动效果之弹跳动画&弹性过渡](http://www.chenqaq.com/2017/12/10/css-animation-easing/)
+
+- [过渡与动画 - steps调速函数&CSS值与单位之ch ](http://www.chenqaq.com/2017/12/13/css-animation-frameBYframe/)
+
+- [express中间件，一篇文章就够了](http://www.chenqaq.com/2017/12/18/express-middleware-use/)
+
+- [Express4.x API 译文 系列文章](https://github.com/okaychen/Blog#express4x-api-译文-系列文章)
+
+- [dependencies和devDependencies的正确使用姿势-这一次彻底弄懂吧](http://www.chenqaq.com/2017/12/29/dependencies-devDependencies/)
+
+- [使用async和enterproxy控制并发数量](http://www.chenqaq.com/2017/12/31/async-enterproxy-control-concurrency/)
+
+# 2018年1月
+
+- [学校寒冬的清晨和深夜](http://www.chenqaq.com/2018/01/10/life-aboutSchool-finalExam/)
+
+- [我找不到dev-server，请允许我给mock数据找一个接口](http://www.chenqaq.com/2018/01/19/vueCl-exExpressDataMock-I-do-t-have-devServer/)
+
+- [一月就要结束，我的2018年已经开始！](http://www.chenqaq.com/2018/01/25/life-aboutLife-job/)
+
+# 2018年2\3月
+
+- [stricky footer的三种解决方案](http://www.chenqaq.com/2018/02/01/css-layout-strickyFooter/)
+
+- [跟着underscore学习防抖和节流](http://www.chenqaq.com/2018/03/20/js-debounce-throttle/)
+
+- [浏览器同源政策](http://www.chenqaq.com/2018/03/15/cross-domain-cors/)
+
+- [拥抱未来的布局方式：flex 和 grid](http://www.chenqaq.com/2018/03/07/css-layout-flex-grid/)
+
+
+# 2018年4\5\10月
+
+- [碎言心语-短笔记](https://www.chenqaq.com/2018/04/09/life-aboutIT/)
+
+- [requestAnimationFrame优化web动画](https://www.chenqaq.com/2018/05/15/js-requestAnimationFrame-md/)
+
+- [web安全-浅谈xss攻防（一）](https://www.chenqaq.com/2018/10/10/xss-attack-defense-md/)
+
+- [web安全-浅谈xss攻防（二）](https://www.chenqaq.com/2018/10/10/xss-attack-defense02-md/)
+
diff --git a/_posts/css-layout-flex-grid.md b/_posts/css-layout-flex-grid.md
@@ -1,27 +1,27 @@
----
-title: 拥抱未来的布局方式：flex 和 grid
-date: 2018-03-07 17:41:18
-tags:
-  - CSS
-  - layout
-categories:
-  - HTML/CSS
----
-
-相比传统的布局方式，flex 和 grid 使布局系统简化，轻松的解决了复杂的 web 布局。
-早在以前，所有的 HTML 布局还是通过 table，float 以及其他 css 属性来完成。面对复杂的布局，就没有很好的办法了。
-随着 flexbox 的出现，它专注于创建稳健的响应式页面布局模式，并轻松的正确对齐元素及其内容。如今已是我们的首选。
-
-<!-- more -->
-
-[Can I Use FlexBox?](https://caniuse.com/#feat=flexbox)
-
-![](http://www.chenqaq.com/assets/images/css-layout-flex1.png)
-
-如今 flexbox 随着浏览器的发展（IE9 以下版本渐渐退出舞台），flexbox 如火如荼成为了 css 布局的主流，前端开发者的首选。
-
-与此同时，grid 布局在 2010 年由 Microsoft 首次提出，目前已成为 W3C 候选标准，支持 grid 布局的浏览器也越来越多
-
-[Can I Use Grid?](https://caniuse.com/#feat=css-grid)
-
-![](http://www.chenqaq.com/assets/images/css-layout-grid1.png)
+---
+title: 拥抱未来的布局方式：flex 和 grid
+date: 2018-03-07 17:41:18
+tags:
+  - CSS
+  - layout
+categories:
+  - HTML/CSS
+---
+
+相比传统的布局方式，flex 和 grid 使布局系统简化，轻松的解决了复杂的 web 布局。
+早在以前，所有的 HTML 布局还是通过 table，float 以及其他 css 属性来完成。面对复杂的布局，就没有很好的办法了。
+随着 flexbox 的出现，它专注于创建稳健的响应式页面布局模式，并轻松的正确对齐元素及其内容。如今已是我们的首选。
+
+<!-- more -->
+
+[Can I Use FlexBox?](https://caniuse.com/#feat=flexbox)
+
+![](http://www.chenqaq.com/assets/images/css-layout-flex1.png)
+
+如今 flexbox 随着浏览器的发展（IE9 以下版本渐渐退出舞台），flexbox 如火如荼成为了 css 布局的主流，前端开发者的首选。
+
+与此同时，grid 布局在 2010 年由 Microsoft 首次提出，目前已成为 W3C 候选标准，支持 grid 布局的浏览器也越来越多
+
+[Can I Use Grid?](https://caniuse.com/#feat=css-grid)
+
+![](http://www.chenqaq.com/assets/images/css-layout-grid1.png)
diff --git a/_posts/life-20180928 b/_posts/life-20180928
@@ -1 +1 @@
-
+1测试linux-ssh和github的连接
diff --git a/_posts/linux-ssh-addToGithub-md.md b/_posts/linux-ssh-addToGithub-md.md
@@ -0,0 +1,73 @@
+---
+title: "linux下误将ssh密钥写入/root"
+date: 2018-10-05 12:05:37
+tags:  
+    - linux
+    - github
+    - ssh协议
+categories:
+    - linux
+# banner: /assets/05.jpg
+---
+
+无论是使用github类似的开源平台还是搭建的git服务器来团队协作开发，我们总是需要使用本地ssh密钥来建立连接，如果要使用ssh服务linux下我们还需要通过终端安装ssh并且开启ssh服务
+<!--more-->
+
+# 一.关于ssh密钥
+首先应该检查下是否存在ssh密钥，
+终端键入`ls -ah`查看是否存在.ssh文件，不存在则我们需要生成ssh密钥：
+终端键入`ssh-keygen -t rsa -C 'you_email@email.com'`
+
+回车之后下面是设置的密码，不设置回车即可。即：
+```
+Enter file in which to save the key (/home/.ssh/id_rsa): 【按回车】
+/*这一步不需要修改名字，否则后面我们通过`ssh -T git@github.com`检测是否建立连接会失败，因为ssh默认会读取id_rsa这个公钥*/
+Enter passphrase (empty for no passphrase): 【输入密码】
+Enter same passphrase again: 【再次输入密码】
+```
+然后将.ssh/id_rsa.pub添加进去你github中ssh中即可
+
+通过`sss -T git@github.com`检查连接是否建立成功，出现下面信息则提示已经建立连接喽
+```
+Hi username! You've successfully authenticated, but GitHub does not provide shell access.
+```
+然后回去观察你的github ssh and GpG keys的对应的ssh小钥匙灰色已经变成了绿色
+
+
+
+# 二.关于ssh服务
+对于linux下安装ssh服务相关，这里我做了简单的整理：
+### 1.查看ssh服务的状态
+输入`sudo service sshd status`:
+如果出现No such file or directory相关提示，说明还没有安装ssh服务
+如果提示Active:inactive(dead)，则已经安装了ssh服务，但是没有开启
+
+### 2.安装ssh服务
+因为linux发行版众多，有一些不同的安装方式
+redhat，fedora，centos等系列linux发行版可以尝试：
+`sudo yum install sshd`或者`sudo yum install openssh-server` 
+debian，ubuntu，linux mint等系列的linux发行版尝试：
+`sudo apt-get install sshd`或者`sudo apt-get install openssh-server`
+
+### 3.开启ssh服务
+在终端输入`sudo service sshd start`
+提示Active: active (running) since Sun 2018-10-5 13:43:11 CST; 15s ago则说明ssh服务已经启动成功
+
+### 4.卸载ssh服务
+和安装对应，我们可以使用
+`sudo yum remove sshd`和`sudo apt-get -purge remove sshd`
+来卸载ssh服务
+
+# 三.解决问题(Permission denied)
+因为误通过sudo命令生成ssh密钥，导致ssh密钥写入了/root系统文件，而引发后来一系列问题
+丢失了截图，在一次试错后：
+![请告诉我你的身份](https://www.chenqaq.com/assets/images/linux-ssh-error01.png)
+其实我安装git后已经设置了身份的，通过`git config --list`查看
+![git user config](https://www.chenqaq.com/assets/images/linux-ssh-user01.png)
+于是我很自然的先搁置这个问题，下面是Permission denied的报错：
+![Permission denied](https://www.chenqaq.com/assets/images/linux-ssh-error02.png)
+发现是权限问题，于是我反复检查，才发现自己误用了sudo命令，将ssh密钥写入了系统盘/root，导致权限不足，无法与远程建立连接。
+![误用sudo生成ssh密钥](https://www.chenqaq.com/assets/images/linux-ssh01.png)
+
+
+
diff --git a/_posts/xss-attack-defense-md.md b/_posts/xss-attack-defense-md.md
@@ -0,0 +1,76 @@
+---
+title: web安全-浅谈xss攻防（一）
+date: 2018-10-09 13:59:50
+tags:  
+    - web安全
+    - xss
+categories:
+    - xss
+# banner: /assets/05.jpg
+---
+
+# 前言
+近来反反复复读了一些xss和csrf攻防的一些文章，大体上读完了《XSS跨站脚本剖析与防御》这本书，之前浅浮的以为xss仅仅需要对用户输入内容进行过滤，然而现在重新审视xss的攻击技巧着实令人眼花缭乱。
+
+那到底什么是xss跨站脚本呢？它会造成什么危害？为何它如此流行？它的攻击方式有哪些？作为web开发人员我们应该做的有哪些？
+
+带着这几个问题，反复测试总结了这篇文章，一方面方便自己以后学习回顾，另一方面希望可以帮助到一些想对xss攻防有些了解的人，我相信这篇文章能够帮你理解上面几个问题。想要深入学习，建议还是去学习[《xss跨站脚本剖析与防御》](https://read.douban.com/ebook/12812565/)，这本书是邱永华先生所著，阿里首席安全研究员吴翰清作的序，细细读来定能有所收获；
+<!--more-->
+# XSS背景与介绍
+## 什么是XSS
+随着互联网的发展，web2.0时代的兴起，带来的交互模式的发展，现如今更是向融合人工智能的web3.0发展。目前的网站绝大多数都有需要和用户交互的功能，比如电商网站的评论，论坛的发帖，微博网站的转发等等。
+
+正常用户会中规中矩的使用，但是对于黑客他们也许不会循规蹈矩，他们可以通过这些表单提交一些恶意代码，通常是JavaScript（但是绝对不限与此，也包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML）一旦攻击成功后，攻击者可能获得更高的权限（可能的一些操作）、私密的网页内容、会话和cookie等等
+
+不过目前现代浏览器比如chrome，firefox对于表单中的代码会自动检测出xss，从而屏蔽请求，但仍然不是绝对安全的，与此同时不乏有一些浏览器如IE6,7,8并不会做这样的处理，亲测如此；chrome的xss过滤器叫做xssAuditor，IE的xss过滤xssFilter从IE8 beta2才开始，所以IE8及以下的浏览器不会做xss过滤处理，关于xssAuditor和xssFilter两者的区别，吴翰清大神所著的《白帽子讲web安全》有详细的介绍，
+
+>作为扩展简单的说，ie的xss检测相对粗暴，在系统盘的mshtml.dll中，是基于正则进行检测的；
+而chrome的xssAuditor的整合在webkit中，任何使用webkit内核的都可以使用这些规则，在词法解析阶段进行，和html解析不同的token，xssAuditor会逐一扫描并检测token，token中发现危险的属性和URL进行比较，如果URL中也存在同样的数据，xssAuditor则会认为是一个反射型xss。
+
+下面通过一个很简单的栗子说明：textarea中的一段`<script>alert(/XSS/)</script>`很简单的恶意代码，如果前后端和浏览器的xss检测都跳过，那么这段代码就会伴随请求被上传到漏洞服务器或者客户端中，站点从数据库中或者客户端读取恶意用户存入的非法数据，然后显示在页面，在受害者主机上的浏览器执行恶意代码，那么这个xss就会成功（其实就是让用户打开这个页面弹个屏的小恶作剧），但是这里就如同上面说的那样chrome的xssAuditor帮我们检测出了异常代码，从而拦截了这个网页，阻止了这个恶作剧的发生，我们把这种注入到服务器或者客户端的恶意代码的xss攻击方式称为持久性（又叫存储型）XSS
+
+<video src="https://www.chenqaq.com/assets/videos/xss01.mp4" controls allowfullscreen="true" loop="true" autoplay="autoplay" width="100%" min-height="100%">embed: xss--chrome_test</video>
+
+## XSS的分类
+根据攻击的来源不同，我们通常分为三种：反射型，存储型和比较特殊的DOM型（DOM-Based XSS）
+
+### 反射型
+反射型：反射性通常发生在URL地址的参数中，常用来窃取客户端的cookie或进行钓鱼欺骗，经常在网站的搜索栏，跳转的地方被注入；
+比如：
+```
+http://www.test.com/search.php?key="><script>alert("XSS")</script>
+http://www.test.com/logout.asp?out=l$url=javascript:alert(document.cookie)
+```
+我们发现URL后本来应该是正常的键值对key=value，却被注入了一段恶意代码（即构造了一个其中包含恶意代码的特殊的url），应该慎用get请求，对隐秘的信息则是避免，get请求的键值会被暴露在URL中；POST的内容也会触发反射型XSS，不过触发条件相对苛刻。
+
+当然如果地址栏看到上面两个URL，可能被轻易的看穿该链接是不可信的，但是绝不要小瞧此类XSS的威力，一般黑客都会进行精心布置，恶意URL暴露一般会进行各种编码转化，编码转换后，攻击的迷惑性大大提高
+![](https://www.chenqaq.com/assets/images/xss-encode01.png)
+
+### 持久型（又叫存储型）
+我们上面提到的栗子就是一个持久型xss的示例，可以看处此类xss攻击不需要用户去点击URL进行触发，提前将恶意代码保存在了漏洞服务器或者客户端中，站点取出后会自动解析执行，相比反射型更具有攻击性，通常发生在网站的留言，评论，博客日志等交互处。
+
+黑客可以利用它渗透网站、挂马、钓鱼...还有危害更大的xss蠕虫，跨站蠕虫用AJAX/JAVASCRIPT脚本语言编写的蠕虫病毒，可以在站点间实现病毒几何数级传播。
+### DOM型
+相比以上两种攻击类型，DOM型比较特殊，DOM型取出和执行恶意代码都由浏览器端完成，属于前端自身安全漏洞。主要由客户端的脚本通过DOM动态地输出到页面中，它不依赖于提交到服务器端，而从客户端获得DOM中的数据在本地执行.
+举个栗子：
+```js
+    let temp = document.URL;
+    let index = temp.indexOf("content") + 4;
+    let par = temp.substring(index);
+    document.write(decodeURL(par));
+```
+如果用户点击了带有下面链接的跳转，就会触发XSS漏洞
+```js
+https://www.test.com/dom.html?content=<script>alert(/xss/)</script>
+```
+
+更多XSS攻击方式可以关注xss cheat sheet，会看到很多常见的xss攻击脚本列表，可以作为Poc用来检测web应用程序是否存在xss漏洞
+
+# 续集
+web安全-浅谈xss攻防（二）：更多的关注整理一些防御措施
+
+# 参考资料
+[《XSS跨站脚本剖析与防御》--邱永华](https://book.douban.com/subject/25711796/)
+[《白帽子讲web安全》--吴翰清](https://book.douban.com/subject/10546925/)
+[《前端安全系列:如何防止XSS攻击？》--美团技术团队](https://juejin.im/post/5bad9140e51d450e935c6d64)
+