前端面试题+知识点整理（部分）

火海妖

已于 2023-08-17 18:27:12 修改

阅读量65

点赞数 1

分类专栏：前端文章标签：前端 http

于 2023-08-17 18:08:55 首次发布

本文链接：https://blog.csdn.net/2301_79360008/article/details/132332322

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

数组遍历的方法

1、map:根据当前数组映射出一个新的数组

2、forEach:回调函数，数组遍历后无法停止

3、some:遍历整个数组，若返回值为true则停止，反之返回值为false循环继续

array.some(function(currentValue,index,arr),thisValue)
//实例
let ages = [23,44,3]
if(ages.some(age => age < 10)) {
    console.log('true')
}

        currentValue 必须。当前元素的值
        index 可选。当前元素的索引值
        arr 可选。当前元素属于的数组对象
        thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
        如果省略了 thisValue ，"this" 的值为 "undefined"

4、every:与some相反，返回false停止，true继续循环

let numbers1 = [1, 2, 3, 4, 5],
    numbers2 = [1, 2, 3, -4, 5];
numbers1.every((num) => num > 0); // 返回true
numbers2.every((num) => num > 0); // 返回false

5、filter:过滤数组并且返回一个新数组

let arr = [1,2,3,4,5]
let newArr = arr.filter(city => city.population > 3);
console.log(newArr);//[4,5]

6、reduce:实现数据累加（高级用法：计算数组中元素出现的次数，数组去重，数组拍平等）

数组所有的方法

1、concat（）把元素衔接到数组中。

2、every（）测试断言函数是否对每个数组元素都为真。

3、filter（）返回满足断言函数的数组元素。

4、forEach（）为数组的每一个元素调用指定函数。

5、indexOf（）在数组中查找指定元素。

6、join（）将数组的所有元素转化为字符串。

7、lastIndexOf（）在数组中反向查找。

8、map()从数组的元素中，计算出新的数组。

9、pop（）移除数组最后一个元素。

10、push（）把元素添加到数组尾部。

11、reduce（）从数组的元素中，计算出一个值。

12、reduceRight（）从右往左缩减数组。

13、reverse（）在原数组中颠倒元素的顺序。

14、shift （）移除数组的第一个元素。

15、slice（）返回数组的一部分。

16、some（）测试是否至少有一个数组元素能让断言函数为真。

17、sort （）在原数组中对数组元素进行排序。

18、splice（）插入、删除或替换数组元素。

19、toLocaleSTring()将数组转化为本地化字符串。

20、toString ()将数组转化为字符串。

21、unshift（）在数组头部插入元素。

ajax核心

ajax的核心是数据获取技术“XMLHttpRequest”，它是JavaScript的一个对象。通XMLHttpRequest可在不刷新页面的情况下请求特定URL，获取数据，让网页在不影响用户操作的情况下，更新页面的局部内容。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和GET 请求的能力。

XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。

尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

this的种类

1、window中的this

2、所有事件函数中的this，此时this指向事件监听的对象

3、对象中的this，此时this指向该对象

4、面向对象中的this

5、call、apply和bind中的this，此时this指向被替换的对象

HTTP和HTTPS

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲就是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

区别：

1、HTTPS协议需要到CA申请证书，一般免费的证书比较少，因而需要一定费用。

2、HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。

3、HTTP和HTTPS使用的是完全不同的链接方式，用的端口也不一样，前者是80端口，后者是443端口。

4、HTTP的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。

HTTP加密手段

对称加密：

秘钥key，待加密数据data，a和b是两个主机，都有秘钥key，a传输data会先用key进行加密，生成密文data，b拿到data后再用key解密，获取到data。

缺点：key可能被第三方获取，从而得到原数据data。

非对称加密：

可以公钥加密，私钥解密；也可以私钥加密，公钥解密。a第一次请求，b给a返回公钥；a第二次请求，给b传输用公钥加密后的密文data，b收到后，用私钥解密data，拿到原数据data。由于私钥只有b才拥有，因此第三方无法获取私钥，自然无法对加密数据进行解密。

缺点：如果b向a发送数据的话，如果用公钥加密，但a没有私钥，所以无法解密，但如果用私钥加密，a用公钥解密的话，第三方也能拿到公钥。

对称加密+非对称加密的方式。

1、先使用非对称加密，得到公钥，再利用公钥生成一个传输密钥，进行双方的数据传输；

2、client第一次请求，server给client返回公钥；

3、client拿到公钥，再生成一个随机字符串，使用公钥对这个字符串进行加密，传给server；

4、server收到后，用私钥解密出字符串，这个字符串用来作为之后双方进行数据传输的对称密钥。

从输入URL到渲染的过程

1、URL解析

2、DNS解析

3、建立TCP链接

4、客户端发送请求

5、服务器处理和响应请求

6、浏览器解析并渲染响应内容

7、TCP四次挥手断开连接

前端常见的安全问题及防范措施

1. XSS

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。

xss攻击有三种常见类型：反射型、基于DOM、储存型

1-1反射型XSS攻击

顾名思义，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又将这部分返回给用户，恶意脚本在页面中被执行。一般发生在前后端一体的应用中，服务端逻辑会改变最终的网页代码。

反射型 XSS 的攻击步骤

1、攻击者构造出特殊的 URL，其中包含恶意代码。

2、用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。

3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

1-2基于DOM的XSS攻击

目前更流行前后端分离的项目，反射型 XSS 无用武之地。但这种攻击不需要经过服务器，我们知道，网页本身的 JavaScript 也是可以改变 HTML 的，黑客正是利用这一点来实现插入恶意脚本。

基于DOM 的 XSS 攻击步骤：

1、攻击者构造出特殊的 URL，其中包含恶意代码。

2、用户打开带有恶意代码的 URL。

3、用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。

4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

1-3存储型XSS攻击

又叫持久型 XSS，顾名思义，黑客将恶意 JavaScript 脚本长期保存在服务端数据库中，用户一旦访问相关页面数据，恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。

存储型 XSS 的攻击步骤：

1、攻击者将恶意代码提交到目标网站的数据库中。

2、用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。

3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

这几种XSS攻击类型的区别

反射型的 XSS 的恶意脚本存在 URL 里，存储型 XSS 的恶意代码存在数据库里。
反射型 XSS攻击常见于通过 URL 传递参数的功能，如网站搜索、跳转等。
存储型XSS攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
而基于DOM的XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，其他两种 XSS 都属于服务端的安全漏洞。

XSS防范措施

输入过滤

在用户提交时，由前端过滤输入，然后提交到后端，这种方法不可行，因为攻击者可能绕过前端过滤，直接构造请求，提交恶意代码。一般在写入数据库前，后端对输入数据进行过滤。虽然输入侧过滤能够在某些情况下解决特定的 XSS 问题，但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。

预防存储型和反射型 XSS 攻击

1、改成纯前端渲染，把代码和数据分隔开。

2、对 HTML 做充分转义。

预防 DOM 型 XSS 攻击

DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。

<!-- 内联事件监听器中包含恶意代码 -->
<img onclick="UNTRUSTED" onerror="UNTRUSTED" src="data:image/png,">

<!-- 链接内包含恶意代码 -->
<a href="UNTRUSTED">1</a>

<script>
// setTimeout()/setInterval() 中调用恶意代码
setTimeout("UNTRUSTED")
setInterval("UNTRUSTED")

// location 调用恶意代码
location.href = 'UNTRUSTED'

// eval() 中调用恶意代码
eval("UNTRUSTED")
</script>

其他措施

1、设置 Cookie 的 HttpOnly 属性，禁止JavaScript读取cookie

2、验证码：防止脚本冒充用户提交危险操作。

2. CSRF

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

CSRF 详细过程

受害者登录A网站，并且保留了登录凭证（Cookie）
攻击者引诱受害者访问B网站
B网站向A网站发送了一个请求（这个就是下面将介绍的几种伪造请求的方式），浏览器请求头中会默认携带 A 网站的 Cookie
A 网站服务器收到请求后，经过验证发现用户是登录了的，所以会处理请求

预防手段

严格的跨域请求限制，如 referrer （请求来源）。
为 Cookie 设置 SameSite, 禁止跨域传递 Cookie。
关键接口加上短信验证码。

3. 点击劫持

点击劫持（Clickjacking）是一种通过视觉欺骗的手段来达到攻击目的手段。往往是攻击者将目标网站通过 iframe 嵌入到自己的网页中，通过 opacity 等手段设置 iframe 为透明的，使得肉眼不可见，这样一来当用户在攻击者的网站中操作的时候，比如点击某个按钮（这个按钮的顶层其实是 iframe），从而实现目标网站被点击劫持。

预防手段

1）让 iframe 不能够跨域访问

判断 top.location.hostname （iframe 嵌入的那个网站的域名）和 self.location.hostname （iframe 自己的域名）不一致时可以给出可能不安全的提示，用户确认安全的情况下再操作。

2）在响应头中加上 X-Frame-Options: sameorigin

表示允许相同域嵌入此页面（X-Frame-Options: deny 表示禁止内嵌此页面）。

3）防止网页被其他网站内嵌为 iframe

首先在页面中添加如下样式：

<style id="antiClickJack">body{display: none;}</style>

然后添加类似如下的脚本：

<script>
  if (self === top) {
    let antiClickJack = document.getElementById("antiClickJack");
    antiClickJack.parentNode.removeChild(antiClickJack);
  } else {
    top.location = self.location;
  }
</script>

上面代码首先设置了整个页面不可见，随后检测页面是否被内嵌。如果没有被内嵌，则移除设置页面不可见的样式，否则把顶层页面的地址设置为内嵌页面的地址，从而阻止了页面的内嵌。

4. DDos

Distribute denial-of-service 分布式拒绝服务。

手段：分布式、大规模的流量访问，使服务器瘫痪。
预防：软件层不好做，需要硬件预防。

比如黑客散播了一个病毒程序，植入很多人的手机，使这些人的手机同时去访问某一网站，致使服务瘫痪。

可以通过硬件手段，比如使用阿里云的 WAF（web application firewall），用于防注入和控制机器人流量。

5. SQL 注入

手段：黑客提交内容时写入 SQL 语句，破环数据库。
预防：避免传输特殊字符，处理特殊字符，替换特殊字符。

SQL 注入虽然是后端处理的安全问题，但是问题出自前端，是因为用户输入了特殊字符，和前端也有关系。

1）避免传输特殊字符

用户输入给了攻击者可乘之机，在输入的时候添加必要的校验和过滤即可。具体就是针对用户输入进行 HTML 编码、HTML 标签属性编码、JavaScript 编码、URL 编码。比如使用函数 encodeURL 对 RRL 编码。

2）替换特殊字符

6.CDN劫持

CDN原理

CDN(Content Delivery Network)，内容分发网络。具体来说，CDN就是采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求。（有点像电商的本地仓吧？）CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。

CDN劫持

网络上有很多黑客为了让用户能够登录自己开发的钓鱼网站，都会通过对CDN进行劫持的方法，让用户自动转入自己开发的网站。而很多用户却往往无法察觉到自己已经被劫持。其实验证被劫持的方法，就是输入任何网址看看所打开的网页是否和自己输入的网址一致，

CDN劫持防范措施

使用SRI来解决CDN劫持

「SRI」 全称 Subresource Integrity - 子资源完整性，是指浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。

通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能，比如

<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js" 
    integrity="sha256-xxx sha384-yyy"
    crossorigin="anonymous"></script>

integrity 值分成两个部分，第一部分指定哈希值的生成算法（sha256、sha384 及 sha512），第二部分是经过 base64 编码的实际哈希值，两者之间通过一个短横（-）分割。integrity 值可以包含多个由空格分隔的哈希值，只要文件匹配其中任意一个哈希值，就可以通过校验并加载该资源。「开启 SRI 能有效保证页面引用资源的完整性，避免恶意代码执行。」

浏览器如何处理 SRI

当浏览器在 script 或者 link 标签中遇到 integrity 属性之后，会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
当脚本或者样式表的哈希值和期望的不一致时，浏览器必须拒绝执行脚本或者应用样式表，并且必须返回一个网络错误说明获得脚本或样式表失败。

内容安全策略（CSP）

内容安全策略（Content Security Policy）简称 CSP，通过它可以明确的告诉客户端浏览器当前页面的哪些外部资源可以被加载执行，而哪些又是不可以的。

CSP的意义

防XSS等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

CSP的分类

Content-Security-Policy 配置好并启用后，不符合 CSP 的外部资源就会被阻止加载。
Content-Security-Policy-Report-Only 表示不执行限制选项，只是记录违反限制的行为。它必须与report-uri选项配合使用。

CSP的使用

通过 HTTP 头配置Content-Security-Policy，以下配置说明该页面只允许当前源和https://apis.google.com 这 2 个源的脚本加载和执行：

Content-Security-Policy: script-src 'self' https://apis.google.com

通过页面 <meta> 标签配置：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ap

火海妖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端面试题+知识点整理（部分）

往往是攻击者将目标网站通过 iframe 嵌入到自己的网页中，通过 opacity 等手段设置 iframe 为透明的，使得肉眼不可见，这样一来当用户在攻击者的网站中操作的时候，比如点击某个按钮（这个按钮的顶层其实是 iframe），从而实现目标网站被点击劫持。其实验证被劫持的方法，就是输入任何网址看看所打开的网页是否和自己输入的网址一致，秘钥key，待加密数据data，a和b是两个主机，都有秘钥key，a传输data会先用key进行加密，生成密文data，b拿到data后再用key解密，获取到data。
复制链接

扫一扫