你不可不知的WEB安全知识（第一部分：HTTPS, TLS, SSL, CORS, CSP）

HTTPS

=======================================================================

它是HTTP的安全版本，该协议的全称是Hypertext transfer protocol secure，它主要用于在web浏览器和网站之间发送数据。

其他人不能访问数据，因为它使用TSL协议加密通信，我将在下一个主题中解释它。

HTTPS的工作原理

---

它使用称为传输层安全（TLS）的加密通信协议，前身称为安全套接字层（SSL）。

此加密使用两个密钥，一个称为公钥，另一个称为私钥。

• 1、公钥：在浏览器和网站之间共享。

• 2、私钥:此密钥用于解密由公钥加密的信息，并且不会在服务器之外共享。

TLS

=====================================================================

它是目前使用最多的协议，旨在促进互联网上通信的隐私、数据安全，TLS的使用案例是加密应用程序与服务器之间的通信、电子邮件、消息传递语音（VoIP）。

TLS的工作原理

---

任何要使用TSL的应用程序或网站，必须将TLS证书（也称为“ SSL证书”）安装到基本服务器上 。

它包含证书持有者、私钥和公钥的非常重要的信息，用于解密和加密通信。

此过程称为TLS握手🤝，步骤：

• 确定会话期间将使用的TLS版本。

• 通过使用TLS证书验证服务器的身份。

• 握手过程结束后，生成会话密钥供会话期间使用。

为此，该主题需要进一步的解释，我将写一篇文章，并在此处添加一个链接。

SSL

=====================================================================

安全套接字层（SSL）是一种基于加密的Internet安全协议，它是Netscape公司于1995年为确保Internet连接的完整性和私密性而创建的，如今已将其命名为TLS。

SSL的工作原理

---

就像基于握手TLS概念的TLS版本。

TLS和SSL有什么区别

---

SSL是TSL的旧版本，在国际互联网工程任务组（IETF）继Netscape之后负责SSL的发展，其名称已更改，如今一些开发人员使用SSL和TLS来指代同一事物。

注意自1996年以来，SSL没有任何新更新，这使它非常容易受到黑客攻击，并且所有现代浏览器不再支持它，它们仅支持TLS。

CORS

======================================================================

跨域资源共享（CORS）是一种机制，它使用HTTP报头来指定哪些外源可以访问本地资源，以及如何访问它，这意味着我们可以为允许的跨域访问我们的资源列出一个白名单。

CORS的工作原理

---

• 1、当站点发出获取请求以从外部服务器获取资源时，浏览器将添加一个标头，其中包含标有示例Origin的源：http://www.example.com。

• 2、服务器接收预检请求，并在白名单中搜索有关给定来源的Access-Control-Allow-Origins，然后发送给浏览器选项调用，然后浏览器将确定实际请求是否可以安全发送，例如 Access-Control-Allow-Origin：http://www.example.com 或此标头Access-Control-Allow-Origin：* 将允许任何请求获取资源。

• 3、如果服务器指定方法，则它将请求方法与示例 比较 Access-Control-Allow-Methods: PUT, DELETE.

CSP

=====================================================================

内容安全策略是一个更高的安全层，可帮助检测和缓解不同类型的恶意攻击，例如（跨站脚本（XSS），数据注入攻击，点击劫持，等等……）。

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

. 常用功能**

8. MVVM设计模式

[外链图片转存中…(img-oKKnoF2S-1718085085813)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-ehqZVAnQ-1718085085814)]