今天是特殊日子，在开始之前让我们对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼!
我们通过不断学习来用科技抵制疫情，确定全面胜利。
今天国际化 Web
今天 web 是人们连接的桥梁，有关这句话正确性想必大家不会怀疑。你我之间距离有多了一个维度衡量，Internet 距离。通过 Internet 今天更多人可以打开 web 来了解你的公司，也就是我们服务了来做世界各地的用户。
服务不同地区的用户，如何留住不同地区用户今天已经成为我们走向国际化所必须考虑的问题，这就需要我们 web 多元化，为每个地区所定制，例如提供不同设计、考虑当地特点给出 web 的不同配色，甚至考虑当地的网络环境来提供不同访问策略。
- Design
- Content
- Performance
- Accessibility
- Frameworks
- Network
- Devices
今天我们只讨论其中 Network ，在进行网络请求资源，在请求头提供键值对，这就是请求头。
Accept: application/json, text/javascript, application/xhtml+html,application/xml
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 196
网络今天提供了便利，同时也是存在着危险的，几个月前新闻报道了很多网站潜在挖掘加密货币，这些漏洞甚至连那些开发这些网站的开发者也不知道。
出现这种情况的原因是，当我们在构建网络的时候，都会依赖了来自不同域的第三方开发资源，由于我们过于信任其他人，并且坚信网络必须是安全的，认为最大部分是使用 HTTPS（但是可能并非如此）,所以带来了上面危险。
如在没有 HTTPS 的情况下，如果你通过一个公共 WiFi 上网，而你正在使用 HTTP 进行浏览是，不怀好意的人可能会伪装是 WiFi，然后拦截你的请求窃取信息，而 HTTPS 允许你使用 HTTP/2 和service works 及媒体。
HTTP/2 ServiceWorker
getUserMedia()
我们可能认为多少网站都已经采用了 HTTPS，其实不然很多网站依旧使用 HTTP。
当您在 HTTPS上运行时，您需要确保始终是 HTTPS 并且处于安全连接上。所以，可以t通过设置严格的传输安全头，您可以在几秒钟内定义一个 max age 属性。这将告诉浏览器，嘿，请只使用通过 HTTPS 这个网站或这些资源。也就是定义了在一定范围内(HTTPS)内来使用资源
strict-Transport-Security:
max-age=1000
HTTP Strict Transport Security（通常简称为HSTS）是一个安全功能，告诉浏览器只能通过 HTTPS 访问当前资源，而不是HTTP。
可以定义一个 Place Director，基本上允许将你的站点添加到另一个站点，这就是所谓的HTTPS 预加载，作用是浏览器在内部保留只应该在 HTTPS 上的站点列表。这是一份在 chromium 的配置文件，通过配置可以截断这些站点。如果发现某个网站无法访问可以就是因他存在于这个配置文件中所以无法访问。
可能会疑惑既然 HTTPS 是安全的，为什么有些域还在使用 HTTP，虽然是 HTTP S 提供了安全性的。同时输入浏览器地址栏输入地址来发出一个 HTTPS 请求，根据连接的不同可能导致 35 秒的延迟。
因为浏览器知道我们要使用 HTTPS，会跳过 HTTP 请求。那么我们是如何做到浏览器只支持 HTTPS 呢？但是在处理大型项目时，当很多人在代码库中放入大量的源代码，强制使用 HTTPS 就变得不是那么简单的事情。
您如何来检查 HTTPS？当使用 HTTPS 上运行你的站点，并且发出 HTTP请求时，用指令设置一个内容安全策略头，这个 HTTP 可能会被浏览器阻止，这将所有请求更新为 HTTPS 并且安全。
Content Security Policy (CSP)
same-origin policy
了解 CSP 这是重点，在说 CSP 之前我们介绍一下 都知道浏览器有同源策略 same-origin policy 的安全限制，即每个站点只允许加载来自和自身同域（origin）的数据，例如 https://a.com 是无法从 https://b.com 加载到资源的。每个站点被严格限制在了自已的孤岛上，自己就是一个沙盒，这样很安全，整个网络不会杂乱无章。主要地，能解决大部分安全问题。假若没有同源策略，恶意代码能够轻松在浏览器端执行然后获取各种隐私信息：银行帐号，社交数据等。
现实中，问题是同源策略也并不是万无一失，跨域攻击 Cross-site scripting (XSS) 便包含五花八门绕开限制的手段，形式上通过向页面注入恶意代码完成信息的窃取或攻击。比如 UGC 类型的站点，因为内容依赖用户创建，这就开了很大一个口子，允许用户输入的内容运行在页面上。当然，因为我们都知道会有注入攻击，所以对用户输入的内容进行防 XSS 过滤也成了标配。
Content-Security-Policy 从另一方面给浏览器加了层防护，能极大地减少这种攻击的发生。
但这不是 CSP 的主要目的，CSP 的主要目的是想限制你的网站内允许的内容。你可以这样配置很多东西。以下列出所有可以配置的选项
- base-uri ：限制可出现在页面 <base> 标签中的链接
- child-src: 列出可用于 worker 及以 frame 形式嵌入的链接。 譬如: child-src https://youtube.com 表示只能从 Youtube 嵌入视频资源
- frame-src: 该指令已在 level 2 中废弃但会在 level 3 中恢复使用。未指定的情况下回退到 tochild-src 指令
- report-to
- block-all-mixed-content
- mig-src: 指定图片来源
- require-sri-for
- connect-src
- manifest-src
- sandbox
- default-src
- media-src: 限制音视频资源的来源
- script-src
- disown-opener
- navigate-to
- strict-dynamic
- font-src: 字体来源。譬如，要使用 Google web fonts 则需要添加 font-src https://themes.googleusercontent.com 规则。
- object-src
- style-src
- form-action: <form> 标签可提交的地址
- plugin-types
- worker-src
- frame-ancestors
- report-sample
- upgrade-insecure-requests
通过 CSP，可以定义从哪里加载字体，以及图片资源来来源等。还有一些尖端的东西，比如这个 opener 和导航。通常上可以限制网站上允许的内容，这样就可以避免因为第三方被黑客攻击而在网站上挖掘的行为。可以将 CSP 与 HTML 中的元素一起使用，也可以设置这样的头如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://unpkg.com">
<title>CSP Test</title>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'none'">
<title>CSP Test</title>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
</body>
</html>
无论是 header 中还是 <meta> 标签中指定，其值的格式都是统一的，由一系列 CSP 指令（directive）组合而成。
Content-Security-Policy:default-src 'self';script-src 'self' 'unsafe-inline''unsafe-eval' just-comments.com www.google-analytics.com; img-src 'self'....
要做到上面比较难，不过可以设置的头为 report only，允许您定义一个HTTP 端点，如果该请求处于活动状态,就会得到所有关于该请求的警告，哪些将会被阻止，这样就可以开始监控发生了什么。
Content-Security-Policy-Report-Only:default-src 'self';script-src 'self' 'unsafe-inline''unsafe-eval' just-comments.com www.google-analytics.com; img-src 'self'....
可能大家发现CSP 似乎有些东西并不正确。
