Hshen

人若无名 便可潜心练剑

0%

Posted on Edited on

在公司拉github代码还是蛮快的，但是回到家用浏览器Socks5上GitHub贼快，但是Terminal默认不走Socks5所以拉代码贼慢，解决方法：让Terminal也走Socks5

在Terminal输入以下代码

1
2
# 临时改变Terminal的代理，窗口关闭后失效
export all_proxy=socks5://proxy.hackshen.com:1080

把以下方法copy到你的~/.zshrc文件里

1
2
3
4
5
6
7
8
9
10
# Terminal proxy
function proxy_off(){
    unset http_proxy
    echo -e "已关闭代理"
}

function proxy_on() {
    export all_proxy=socks5://proxy.hackshen.com:1080 # 配置http和https访问
    echo -e "已开启代理"
}

Posted on Edited on

Referer 请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。

作用

  • 防盗链

    • 常见的图片防倒链: 比如你把百度图库的图片链接放到你的项目，图片不能正常显示

  • 防止恶意请求

    • 接口调用: 通过referer 判断只允许自己项目的域调用此接口

  • 回跳

    • 登录：用户在登录页验证后回跳到到原来的页面

Posted on Edited on

1、查看当前系统是否有zsh

1
cat /etc/shells

2、如果没有zsh执行下面命令安装，如果已安装直接跳到第三步

1
sudo yum install zsh -y

3、安装oh-my-zsh

1
sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

Posted on Edited on

公司用的是gitlab，但是有时候我也会向GitHub上面push代码，这就需要在本地配置多个公钥

1、首先在本地生成一个公钥和私钥，回车输入你自定义的公钥名称（比如github）

1
ssh-keygen -t rsa -C "github邮箱"

2、继续在本地生成公钥和私钥，输入自定义名称（比如gitlab）

1
ssh-keygen -t rsa -C "gitlab邮箱"

修改配置文件

在~/.ssh目录下面新建一个config文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
#Github
Host github
HostName github.com
User hackshen.com@gmail.com
IdentityFile ~/.ssh/id_rsa_github

#Gitlab
Host gitlab
HostName gitlab.alibaba-inc.com
User '你的gitlab邮箱'
IdentityFile ~/.ssh/id_rsa_gitlab

测试

1
ssh -T git@github.com

Posted on Edited on

为什么要抓包？当你在手机上打开H5页面，你不能像浏览器那样可以打开控制台 查看资源的的请求和响应信息，且不能对不能对数据进行修改；抓包工具有很多 Charles、whistle、Flidder 等，工作需要需要目前我常用的就2个，Charles(收费的)和whistle，简单介绍下2个工具特点

Charles

主要特征
  • SSL 代理– 以纯文本形式查看 SSL 请求和响应
  • 带宽限制以模拟较慢的 Internet 连接，包括延迟
  • AJAX 调试——以树或文本形式查看 XML 和 JSON 请求和响应
  • AMF – 以树的形式查看 Flash Remoting / Flex Remoting 消息的内容
  • 重复请求以测试后端更改
  • 编辑请求以测试不同的输入
  • 拦截和编辑请求或响应的断点
  • 使用 W3C 验证器验证记录的 HTML、CSS 和 RSS/atom 响应

Charles 是收费的软件每30min会重启一次，对于经济条件有限的可以使用 Charles 激活码计算器 来解决临时需要Ps: 请支持正版

whistle

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功

如何好用

1
2
3
4
5
6
7
8
9
# Demo
https://assets.alicdn.com/g/ae-fe/home-msite/0.0.48/index.js  localhost:3000/index.js

# 情景一
你要和后端联调一个接口，你在本地起的项目域名是 localhost:3000 但是请求的接口是m.aliexpress.com/get/countrylist.htm, 
你本地开发调用接口势必会遇到跨域的问题，难道每次改完代码发预发验证效果么？这样效率太低了，
我们大部分的项目都是前后端分离的，所以我们直接用线上跑的页面，静态资源引用我们本地代码，一边调试一遍看效果岂不美哉，
上面的demo2就做了这样的事情，因为所有的代理都走的是whistle，whistle命中我们配置的规则会把https://assets.alicdn.com/g/ae-fe/home-msite/0.0.48/index.js 的
响应体替换为 localhost:3000/index.js，它还会帮我们设置下响应头，no-store no-chche,解决我们改完代码立即生效问题

whistle还有一个GUI版本lightproxy

LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件，致力于让前端开发人员能够精确的掌握自己的开发环境，通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。

个人偏向于web版的whistle 搭配 Proxy SwitchyOmega 可自由的切换 系统代理，网页代理、直连等模式

安装
1
2
3
4
npm install -g whistle

# 如果你网络不要可以指定镜像源安装
npm install whistle -g --registry=https://registry.npm.taobao.org
使用
1
2
3
4
5
6
# 启动 whistle
w2 start

# whistle会在本地起一个web服务默认端口8899，打开web服务你会看到：
network: 经过whistle代理的一些http/s等服务
rules:  你配置的规则

更多使用方式详见官网

Posted on Edited on

NET:::ERR_CERT_COMMON_NAME_INVALID 或“您的连接不是私密连接”

Chrome58以后对https的证书认证较为严格，证书里必须带有正确的Common Name，也就是必须有Subject Alternative Name. Google官网介绍链接地址

本机环境

  • Mac： 10.12.6

  • NGINX：nginx/1.12.2

  • nginx 配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    server {
        listen       80;
        server_name  git.hackshen.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   /Users/hackshen/nginx-web/;
            index  index.html index.htm;
        }
        error_page   500 502 503  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        listen 443;
        server_name git.hackshen.com;
        ssl on;
        ssl_certificate  /usr/local/etc/nginx/hackshen.crt;
        ssl_certificate_key  /usr/local/etc/nginx/hackshen.key;
        location / {
             root   /Users/hackshen/nginx-web;
             index  index.html index.htm;
        }
    }

生成证书

1
2
3
4
5
6
7
8
9
10
1、在[ req ]一节下找到req_extensions = v3_req 取消注释
2、在[ v3_req ] 一节 增加 subjectAltName = @alt_names
3、在[ v3_req ] 一节 的上方增加一节
    DNS.1 = i.alicdn.com
    IP.1 = 127.0.0.1
4、生成csr
    `openssl req -new -nodes -keyout server.key -out server.csr -config openssl.cnf`
5、生成公钥
    `openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt -extensions v3_req -extfile openssl.cnf`
6、关于`openssl.cnf`我的Mac上装的有OpenSSL但是没有这个文件，博主是在自己的centos上拷下来的

安装证书

  • 双击server.crt安装证书到钥匙串里，且在钥匙串里面要选择始终信任

Posted on Edited on

《JS 正则迷你书》 学习正则值得看的书

1
2
3
4
5
6
7
8
9
10
11
12
| character | describe |
|:-:|---|
|\d | 匹配一个数字，即0-9 |
|\D | 匹配一个非数字，即除了0-9 |
|\w | 匹配一个单词字符（字母、数字、下划线） |
|\W | 匹配任何非单词字符。等价于[^A-Za-z0-9_] |
|\s | 匹配一个空白符 |
|\S | 匹配一个非空白符 |
|\b | 匹配单词边界 |
|\B | 匹配非单词边界 |
|.  | 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’ |
|\1 | 重复子项 |

Demo

replace

1
2
3
4
5
6
7
8
// replace 第二个参数为函数的情况，$1为匹配到的字符，$2为分组，如果有多个分组依次增加$3,$4....
`a1b2c3dddd4`.replace(/([0-9])([a-z])/g, ($1, $2) => {
    console.log(`$1:-->` + $1, `$2:-->` + $2)
})
// 结果
// $1:-->1b $2:-->1
// $1:-->2c $2:-->2
// $1:-->3d $2:-->3

decodeHtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const map = {
    amp: '&',
    lt: '<',
    gt: '>',
    quot: '"',
    '#39': "'"
};

function decodeHtml(deCodeStr) {
    if (!deCodeStr) return;
    return deCodeStr.replace(/&([^;]+);/g, ($1, $2) => {
        return map[$2];
    })
}
1
2
3
4
5
6
7
8
parseUrl = (str)=> {
    const tempObj={}
    const parseStr = str || window.location.href.split('?')[1];
    str.replace(/(.*?)=(.*?)(&|$)/g,(a,b,c) =>{
        tempObj[b] = c;
    })
    return tempObj;
}

Posted on Edited on

合并多个请求

Tengine ngx_http_concat_module 模块文档

1
2
3
# 打开的淘宝首页查看源码无意间你会发现这样加载静态资源
<script src="//g.alicdn.com/??universal/polyfill/0.0.2/p/index/index.js,mtb/lib-env/1.9.9/env.js,mtb/lib-mtop/2.5.1/mtop.js"></script>
# 浏览器的并发数是有限的，这样请求的好处就是，合并多个请求只用握手一次TCP连接，模块依赖层次比较明确

Posted on Edited on

Sublime Text 3 配置Eslint

由于目前打包项目里面没有配置Eslint，所以为了要求自己的代码更规范所以就折腾下

本机环境

1
2
3
Mac：10.12.6
node：v8.9.0
sublime: build 3176

ESlint安装配置

  • 首先我们要全局安装ESlint

    1
    npm install eslint -g

  • 安装sublimelinter & sublimelinter-contrib-eslint

    • Sublime​Linter：是一个代码检查框架插件，功能非常强大，支持各种语言的检查。但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持

    • sublimelinter-contrib-eslint：我们安装使用对应的 Sublime​Linter-contrib-eslint 插件可以帮助我们使用eslint

    • 在sublime里面command + shift + p选择Package Control:Install Package然后在弹出的对话框中搜索sublimelinter点击安装，安装完后才操作以上步骤安装SublimeLinter-contrib-eslint此处有坑，直接搜索是搜索不出来的，要搜索eslint这样搜索框里面才会出现SublimeLinter-contrib-eslint点击安装即可

  • 按以上步骤安装成功后就配置下sublimelinter的node路径，配置文件如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // SublimeLinter Settings - User
    {
        "paths": {
            "linux": [],
            "osx": [
                "/Users/hackshen/.nvm/versions/node/v8.9.0/bin" //# 设置 node 路径
            ],
            "windows": []
        }
    }

    node路径根据自己本机安装路径填写，Mac系统可以用which node来查看本机node路径

  • 一切准备就绪现在开始初始化eslint配置文件

    • 通过eslint --init在你的项目根目录初始化一个配置文件.eslintrc.js，初始化后的文件如下：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
       module.exports = {
          "env": {
              "browser": true
          },
          "extends": "eslint:recommended",
          "rules": {
              "indent": [
                  "error",
                  4
              ],
              "linebreak-style": [
                  "error",
                  "unix"
              ],
              "quotes": [
                  "error",
                  "single"
              ],
              "semi": [
                  "error",
                  "never"
              ]
          }
      };

      我们可以自由配置，具体配置请参官方eslint配置

Posted on Edited on

关于sublime注册码失效问题

  • 起因：早上Mac重启后打开sublime提示注册码失效

  • 本机环境：MacOs(0.12.6 )、sublime 3.0 build 3143

  • Google了一波，是因为sublime 3.1更改了验证方法

  • 解决办法host文件添加以下解析：

    1
    2
    3
    4
    5
    #-----解决sublime 注册码失效-----
    127.0.0.1 license.sublimehq.com
    127.0.0.1 45.55.255.55
    127.0.0.1 45.55.41.223
    #------------------------------

    Mac host地址：/etc/hosts

可用注册码(3143版本均可使用。)：

1
2
3
4
5
6
7
8
9
10
11
12
13
----- BEGIN LICENSE -----
eldon
Single User License
EA7E-1122628
C0360740 20724B8A 30420C09 6D7E046F
3F5D5FBB 17EF95DA 2BA7BB27 CCB14947
27A316BE 8BCF4BC0 252FB8FF FD97DF71
B11A1DA9 F7119CA0 31984BB9 7D71700C
2C728BF8 B952E5F5 B941FF64 6D7979DA
B8EB32F8 8D415F8E F16FE657 A35381CC
290E2905 96E81236 63D2B06D E5F01A69
84174B79 7C467714 641A9013 94CA7162
------ END LICENSE ------