本篇文章介绍学习MongoDB的一些常用命令,希望能帮助大家.
Web 性能优化(2)——分析 Prefetch
对于文件的预加载的作用并不是直接加快网站的加载速度。预加载是提前准备好你所需要的资源,然后当需要的时候即可直接调用、直接完成页面的渲染,不造成阻塞。
Web 性能优化(1)——浅尝 Service Worker
静态内容非常适合做缓存来加速页面的访问,除了使用 CDN 实现加速之外,通过客户端也可以实现更好的访问体验。本文就利用 Service Worker 来探讨基于静态资源的加速方案。
为 Hexo 博客添加评论系统
由于 Hexo 本身已经弃用了 swig 支持,所以本文教程是根据 ejs 语言来写的。如果使用了如 NexT 等基于 swig 的 Hexo 主题,请自行切换。
Hexo 是一款静态博客,所以不像 WordPress 或者 Typecho 这类动态博客一样支持原生评论系统,所以一般需要引入第三方评论系统。国内常见的评论系统有多说、友言、畅言等,国外的有 Disqus 和 Moss。
在写作本文的时候,多说已经宣布即将暂停服务,很多使用多说的人都在寻找解决方案;加上网络上找到的解决方案大多都不具备通用性,而且也不具备太多指导意义,这也是为什么我写作本文的原因。
强烈建议:在阅读本文并根据本文进行操作前,请仔细阅读 Hexo 的 API 和主题开发的有关文档!
修改主题配置文件
在主题文件夹下的 _config.yml
(以下简称主题配置文件)合适位置中加入以下内容:
1 | comment: |
注意,这些评论系统的配置内容仅供参考。有的评论系统可能需要配置更多信息或者不需要配置某些信息(如友言需要配置 conf、appid 而不是 shortname),请自行根据需求进行修改。
如果你的修改只是给你一个人使用,这一步可以忽略。但是如果你想把你的成果分享出去或提交给上游,建议通过主题配置文件的方法配置这些属性,这样可以方便更多人使用。
添加评论 ejs
在主题内的合适位置新建一个 ejs 文件,命名如 comment.ejs
,填入评论框的公共代码(即包括引用有关 js 文件等的代码)加上评论框的代码。
对于评论系统的公共代码,你也可以插入在其它位置。以 Material 主题为例,typecho-theme-material 的评论公共代码在侧边栏,hexo-theme-material 的评论公共代码在 footer。
然后,替换提供的代码中的有关变量。常见的变量有 shortname、page_identifier 等。这些变量可以通过 Hexo 的 API 进行调用。比如你可以使用 <%= theme.comment.shortname %>
这样的 API 即可调用你在主题配置文件中的 comment.hortname
属性中赋的值。
当然,正如我在上一步所说,如果你的修改只是供你一个人使用,你可以直接将你的变量值替换到这段代码中,而不需要额外通过主题配置文件进行调用。
在文章页面添加评论
在类似于 post.ejs
的文件中,在文章结尾处插入<%- partial('/THE_PATH_TO/comment') %>
来调用 /YOUR PATH/comment.ejs
文件。这样在 Hexo 生成静态页面时就会把评论部分插入进去。
实践
以上内容是 Hexo 主题加入评论系统的方法。现在介绍一下 Material 主题的评论系统是如何添加的。
Material 主题涉及到评论系统的组件有:
- post.ejs(文章页面,引用评论系统)
- layout/_partial/comment.ejs(评论框)
- layout/_partial/footer-option.ejs(评论系统公共代码)
- layout/_widget/disqus.ejs(Disqus 评论框组件)
- layout/_widget/duoshuo.ejs(多说评论框组件)
首先,我们在主题配置文件中,写入以下内容:
1 | # Comment Systems |
这些用来定义评论系统在主题配置文件中的变量。
然后,在 footer-options.ejs
加入下述代码:
1 | <% if(theme.comment.use === 'duoshuo') { %> |
这一段包括了一个判断,那就是通过判断用户在主题配置文件里配置的值来判断用户选择的评论系统,并选择加载哪一段代码。
接下来是创建 duoshuo.ejs
和 disqus.ejs
。这个是评论框的组件。里面的一些变量换成了由 Hexo 的主题配置文件里的变量。
下面这个是
duoshuo.ejs
的内容。
1 | <%- css('css/duoshuo.min') %> |
下面这个是
disqus.ejs
的内容。
1 | <div id="disqus_thread"></div> |
本文给了这两个文件在 Github 的链接。大家可以直接参考。
然后我们创建了 comment.ejs
,根据用户的配置,判断加载哪一个评论框。
1 | <% if(theme.comment.use === 'duoshuo') { %> |
最后就是在 post.ejs
里引用这个模块加载评论。
1 | <%- partial('_partial/comment') %> |
在 Material 主题现有的框架基础上添加评论系统可以参考 Material 主题的 Pull Request #247,这是一位 Contributer 为 Material 主题添加了畅言评论系统的支持。
由于多说的关闭,Material 主题接下来也会去除对多说评论系统的支持。 大家可以根据本文的思路自己更换为新的评论系统。我们也欢迎大家把你的改动贡献到给 Material 主题,来 Open a new pull request 吧!
MongoDB安装笔记
利用CSF防火墙屏蔽恶意请求
问题
最近不知道为什么,恶意代理的请求数越来越多,明明我返回的都是403Forbidden,但是由于数量实在庞大,还是消耗了我大量的带宽和资源。之前的方法已经没有用了,想了半天还是研究研究防火墙吧,虽然仅仅靠Apache也能对某些IP进行黑名单设置,但是感觉还是有点麻烦的。比如最常见的用iptables,或者是ufw,虽然都能很好的做到管理,但是他们基本都需要一条一条的加,十分麻烦。
网上搜索了下,找到了一个挺方便的小工具–CSF(ConfigServer & Security Firewall),这个工具据说除了能够方便的管理IP blacklist,而且也能稍加配置抵御一定量的DDOS攻击。
安装
工具本身可以在csf工具的官网上下载。
下载并解压后可以参考其中的install.txt
的说明进行安装,讲的简洁而且详细,注意给权限就行。需要说明的是,这个工具其实也是基于iptables,只是简化了命令而已。
关于ddos的防护
根据readme.txt的描述,进行ddos防护的功能主要是靠/etc/csf/csf.conf
中的配置进行控制的,尤其是当中的PORTFLOOD
参数,一般都进行如下设置:
1 | #Syntax for the PORTFLOOD setting: |
这个可以根据个人需要修改。
关于black list
blacklist 就在/etc/csf/csf.deny
里,可以有多种书写方式,在该文件的顶部描述的十分清楚:
1 | ############################################################################### |
简要概括就是每一行代表一个ip,也可以代表一个ip段(CIDR),而且我们也可以加注释,甚至可以指定端口和协议。
最后,在做出修改后想要生效记得用csf -r
命令。
针对恶意代理请求的防护方案
当然,我用这个的目的是为了根本解决之前的恶意代理占用带宽的问题。有了这个工具,就可以十分轻松的进行控制了,思路如下:
- 首先,搜索Apache的log(
/var/log/apache2/access.log
),查找所有应被屏蔽的log条目(我这里指的是所有被403的请求)。 - 然后,提取每条Log记录对应的ip地址。
- 对结果进行排序去重,生成black list。
- blacklist 写入csf.deny
- 重启csf防护服务。
实现起来超级简单:
1 | root@server:~# cat /var/log/apache2/access.log |grep \ 403\ |awk '{print $1}'|sort|uniq >> /etc/csf/csf.deny |
可以手动查看下结果是否正确,确认之后既可以csf -r
重启服务了。
记一次菜鸡的运维经历--对抗恶意代理攻击
事情的起因
这是一个悲伤的故事。2017年3月15号,当我开开心心的起床吃中饭的时候,突然发现收到了阿里云的一条邮件:
我就纳闷了,阿里每个月都会送10块钱的流量代金券,1G流量也就8毛钱,为啥才月半就全没了,我的小网站有这么受欢迎?本来想缓缓搞得,不过果然没过多久,服务器就强行被关停了,不得已冲了2块钱,上去研究研究到底是什么鬼。打开阿里云的流量监控器,一脸蒙b:
最左边是前几天正常情况下的流量,3月12号到13号那会的流量基本是0-10kbps的上下行,到了15号12点居然达到了3Mbps的上行,4Mbps的下行。。。难怪瞬间我的流量就被耗光了,照这么下去的话2块钱的流量钱全烧掉也是指日可待。没办法,只有学着去排查原因。
Log分析
首先我想到的肯定是apache的问题,毕竟我在服务器上基本也就开了这一个对外服务。
打开apache的log,查看了下/var/log/apache2/access.log
,发现了很多奇怪的请求:
1 | 107.151.148.193 - - [12/Mar/2017:23:36:22 +0800] "POST http://www.proxyjudge.info/azenv.php HTTP/1.1" 502 696 "-" "Mozilla/5.0 (compatible; MSIE 6.0; Windows NT 5.1; Trident/5.0)" |
proxyjudge? 什么鬼?这域名名字起的也太嚣张了吧,这不是大张旗鼓搜寻肉鸡的节奏么,竟然还搜到了我的头上了。。。这请求啥意思啊,用我的服务器做代理去访问他的那个proxyjudge,蛋疼的是我的服务器居然还老老实实的返回了正确的结果(200)。写过爬虫的人都知道,我的服务器这会就变成了一个彻彻底底的代理服务器,使用者的所有http请求都会经由我的服务器以我的名义发起。更有甚者竟然用sbjudge
这个名字。。。
越想越气,于是抱着好奇的想法,我试了试用浏览器访proxyjudge.info
这个网站,发现他好像只是一个提供一个返回请求信息的公益网站(虽然当我试图查他的whois的时候发现他申请了隐私保护。。。),并没有什么恶意,而且他还善意的提醒了我们什么是http头,以及如果出现了类似上述场景意味着什么:
原来,这类网站只是被一些恶意的人用来探测网络上的主机是不是开启了正向代理,如果开了就会利用这些主机作为自己的免费代理。正常情况下,显然是404,这对被探测的机子来说并没有什么影响。这就像一个小偷挨家挨户的敲门,如果门是闭着的,那小偷就会去试下一家,如果发现门是开的,那小偷就不客气了:
1 | 60.10.115.59 - - [13/Mar/2017:04:03:30 +0800] "GET http://reg.163.com/services/checkUsername?username=m53427233031@163.com&product=urs HTTP/1.1" 200 390 "http://reg.163.com/reg/reg.jsp?product=urs" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 QIHU 360SE" |
我甚至都能猜到这家伙在做啥,估计是想注册163邮箱的什么东西。。。
然而,这只是在最近两三天产生的高达2G的log文件的一部分。。。上面的真的只是冰山一角,可以想见,连log都这么大了,他们爬的东西肯定不少。。。
于此同时,我还发现了一个搞笑的事情,我在log中还发现了一堆这样的请求:
1 | 27.148.156.159 - - [16/Mar/2017:18:08:01 +0800] "GET http://103.198.73.117:9207/ HTTP/1.1" 200 639 "http://103.198.73.117:9207" "Mozilla/5.0+(compatible;+Baiduspider/2.0;++http://www.baidu.com/search/spider.html)" |
咦?乍一看referer好像是baidu的爬虫啊,得好好招待,不过仔细一看,他怎么不好好请求正常的页面,还是把我的服务器当成代理一样在用。好奇的我看了看baidu的spider页面,发现了这样的东西:
用他介绍的方法一试,果然露出了马脚:
1 | myths@pc:~$ host 27.148.156.159 |
再来看看人家正常的BaiduSpider干的事:
1 | 123.125.71.107 - - [18/Mar/2017:00:46:07 +0800] "GET /page/3/ HTTP/1.1" 200 11633 "-" "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)" |
人家请求的可是正经的网站子页面,再用反向dns一查,果然是靠谱的:
1 | myths@pc:~$ host 123.125.71.107 |
做这种事情的人不仅是小偷,而且诚信也有问题。。。不过回头想想,为啥人家要假扮成baiduSpider呢?我想这是因为有很多的服务器都会设置User-agent的过滤,对于一般的UA警惕性比较高,而对于baiduSpider的警惕性可能会降低,因此他们才会这样设置。
问题解决
既然找到了问题所在,那解决起来也就很”简单”了,显然这是我不小心给apache配置了未加限制的正向代理导致的,那么修改下apache2的代理配置就好了。打开/etc/apache2/mods-enabled/proxy.conf
:
1 | # If you want to use apache2 as a forward proxy, uncomment the |
注意把ProxyRequests On
給注释掉就好了,原因也在注释里说的很清楚。
还没完
不过修改完配置并且重启了之后还是发现了有很多恶意请求。由于我关闭了正向代理,所以返回的基本都是404,但是发现下面对于这种请求竟然我还是返回了200:
1 | 192.187.101.50 - - [19/Mar/2017:14:43:04 +0800] "GET http://29099b.com/ HTTP/1.1" 200 635 "http://29099b.com" "Mozilla/5.0+(compatible;+Baiduspider/2.0;++http://www.baidu.com/search/spider.html)" |
不知道是因为什么原因,如果请求方想以我为代理访问他自己,返回的结果都是200。这就很尴尬了,虽然不知道他这么做的目的是什么,但是他这种方式的确成功的影响了我的服务器性能,得赶快阻止。
研究了半天终于想到了一个算是方法的方法。
我现在对服务器的需求是,开启80端口和443端口,其中443端口访问的是我的博客,同时80端口也要将合理的http请求重定向到443端口的https上。于此同时,我要保证80端口不会响应恶意请求,尤其是上面这种类型。因此,我将80端口对应的DocumentRoot下的.htaccess修改如下:
1 | RewriteEngine on |
其中前三个转移就是将正常的请求转发到443端口,最后一个请求就是将剩余的所有非法请求都返回403Forbidden。经过这样的处理后,对于之前的请求就会产生下面的log:
1 | 192.187.101.50 - - [19/Mar/2017:14:50:07 +0800] "GET http://29099b.com/ HTTP/1.1" 403 414 "http://29099b.com" "Mozilla/5.0+(compatible;+Baiduspider/2.0;++http://www.baidu.com/search/spider.html)" |
成功识别了这种恶意访问请求。
最后
虽然上面的配置合理的识别的恶意代理攻击,但是也并不能阻止人家不停的发送请求,只能是一种被动的防御。
UbuntuServer配置中文显示
问题
最近直接在Server上编辑文件的时候才发现,原来我们的Ubuntu Server竟然没有自带中文,输进去的中文都成了乱码,煞是难看。研究了一会配置中文显示的方法,稍微花了点时间,这里姑且记一下方便以后查找。
解决思路
要解决这个问题,首先我们需要了解我们当前系统支持什么语言,一番搜索发现了如下命令:
1 | root@server:/#locale |
这个命令显示了关于语言的一些环境变量,显然有很多是英文en_US
,当然,我们需要把他们改成中文的zh_CN
。不过这里有一个问题,那就是我怎么知道我把配置改成中文之后这个系统到底支不支持呢?因此我用下面的命令查看了下系统当前支持的语言:
1 | C |
当然,我们也可以在/var/lib/locales/supported.d/local
查看当前系统支持的语言:
1 | root@server:/usr/lib/locale#cat /var/lib/locales/supported.d/local |
果然,在这些当中并没有看到中文语言,那么我就要来安装语言包了。
安装语言包需要用到locale-gen
这个命令,用法很简单:
1 | root@server:/usr/lib/locale#locale-gen zh_CN.UTF-8 |
OK,现在我们就发现系统已经安装了中文依赖:
1 | root@server:/usr/lib/locale#cat /var/lib/locales/supported.d/local |
最后,我们需要修改一下默认配置即可,即把/etc/default/locale
里的文件改成如下:
1 | root@server:/usr/lib/locale#cat /etc/default/locale |
现在就可以正常的显示中文了,检查一下当前的配置:
1 | root@server:/var/www/html/hexo/source/_posts#locale |
连之前的warning也顺便消除了。。。
Angular2下使用pdf插件
前言
最近需要在Angualr2建的项目里做一个pdf显示的功能,在网上找了个插件,不过由于是第一次使用额外插件,在用的时候遇到了一些坑,这里权且记一下使用的步骤,方便以后的参考。
安装
这里需要安装两个包:pdfjs-dist
和ng2-pdf-viewer
,安装时是要顺便保存到package.json
里的,因此在项目根目录下输入下面命令:
1 | npm install pdfjs-dist --save |
于此同时,我们还要在system.config.js
里添加映射,否则会加载不到这个插件。我们需要添加两个地方,首先是要添加在其中的map
变量下:
1 | var map = { |
然后还要添加在packages
变量下:
1 | var packages = { |
这样我们才能正确的引用这个包。
注册主配置文件
要使用他,我们还要在app.module.ts
文件里注册这个包,才能在其他文件里使用,一个最简单的配置如下:
1 | import { NgModule } from '@angular/core'; |
注意要import
,然后在@NgModule
里的declarations
里注册即可。
页面配置
在模板页面中,只要在适当的位置添加类似下面的标签:
1 | <pdf-viewer [src]="pdfSrc" |
然后在.ts
文件里定义pdfSrc
以及page
变量,即可控制显示的文件路径以及页数。
这里需要注意的是文件源如果是跨域的话是会报一个error的,而且这里的page是竖排显示的而不是带滚轮的显示,因此这实际上显示的是一张一张的图片。
当然,pdf-viewer
还有很多其他的属性,比如支持缩放,旋转,以及提供了一系列相关的回调函数,具体的可以在github里找到。
样例
参考
github/VadimDez/ng2-pdf-viewer
SYSTEMJS.md
Angular 2 PDF Viewer and thumbnail creation