原文

一、Content Security Policy - CSP

CSP的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需通过以下两种方式进行配置即可：

• 通过 HTTP 头信息的Content-Security-Policy的字段
• 通过网页的<meta>标签

HTTP

1

Content-Security-Policy: script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:

meta

1

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

上面代码中，CSP 做了如下配置：

• script-src：只信任当前域名
• object-src：不信任任何URL，即不加载任何资源
• style-src：只信任cdn.example.org和third-party.org
• child-src：必须使用HTTPS协议加载
• 其他资源：没有限制

opener

opener属性是一个可读可写的属性，可返回对创建该窗口的 Window对象的引用。当你使用 target='_blank' 打开一个新的标签页时，新页面的 window 对象上有一个属性 opener，它指向的是前一个页面的 window 对象。但是，后一个页面对前一个页面的控制，受同源策略限制 。

在常规的HTTP应答中，Content-Disposition 消息头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

1、作为消息主体中的消息头

在HTTP场景中，第一个参数或者是inline（默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示），或者是attachment（意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将filename的值预填为下载后的文件名，假如它存在的话）。

1
2
3

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

2、作为multipart body中的消息头

在HTTP场景中。第一个参数总是固定不变的form-data；附加的参数不区分大小写，并且拥有参数值，参数名与参数值用等号(=)连接，参数值用双引号括起来。参数之间用分号(;)分隔。

1
2
3

Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 确切的server_name匹配
server {
    listen       80;
    server_name  example.org  www.example.org;
}

# 以*通配符开始的最长字符串
server {
    listen       80;
    server_name  *.example.org;
}

# 以*通配符结束的最长字符串
server {
    listen       80;
    server_name  mail.*;
}

# 匹配正则表达式
server {
    listen       80;
    server_name  ~^(?<user>.+)\.example\.net$;
}

nginx将按照以下顺序对server_name进行匹配，和配置文件中的出现顺序无关

1. 确切的名字
2. 以星号开头的最长通配符名称
3. 最长的通配符名称以星号结尾
4. 第一个匹配正则表达式（按配置文件中的出现顺序）

注：只要有一项匹配以后就会停止搜索

一、三种工作模式

目前来说，Apache一共有三种稳定的MPM（Multi-Processing Module，多进程处理模块）。它们分别是 prefork、worker 和 event 。

1、Prefork MPM

关键字：多进程

prefork模式可以算是很古老但是非常稳定的模式。Apache在启动之初，就预派生fork一些子进程，然后等待请求进来，并且总是试图保持一些备用的子进程。之所以这样做，是为了减少频繁创建和销毁进程的开销。每个子进程中只有一个线程，在一个时间点内，只能处理一个请求。

优点：成熟，兼容所有新老模块。进程之间完全独立，使得它非常稳定。同时，不需要担心线程安全的问题。

缺点：一个进程相对占用更多的系统资源，消耗更多的内存。而且，它并不擅长处理高并发请求，在这种场景下，它会将请求放进队列中，一直等到有可用进程，请求才会被处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<IfModule mpm_prefork_module>
    #服务器启动时建立的子进程数量
    StartServers          5

    #空闲子进程的最小数量，默认5；
    #如果当前空闲子进程数少于MinSpareServers ，那么Apache将会产生新的子进程。此参数不要设的太大。
    MinSpareServers       5

    #空闲子进程的最大数量，默认10；
    #如果当前有超过MaxSpareServers数量的空闲子进程，那么父进程会杀死多余的子进程。
    #此参数也不需要设置太大，如果你将其设置比 MinSpareServers 小，
    #Apache会自动将其修改为MinSpareServers+1。
    MaxSpareServers      10

    #限定服务器同一时间内客户端最大接入的请求数量，默认是150；
    #任何超过了该限制的请求都要进入等待队列，一旦一个个连接被释放，队列中的请求才将得到服务。
    MaxClients          150

    #每个子进程在其生命周期内允许最大的请求数量，
    #如果请求总数已经达到这个数值，子进程将会结束，如果设置为0，子进程将永远不会结束。
    #若该值设置为非0值，可以防止运行PHP导致的内存泄露。
    MaxRequestsPerChild   0
</IfModule>

• 创建的进程数，最多达到每秒32个，直到满足MinSpareServers设置的值为止。这就是预派生（prefork）的由来。这种模式可以不必在请求到来时再产生新的进程，从而减小了系统开销以增加性能。
• 并发量请求数到达MaxClients（如256）时，而空闲进程只有10个。apache为继续增加创建进程。直到进程数到达256个。
• 当并发量高峰期过去了，并发请求数可能只有一个时，apache逐渐删除进程，直到进程数到达MaxSpareServers为止。

url格式

node.js的url 模块提供了两套 API 来处理 URL：一个是旧版本遗留的 API，一个是实现了 WHATWG标准的新 API。在下图中，URL 'http://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash' 上方的是遗留的 url.parse() 返回的对象的属性。 下方的则是WHATWG 的 URL 对象的属性。

rgb to hex

1
2
3
4

function rgbToHex(r, g, b) {
    var hex = ((r<<16) | (g<<8) | b).toString(16);
    return "#" + new Array(Math.abs(hex.length-7)).join("0") + hex;
}

一、Host为空

1
2

# 虚拟主机的主域名
proxy_set_header Host       $proxy_host;

1
2
3

# 请求头中'Host'的值
# 如果请求头中没有携带Host值，那传到服务器的请求也不含这个字段
proxy_set_header Host       $http_host;

1
2
3

# 请求包含'Host'请求头时为'Host'字段的值
# 在请求未携带'Host'请求头时为虚拟主机的主域名
proxy_set_header Host       $host;

注：使用$http_host变量时，在http1.1协议中，如果请求不带Host字段值，会报错400错误

• 客户端必须在所有HTTP1.1请求消息中包含Host头字段
• 如果请求的URI不包含所请求服务的主机名，则必须为Host头字段指定一个空值
• HTTP1.1代理必须确保它转发的任何请求消息，都包含一个适当的主机头字段，用于标识代理请求的服务
• 所有基于HTTP1.1服务器必须以400状态代码响应任何缺少主机头字段的HTTP1.1请求消息

$http_host

1
2
3
4
5

$http_host不是一个固定的变量，他其实是$http_HEADER通配后的结果
HEADER是一个通配符，通配的是请求头里的header属性

例如$http_content_type表示请求头里content-type属性的值
同理，$http_host指的就是请求头里的host属性

一、语法

1

var p = new Proxy(target, handler);

传参说明

• target：使用Proxy包装的目标对象，它可以是任何类型的对象，包括数组、函数或甚至另一个proxy对象
• handler：一个对象，其属性是在对其执行操作时定义代理行为的函数

对象代理

1
2
3
4
5
6
7
8
9
10

var obj = new Proxy({}, {
    get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
    }
});

注：

• 要使得Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象进行操作
• 如果handler没有设置任何拦截，那就等同于直接通向原对象
• Proxy 实例可以作为其他对象的原型对象

函数代理

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

var handler = {
    get: function(target, name) {
        if (name === 'prototype') {
            return Object.prototype;
        }
        return 'Hello, ' + name;
    },

    apply: function(target, thisBinding, args) {
        return args[0];
    },

    construct: function(target, args) {
        return { value: args[1] };
    }
};

var fproxy = new Proxy(function(x, y) {
    return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

注：Proxy比Object.defineProperty 的功能更强大。Vue的作者宣称将在Vue3.0版本后加入Proxy从而代替Object.defineProperty 。

手写bind方法

1
2
3
4
5
6
7
8
9

Function.prototype.bind = function() {
    let fn = this;
    let args = Array.prototye.slice.call(arguments);
    let context = args.shift();
    return function() {
        return fn.apply(context, args.concat(Array.prototype.slice.call(arguments)));
    };
}
// 通过数据劫持(或者装饰模式)，就可以实现vue-methods方法中永远绑定当前实例