Zach Ke's Notes

Quick notes


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

  • 搜索

前端工具集(3) -- 检测密码框输入有没有开启大写标记

发表于 2018-06-08 | 分类于 前端工具集 | | 阅读次数:

之前做一个项目的时候,有个需求是用户在密码框输入密码的时候,如果当前是开启大写的话,那么就要给个提示。像这样子:
1

具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 检测有没有开启大写标记
* @param e
* @param showHandle
* @param hideHandle
*/
detectCapsLock: function (e, showHandle, hideHandle) {
e = e || window.event;
// 获取按键的keyCode
var keyCode = e.keyCode || e.which;
var isShift = e.shiftKey || (keyCode === 16 ) || false;
// 判断shift键是否按住
if (((keyCode >= 65 && keyCode <= 90 ) && !isShift) || ((keyCode >= 97 && keyCode <= 122 ) && isShift)) {
if (_.isFunction(showHandle)) {
showHandle();
}
} else {
if (_.isFunction(hideHandle)) {
hideHandle();
}
}
}

ps: 后面我发现在我的mac book pro 中会失效,因为我的电脑的大写的方式是先按住shift键,然后再按下字母键。其实这个逻辑不在上面的判断中,所以会无效

webrtc 的 signal 服务器 VerneMQ 的集群设置

发表于 2018-06-07 | 分类于 webrtc相关 | | 阅读次数:

通过webrtc 的 signal 服务器 VerneMQ 的权限校验 我们已经将VerneMQ 的权限校验设置成redis校验了。我们知道VerneMQ作为一个开源的基于MQTT的broker服务,它是支持分布式集群的。也就是说客户端可以连接到任何的节点,并且从其他的节点中接收消息。
举个例子:有两台服务器A和B,这两台服务器构成一个集群,然后 client1 连上A服务器,并订阅(sub)这个主题”say”, 这时候client2 连上B服务器,并给主题”say” 发布(pub)了一个消息,这时候client1就会收到这一条消息了。
官网的文档说的还是挺详细的 https://vernemq.com/docs/clustering/ ,我这边主要是根据我的理解简单说下几个要注意的点。

阅读全文 »

php 本地调试出现 $HTTP_RAW_POST_DATA is deprecated

发表于 2018-06-07 | 分类于 php相关 | | 阅读次数:

之前在用一个php项目在做本地调试的时候,用postman 来进行 post 请求,有报了一个这个错误:
1
后面查了一下资料,原来是有一个配置要设置
https://stackoverflow.com/questions/26261001/warning-about-http-raw-post-data-being-deprecated
要在php.ini 将 always_populate_raw_post_data 这个配置设置为 -1,

阅读全文 »

github建站系列(13) -- 域名加 ssl

发表于 2018-06-06 | 分类于 github建站系列 | | 阅读次数:

前言

之前有考虑过为了更安全,给 kebingzao.com 加上 https, 看到很多人的站点都是用的是 Let's Encrypt 免费的 ssl 证书, 不过有效期比较短,就 90天左右。

1

不过这个是免费的,因此我也想去搞一个,https://letsencrypt.org/, 但是我后面看了一下,因为我这个项目是托管到 github 的 page 上面的。 这样就意味着,没法使用这种证书了。原因如下:

1
2
3
4
默认情况下使用GitHub Pages的给定域名则支持http和https两种协议,但是如果使用自定义域名的话,则只能通过http://访问,
也就是说我们在Github上搭建 Hexo 或Jekyll 主题博客后,通过CNAME绑定个人域名后,
我们只能通过http://域名来访问。如果访问https://XXX.github.io/(即原来的GitHub Pages域名)将会被重定向到我们的自定义域名。
但若直接访问https://我们的自定义域名,浏览器会报SSL_DOMAIN_NOT_MATCHED警告。

阅读全文 »

信息安全入侵总结

发表于 2018-06-05 | 分类于 web安全 | | 阅读次数:

前端时间在微信上上了一节曹政大佬的网课,讲的是关于信息安全的基础培训课。虽然上面说的是面向非技术岗位的安全常识培训和安全意识培养,不涉及具体的研发管理,但是一节课听了下来,作为一个研发人员,我觉得还是收获颇多。
虽然在平时的工作中,对于安全方面的知识和防护,会比非技术人员还要熟悉和了解,但是毕竟缺乏比较系统和全面的认知,刚好趁着这个机会,也好好重新梳理以下, 因此本篇文章更多的是作为一个课后的听后感,并且结合自己的经验的一个简单的总结,当然如果内容有涉及到侵权的话,那么请邮件联系我,或者在下方留言,我会删除掉涉及侵权的内容,并道歉。
还有就是对之前我写的一篇关于web安全的文章的进行再补充:web安全系列(1) - web 安全攻击和防护。
基础的东西我这边就不说了,主要还是介绍各种入侵和攻击行为的原理和基本防范常识。

  1. 彩虹库及密码碰撞
  2. 嗅探侦听
  3. 劫持,钓鱼
  4. 木马植入,蠕虫
  5. 拒绝服务
  6. SQL注入与跨站脚本
  7. 溢出攻击
  8. 架构耦合问题
阅读全文 »

paypal的webhook走转发代理

发表于 2018-06-04 | 分类于 支付相关 | | 阅读次数:

通过 paypal支付在测试环境下webhook过不来的原因 为了解决测试环境下收不到paypal webhook的情况,我们将pay项目的测试环境放到国外的服务器,但是这个又引发了新的问题,就是接口请求速度太慢了。相当于跨区请求,而且测试库又在国内, 所以就导致, 请求从国内到国外,然后国外从国内连接数据库, 随后response从国外传回国内。 来来回回至少两趟, 因此接口会经常超时。导致测试很不方便。
所以为了线路问题和测试的便利性,还得把pay项目的测试环境放到国内来,这么一来我们就得解决paypal webhook收不到的问题。
后面我们想出来的解决方案就是,将pay项目的测试域名分区,就是中国区还是走测试服那一台,而国外的请求就走预发布环境那一台的,然后再将这个请求转发到国内的测试服上来,这样子paypal的webhook就可以先到达预发布那一台,然后在经由预发布那一台将请求转发到国内的测试服上来,从而可以解决webhook的问题。

阅读全文 »

paypal支付在测试环境下webhook过不来的原因

发表于 2018-06-04 | 分类于 支付相关 | | 阅读次数:

之前做的一个支付项目,里面有用到了paypal支付,线上支付和webhook回调都正常,但是问题就出在测试环境上,当时修改代码之后,部署到测试服,自己在沙盒测试的时候,发现支付成功之后,根本就没有webhook过来。而且查看了一下测试服对应的PayPal账号的 Sandbox Webhooks Events,发现竟然全部都发送失败了。
1
这下就蛋疼了,如果测试服的 webhook 没有过来,那怎么测试啊, 总不可能,没有测试就放到线上啊。后面想到,可能有一种情况会导致PayPal的webhook过不了,就是pay的测试服环境是国内的服务器。有可能PayPal的webhook 通知请求被长城防火墙给拦了,导致没法到达我们的服务器。而我们的线上服务器是在国外的,因此没问题。

阅读全文 »

webrtc 的 signal 服务器 VerneMQ 的权限校验

发表于 2018-06-03 | 分类于 webrtc相关 | | 阅读次数:

通过 webrtc 的 signal 服务器 VerneMQ 的搭建 我们已经安装了VerneMQ 服务,接下来就是设置校验了。vernemq 有三种权限校验的方式: 我们接下来一个一个用:
https://vernemq.com/docs/configuration/file-auth.html

1 密码文件校验的方式:

要开启密码校验的方式,就要修改 vernemq.conf 的配置文件, 将以下的配置改成:

1
2
3
4
5
allow_anonymous = off
plugins.vmq_passwd = on
vmq_passwd.password_file = /etc/vernemq/vmq.passwd
vmq_passwd.password_reload_interval = 10
plugins.vmq_acl = on

ps: 注意 plugins.vmq_acl = on 这个也要开启,不然会处于一直连接中的状态,这个是因为 密码文件校验只能校验 auth,也就是能不能连接上。而 acl 校验是校验用户连上之后是否能sub 或者 pub, 所以这个也要开。其实就是关闭连接无校验方式,然后开启密码文件连接校验方式,同时将 密码校验的间隔设置为 10s,接下来我们就通过这个自带的 密码文件管理的 工具来生成一个密码校验

阅读全文 »

webrtc 的 signal 服务器 VerneMQ 的搭建

发表于 2018-05-30 | 分类于 webrtc相关 | | 阅读次数:

这段时间正在做一个基于webrtc 技术的项目,其中就涉及到了 signal 服务器的搭建, 因为都是长链接, 相对于比较重的websocket,我选择更轻量级的 mqtt 协议来进行SDP 和 ICE 信息的传输,
参考了目前市面上实现了mqtt协议的服务,最后选择了 vernemq 这一个开源的服务来实现, 地址如下: https://vernemq.com/,
好处就是一个是开源的服务,另一个就是基于分布式的,当然还有一些其他的。

接下来就是搭建了,这个其实官方文档写的已经很详细了,有docker安装,也有下载二进制安装, 还有直接下载源码编译安装。这边我主要是用docker安装和二进制安装两种方式

1. docker 安装

文档如下:https://vernemq.com/docs/installation/docker.html

我的环境是centos7,在已经安装docker的环境下,直接执行

1
docker run -e "DOCKER_VERNEMQ_ALLOW_ANONYMOUS=on" --name vernemq1 -d erlio/docker-vernemq

因为默认是有权限校验的,所以通过 DOCKER_VERNEMQ_ALLOW_ANONYMOUS 将权限关掉,允许任何人可以连上来。
实际安装的log如下:

阅读全文 »

理想的生活境界-随心所欲而不逾矩

发表于 2018-05-29 | 分类于 杂文 | | 阅读次数:

最近在抖音上看到了一句话很有感触: 随心所欲而不逾矩
最高的高人就是 我既能随心所欲还能不破坏规矩, 这句话简直说到了我的心坎里。
后面我查了一下这句话是孔子说的:

随心所欲不逾矩出自《论语·第二章·为政篇》子曰:“吾十有五而志于学,三十而立,四十而不惑,五十而知天命,六十而耳顺,七十而从心所欲不逾矩。”

孔子他老人家认为至少要达到七十才能达到这种境界,毫无疑问,要达到这种境界需要丰厚的生活阅历和强大的心理素养。

随着社会阅历的增加,你会被这个社会慢慢的同化,你身上的童真和率真会变得越来越少,世故会在你的身上越来越多。 当然这不一定是坏事,毕竟人是需要慢慢成长从而变得成熟的,因此我更倾向于成长的代价。

阅读全文 »

人到三十怎能不惑 -- FD2018 中国前端开发者大会参会感

发表于 2018-05-23 | 分类于 杂文 | | 阅读次数:

上周六去上海参加了第三届中国前端开发者大会,当然说到这一点,必须在这边再次感谢公司,能够让我有这次机会借着公费出差的方式去学习,而且一买就是vip的票,直接坐在嘉宾第二排,真的是壕无人性 ε٩(๑> ₃ <)۶з

1

1

当然有一点要吐槽的是,会场的贴纸竟然是小猪佩奇,我只能说太社会了 ╮(๑•́ ₃•̀๑)╭
当然在分享的过程中,技术干货其实也不少,总算也没有白去啊。

阅读全文 »

添加钉钉机器人通知

发表于 2018-05-15 | 分类于 node相关 | | 阅读次数:

之前有个需求就是我每天早上都要到那个小伙伴群去通知他们要写日报。
这样真的很烦,后面我就写了一个机器人的webhook,周一到周五的10点的 0分,10分,各推送一次,通知他们要写日报
因为是常驻程序,所以就用nodejs写了一个发起webhook的post请求,然后用forever 启动就行了。
关于钉钉机器人的创建,文档直接看这边:传送门

nodejs的代码如下:(access token 怎么得到直接看上面的文档):

阅读全文 »

github建站系列(12) -- 文章底下增加 copyright

发表于 2018-05-10 | 分类于 github建站系列 | | 阅读次数:

前言

写 blog 文章的时候,我们一般都会想在文章底下增加 copyright 的版权声明。要求转载者要注明出处, 毕竟是自己的心血,也不能被白蹭。

操作

这个其实很简单,因为我们用的是 hexo 的 next 主题。 它是有带这个功能的,只不过默认不开启而已。

所以我们只要在 theme/next/_config.yml 的 post_copyright 改为 true 就行了,其他都不用改

1
2
3
4
5
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

这样就可以了,刷新一下:

阅读全文 »

github建站系列(11) -- 对首页的部分长文章增加了阅读全文的按钮

发表于 2018-05-09 | 分类于 github建站系列 | | 阅读次数:

前言

发现写文章的时候,如果文章很长的时候,会直接显示在首页。所以我们要加个 阅读全文的按钮, 这样子在首页就只显示一部分。 参考文章 Hexo-设置阅读全文。

我们用最简单的方式,就是在想要插入按钮的哪个地方,加上 <!—more—>, 这样就行了

操作

1
2
3
这篇文章讲的还是很详细的,其方法就是用 image src 请求,抛送 ga 请求
<!--more-->
当然ga请求的参数有很多,我这边大概列了,本次需要的字段的说明,其中 tid 就是GA统计的哪个id值

那么展示效果就是:

阅读全文 »

github建站系列(10) -- 增加 algolia 的搜索功能

发表于 2018-05-08 | 分类于 github建站系列 | | 阅读次数:

前言

随着文章写的越来越多,有时候要找一篇文章,可能要找很久,所以我们将为 blog 增加文章的搜索功能, 还是一样我们直接接入第三方服务即可,不需要自己做 server 端,能白蹭就不自己写代码。

我们用这个服务 Algolia, 详细的操作文档可以查看 next 接入 Algolia 搜索功能

文档其实写的很清楚,所以我们按照文档来即可

操作

前往 Algolia 注册页面,注册一个新账户。 可以使用 GitHub 或者 Google 账户直接登录,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。注册完成后,创建一个新的 Index,这个 Index 将在后面使用。

阅读全文 »

github建站系列(9) -- 写文章的时候,插入图片

发表于 2018-05-07 | 分类于 github建站系列 | | 阅读次数:

前言

虽然可以写文章了,但是怎么插入图片呢,或者说怎么插入本地项目的图片呢? 后面找了一下,有篇文章 hexo生成博文插入图片 讲的还可以。所以就按照他的方式试了一下。

操作

还是一样几个步骤

  1. 把主页配置文件 _config.yml 里的 post_asset_folder: 这个选项设置为 true
  2. 在你的 hexo 目录下执行这样一句话 npm install hexo-asset-image --save,这是下载安装一个可以上传本地图片的插件
阅读全文 »

在邮件模板里面增加ga统计来统计邮件的打开率

发表于 2018-05-07 | 分类于 前端相关 | | 阅读次数:

之前项目在做发送邮件模版的时候,有一个需求是要统计这封邮件有多少次被打开过。
而我们项目用的统计站点是google 统计, 即GA, 而且GA本身就有实时统计的功能。
那么接下来的问题就是怎么把GA统计放到邮件里面,要知道邮件里面可是不能执行js代码的。

后面参照了这位大佬的文章终于找到了解决方案: 传送门
这篇文章讲的还是很详细的,其方法就是用 image src 请求,抛送 ga 请求

阅读全文 »

web安全系列(1) - web 安全攻击和防护

发表于 2018-05-06 | 分类于 web安全 | | 阅读次数:

前段时间公司有进行了一次关于web安全的分享会,因此也打算写一个关于web安全的系列。
本篇作为总纲先列一下,后面有空的话,会根据不同的攻击方式来单独写文章。
web安全作为一个系列,后面也会去一直的迭代和更新。

web安全攻击以及防护

1. 跨网站脚本(Cross-site scripting,通常简称为XSS或跨站脚本或跨站脚本攻击)

描述

跨网站脚本(Cross-site scripting,通常简称为XSS或跨站脚本或跨站脚本攻击)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括Java, VBScript, ActiveX, Flash 或者甚至是普通的HTML。攻击成功后,攻击者可能得到更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。

防护

对于任何的参数请求以及页面中涉及到的用户信息全部都要进行特殊字符的过滤,进行 html转义,防止触发恶意脚本

阅读全文 »

前端工具集(2) -- 原生实现jquery的document.ready

发表于 2018-05-06 | 分类于 前端工具集 | | 阅读次数:

前言

之前有一个项目要用到document.ready的方法,
毕竟document.ready的效果要比监听原生的window.onload事件来的优秀(陈独秀??),但是又担心jquery的库太大。
因此就自己去扣 jquery的 document.ready, 然后拿过来用(还能再无耻一点吗)

前端实现

阅读全文 »

前端工具集(1) -- jsonp原生实现

发表于 2018-05-06 | 分类于 前端工具集 | | 阅读次数:

前言

做了好几年的前端了,也用了很多的工具函数,比如 jquery,underscore,lodash 之类的。
但是其实很多时候为了减少体积,其实很多的工具都是自己写的,之前都是放在 evernote 里面。
这次为了充实我的blog,我只能厚颜无耻都重新贴出来了 XD

jsonp 原理 (简单列一下,不打算科普,因为打字好蛋疼)

jsonp是一种跨域通信的手段,它的原理其实很简单:

  1. 首先是利用script标签的src属性来实现跨域(跨过同源策略)。
  2. 然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。
  3. 由于使用script标签的src属性,因此只支持get方法

前端实现工具类

阅读全文 »
1…141516
Zach Ke

Zach Ke

做最咸的那一条

316 日志
31 分类
83 标签
GitHub
© 2024 Zach Ke
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.4