本文包含了前端相关的计网知识，不定期整理更新~

跨域问题解决

目前项目中多数是前后端分离的开发模式，在前端调用数据的时候，就会需要跨域请求。

浏览器（出于安全性考虑）同源策略，拒绝跨域请求。

跨域：协议、域名。端口有一个不同就算跨域

前后端协商jsonp

通过<script><src>不受同源策略限制，可帮助跨域请求数据

缺点：只能发送get请求，不安全，不易维护

具体：前端定义一个函数，传给后端，后端将值注入到函数的参数中，返回给前端。后端使用express。

纯前端解决 — 前端代理

借助构建工具，如webpack、vite等来实现。在项目中建立vite.config.ts文件，(实现rewrite)，配置代理服务器，将请求通过代理转发到目标服务器。

注意：只对开发环境有效，如果上线的话，还要使用nginx修改配置。

纯后端解决 — 设置请求头

配置Access-Control-Allow-Origin，*表示都可以访问，不安全的。或指定可访问的url地址。

nginx

设置 proxy_pass 指定要代理的地址。适合上线的时候后台配置。

---

XSS注入 跨站脚本攻击

全称 Cross Site Scripting，即跨站脚本，当目标网站目标用户浏览器渲染HTML文档的过程中，出现了不被预期的脚本指令并执行时，XSS就发生了。核心思想就是注入恶意脚本。

反射型XSS

木马链接——通过URL上的参数来进行攻击。黑客可以在URL中传入恶意的script脚本作为参数，注入外部木马，获取cookie等。通常只在url中传入，需要特制的链接。

boss 存储型XSS

存储型（或者称HTML注入型/持久型）XSS攻击不需要特制的url，该种XSS利用代码漏洞（没有对输入框进行过滤处理），直接将代码通过评论框、电子邮件中注入到数据库，导致整个网页受感染，一旦用户访问该网站，将自动执行恶意代码。

例如，以下是有安全漏洞的网页的代码

现在在输入框输入一个脚本，实现DOM XSS注入：

🆗 我们能做的安全措施就是：

设置内容过滤，将标签的大于、小于号替换成字符串实体，让浏览器不会解析<script>为js脚本，而是就单纯视作字符串。当然后端也要做过滤。

DOM型XSS

最常见的web安全漏洞，也叫做客户端XSS。

具体来说，攻击者通过Web应用程序中的某个页面向用户提供构造好的特殊URL，当用户访问该URL时，浏览器会执行其中的JavaScript代码，攻击者利用该机制就可以注入恶意代码到当前页面，篡改现有的页面内容，甚至盗取用户的个人敏感信息。

与其他XSS攻击类型不同的是，DOM型XSS不会触发HTTP请求或响应过程，它的攻击载荷不会被传递到服务端，而是直接在客户端执行。这也使得它更加难以检测和防范。为了防止DOM型XSS攻击，我们可以对输入的数据进行过滤和转义处理，限制用户的输入行为以及避免使用eval()等危险的JavaScript函数。

🆗 如何预防XSS？

有很多XSS预防的工具。

输入过滤：对输入的数据进行过滤和转义处理，确保接收的是合法数据。

输出转义：当需要向web页面中输出用户个人数据时，对内容进行适当的编码和转义处理。

配置CSP策略（前后端都可以设置）：

• 禁止外部脚本执行，禁止外部加载资源
• 禁止页面存在嵌入式iframe