前端面试四

快来打我* 2022-03-01 03:40 285阅读 0赞

**11、XMLHttpRequest对象的常用方法和属性**XM核

LHttpRequest对象的介绍

Ajax的

心是JavaScript对象XmlHttpRequest。该对象在**Internet Explorer 5**中首次引入，它是一种支持**异步请求**的技术。简而言之，XmlHttpRequest使您可以使用JavaScript**向服务器提出请求并处理响应**，**而不阻塞用户**。通过XMLHttpRequest对象，Web开发人员可以在**页面加载以后进行页面的局部更新**

常用方法：

1）open(请求方式，请求url，Boolean): 和服务器建立连接

请求方式----'POST'/'GET'

请求url---GET方式需要将请求参数拼接在url后面，POST直接写上url就Ok了

Boolean----true表示异步请求，false表示同步请求

2）send()：向服务器发送请求

GET方式，直接写成send(null);

POST方式，写成send(params)，params表示请求的参数

3）abort()：在客户端接收到响应之前，取消异步请求

XMLHttpRequest对象的属性

readyState：表示当前请求/响应过程的当前活动阶段

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分响应数据

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了

responseText：作为响应主体被返回的文本

responseXML：如果响应的内容类型是“text/xml”或“application/xml”。这个属性中将保存包含着响应数据的XML DOM文档

status：响应的HTTP状态码

statusText：HTTP状态的说明

**11、ajax请求时，如何解释json数据？（3种方法）**

ajax请求时，后台返回的是**json字符串**，将**json字符串**转换成**json对象**的方法如下：

**a)** 把**ajax方法**中的**datatype**设置为**json**

**b)** 用**JSON.parse()**解析

**c)** 用**eval()解析**，var dataObj = eval("("+data+")")

**11、ajax请求总共有多少种callback**

**8种**

**onUninitialized  
onLoading  
onLoaded  
onInteractive**

**onComplete**

**onSuccess  
onFailure**

**onException**

**12、Ajax定义？  Ajax 交换模型？ 同步和异步区别？**

Ajax定义：

● AJAX 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

● AJAX 不是新的编程语言，而是一种使用现有标准的新方法

● AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

● AJAX 不需要任何**浏览器插件**，但需要用户允许**JavaScript在浏览器上**执行

Ajax的优点：

● 最大的优点是在**不重新加载整个页面**的情况下，可以**与服务器交换数据**并**更新部分网页内容**

● 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力

● 可以把服务器的一些工作交给客户端，利用客户端闲置的能力来处理。ajax的原则是“按需取数据”，可以最大程度的**减少冗余请求和响应**，减轻对服务器和带宽的负担

● 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

Ajax的缺点：

● 不支持浏览器的后退按钮

● 安全问题：ajax暴露了与服务器的交互细节。ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等

● 跨域问题限制     [解决跨域的方法][Link 1]  [https://blog.csdn.net/tangxiujiang/article/details/79568548][Link 1]

● 对搜索引擎的支持比较弱

● 破坏了程序的异常机制

● 不容易调试

**13、前端网络安全及防范（常见的Web前端攻击方式）**

**13、ajax请求存在不安全的问题有哪些？如何解决这些不安全的很问题**

主要有以下的三个：

a) XSS（跨站点脚本攻击）（cross-site scripting）

-> 伪造会话（基于XSS实现CSRF） -> 劫持cookie

-> 恶意代码执行

b) CSRF（跨站请求伪造）（cross-site request forgery）

-> 伪造用户身份操作

c) sql注入

其原理主要是：通过把SQL命令**插入**到Web表单递交或输入域名或页面请求的**查询字符串**，最终达到欺骗服务器执**行恶意的SQL命令的目的**

d）界面操作劫持

防范sql注入的措施

**1）永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等**

**2）永远不要使用动态拼装SQL，可以使用参数化的SQL进行数据查询存取**

**3）永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限的数据库连接**

**4）不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。**

浏览器的Cookie策略：

Cookie 是服务器发送到用户浏览器，并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时，被携带在请求头中并发送到服务器

跨站请求伪造(CSRF)的定义

跨站请求伪造（请求是来源于其他网站的---跨站请求，这个请求并不是来自于用户的意愿----伪造的请求），简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的

**定义：**

是一种**劫持受信任用户**，向服务器发送**非预期请求**的攻击方式。

通常情况下，CSRF 攻击是攻击者借助受害者的 **Cookie** 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义**伪造请求**发送给受攻击服务器，从而**在并未授权的情况下执行在权限保护之下的操作**

跨站请求伪造(CSRF)和跨站脚本攻击（XSS）的区别

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包.

跨站请求伪造(CSRF)的特点

a) 采用cookie来进行用户校验

b) 登录受信任网站A，并在本地生成Cookie

c) 在不登出A的情况下，访问危险网站B

CSRF的类型

1）请求类型区分：get和post型CSRF攻击

2）按照攻击方式分类：HTML CSRF攻击；JSON HiJacking攻击；Flash  CSRF攻击等

HTML CSRF攻击：发起的CSRF请求都属于HTML元素，比如

GET型的CSRF:
    通过html标签
    <link href=''>
    <a href=''>
    <img src=''>
    <script src=''></script>
    <audio src=''>
    <video src=''>
    
    css样式中的：
    @import 'url'
    background:url('url')
    
    通过js动态生成的标签对象或者css独享发起GET请求
    
    POST型的CSRF:只能通过form提交

JSON HiJacking攻击：攻击过程是CSRF，但是是对AJAX中的响应JSON数据类型进行劫持：

数据类型有：字典格式，列表格式

// 字典格式
    {
    	'id':1,
    	'name':'jiang'
    }
    
    // 列表格式
    ['foo','to']

危害：

1）篡改目标网站上的用户数据

2）盗取用户隐私数据

3）传播CSRF蠕虫

4）作为其他攻击向量的辅助攻击手法

几种常见的CSRF防御手段

a)  **验证HTTP Referer字段**

**原理：**就是对比HTTP请求发送的网站的referer字段是否和当前网站是否是同一个网站

referer：指示一个请求是从哪里连接过来的

（非常简单，但是鉴于客户端并不可信任，所以并不是很安全）(防止CSRF，检查Referer字段简单直接，但是其完全依赖浏览器发送正确的Referer字段。虽然http协议对此字段的内容有明确的规定，但并无法保证来访的浏览器的具体实现，亦无法保证浏览器没有安全漏洞影响到此字段。并且也存在攻击者攻击某些浏览器，篡改其Referer字段的可能。）

b)  **在请求地址中添加token并验证**（譬如post中，以参数的形式加入一个随机产生的token）

**token的作用**：具有不重复性 + 含有特定的功能信息，比如过期时间戳

**组成**：a).msg b). separator c).signature

**msg部分**：随机字符的主体 + 过期时间戳

** 分隔符号**：用符号分隔msg部分，和加密后生成的signature签名部分

**签名signature：**用密钥对msg进行加密之后的内容

token的格式：例如--token = base64(msg)..base64(sha256("秘锁", msg))

**token的加密**：

首先：用加密方法对msg数据进行加密----sha256散列算法，得到签名signature；

然后：对msg  signature进行BASE64的格式转换。

需要在token串中隐含过期时间的设定。每条与服务器交互的token是有过期时间的，超过这个时间范围，就无效了，需要重新从服务器中重新拉取

**token验证**：当客户端将token,提交到服务器的时候，服务器需要判断token的有效性

首先：token解包---分为msg部分+分隔符+signature签名部分

然后：对比签名

首先，对msg部分进行base64解码, decode\_base64(msg);

然后，在对解码后的msg明文，使用相同秘锁进行同样的encode\_base64(sha256(msg))加密,

接着，判断加密后的数据和客户端传过来的token中的signature的部分是否一致。如果一致，说明这个token是有效的  
最后： 判断过期时间。如果是有效的,取出msg.timestamp，和当前[系统][Link 2]时间进行比较，如果过期时间小于当前时间，那这个token是过期的，需要重新取得token

[原文链接][Link 3]     [https://blog.csdn.net/veloi/article/details/53940022][Link 3]

XSS(跨站脚本，cross-site scripting)

攻击者往Web页面里插入恶意的html标签（在img加载失败的时候。触发onerror事件，在该事件里面写入恶意的js代码）或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

定义：

XSS指的是跨站脚本-----重点是脚本而非跨站，发生在**目标网站的目标用户（场景）**的**浏览器**层面上，当目标用户的浏览器渲染整个HTML文档的过程中**出现了不被预期**的脚本指令并执行时，XSS就会发生。

**通俗的讲**，就是想尽一切办法**将脚本内容在目标网站中的目标用户的浏览器中解析执行**

XSS的类型

反射型XSS(非持久性XSS)；存储型XSS（持久性）；DOM XSS

**反射型XSS(非持久性XSS)：客户端**发出请求时，XSS代码出现在**URL**中，**作为输入**提交到服务端，服务端解析后响应，**在响应内容中出现这段XSS代码**，最后浏览器解析执行

如**点击恶意链接、提交表单、进入一个恶意网站时**，注入脚本进入被攻击者的网站

// http://www.foo.com/reflect.php内容如下； 输入的值未经过滤,
    // 直接输出到响应体中，然后浏览器解析执行
    <?
    	echo $_GET['x'];
    ?>
    
    // 提交的url为 http://www.foo.com/reflect.php？x=<script>alert(1)</script>

**存储型（非持久）xss**：与反射型XSS的差别仅在于-----提交的**xss代码会存储在服务端**（数据库、内存、文件系统等），下次请求目标页面时，不用再提交XSS代码

留言板XSS----用户提交一条包含XSS代码的留言，存储到数据库，目标用户查看留言板时，留言内容从数据库查询出来并显示，浏览器发现有XSS代码，也当做正常的HTML与JS解析执行，就触发XSS攻击

**DOM XSS**：与反射型、存储型XSS的差别在于----DOM  XSS的XSS代码**不需要服务器解析响应的直接参与**，仅靠**浏览器端的DOM解析**就可以完成

危害：

1）挂马

2）盗取用户Cookie

3）DoS(拒绝服务)客户端浏览器

4）钓鱼攻击，高级钓鱼技巧

5）编写针对性的XSS病毒，删除目标文章、恶意篡改数据、嫁祸

6）劫持用户Web行为，进一步渗透内网

7）爆发WEB2.0蠕虫

防御XSS的方法

a) **输入校验----长度限制、值类型是否正确、是否包含特殊字符（<   >，过滤和编码）**

校验是对数据无害的，满足就放行，不满足就阻止，一般不建议任何过滤，能保证数据的原生态

b) **输出编码--------**根据输出的位置进行相应的编码，如**HTML编码、JS编码、URL编码**，原则-----该数据不要超出 自己所在的区域，也不要被当做指令执行

HTML编码：

**作为body文本输出**

< 转成 <

> 转成 >

& 转成 &

" 转成 "

' 转成 &\#39

**其他的转义**

\\ 转成 \\\\

/ 转成 \\/

; 转成 ；(全角;)

js编码：encodeURIComponent()    encodeURI()       escape()

c)** cookie设置Http-Only**，这样用脚本就无法获取cookie了（这样只有浏览器向Web服务器发起请求的时才会带上cookie字段，避免了XSS攻击利用JavaScript的document.cookie获取cookie）;对cookie中敏感信息加密；设置secure=true;给cookie设置有效期；指定cookie domain的子域名

d) **Cookie防盗**，尽可能地避免在Cookie中泄露隐私，如用户名、密码等；或者，为了防止重放攻击，可以将Cookie和IP进行绑定，这样也可以阻止攻击者冒充正常用户的身份。

e) 注意，特别是**后台**，一定不能信任前端的输入，**需要过滤与校验**

f) 尽量采用POST而非GET提交表单

界面操作劫持

**界面操作劫持的分类**：---从用户操作行为分类

1）点击劫持---在用户点击时发生的劫持攻击事件

2）拖放劫持---在用户拖动操作时发生的劫持攻击事件

界面操作劫持是**利用视觉欺骗，诱导用户操作**。比如**在可见的输入框中覆盖一个不可见的框**（如一个不可见的**iframe**），用户点击输入框时，其实是点击了不可见框中的内容，从而让用户做出了一些非自己意愿的操作。这些操作**有可能造成了用户敏感信息的泄露、数据丢**失等后果

**实现不可见且浮在最上层的iframe窗口**

filter:alpha(opacity=0);
    opacity:0;
    z-index: 100;

图片验证码的作用：主要是为了有效防止机器恶意批量注册；对某一个特定已注册用户用特定程序暴力破解方式进行不断的登陆尝试；提高系统的安全性，确保系统的使用必须要进行登录成功之后,才能使用,避免用户直接在地址栏中输入要访问的页面

图片验证码的类型：数字验证、字母验证、汉字验证、拖动拼图验证（比如QQ的登录）等等

**所谓验证码**，就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能

验证码的显示用一个<img>，设置其src（拿到后台生成的验证码），为img定义一个点击事件，每次点击都会生成一个新的code

**验证码的生成和验证**都是由后端做的，主要是在后台生成验证码之后，然后保存在session中，前端这边拿到后端生成的验证码，然后前端提交验证之后，后台在从session中拿到验证码和前端提交的验证码进行比对，来验证其有效性

如何解决ajax无法后退的问题

HTML5里引入了新的API，即：history.pushState, history.replaceState，可以通过pushState和replaceState接口，操作浏览器历史，并且改变当前页面的URL，onpopstate监听后退

1）window.onpopstate是popstate事件在window对象上的事件处理程序

2）每当处于激活状态的历史记录条目发生变化时，popstate事件就会在对应window对象上触发

3）调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)

Ajax所包含的技术：Ajax并非一种新技术，它是几种原有技术的结合体

● 使用CSS和XHTML来表示

● 使用DOM模型来交互和动态显示

● 使用javascript来绑定和调用。

● 使用XMLHttpRequest来和服务器进行异步通

Ajax交换模型，即Ajax实现原理

首先：创建XMLHttpRequest对象

//创建xhr - 非IE6 - 第一步
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else { //IE6及其以下版本浏览器
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

然后：通过open()与服务器建立连接

// 请求方式是GET，则需要将参数拼接到url后面
    xhr.open("GET", options.url + "?" + params, true); // 请求方式，请求url，是否异步发送请求
    // 请求方式是POST，参数不需要拼接，但要设置表单提交时的内容类型
    xhr.open("POST", options.url, true);  //POST则是通过将数据作为 send 的参数提交到服务器
    //设置表单提交时的内容类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

接着：通过send()发送请求

//GET 请求方式
    xhr.send(null);  
    // POST方式，需要将数据作为参数
    xhr.send(params);

最后：通过onReadyStateChange()监听状态变化，通过readyState=4判断已经全部接收到响应数据，通过status判断状态码是否表示成功

xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML);
                } else {
                    options.fail && options.fail(status);
                }
            }
        }

完整的ajax请求如下所示

Ajax同步和异步的区别

Ajax中async这个属性，用于控制请求数据的方式，默认是true（以异步的方式请求数据）

● **async的值为true（异步）**

当ajax发送请求后，在等待服务器端返回数据的这个过程中，前端会继续执行ajax块后面的脚本，直到server端返回信息才会去执行success，或者error。也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）。

**● async的值为false（同步）**

当执行Ajax的时候，会**停止执行后面的JS代码**，直到Ajax执行完毕后，才能继续执行后面的JS代码。

Ajax应用和传统的Web应用有什么区别

在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。

使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉不到页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

Ajax和javascript的区别

javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。在 Ajax应用中信息是通过XML数据或者字符串在浏览器和服务器之间传递的

**13、ajax请求的时候get和post方式的区别，并写出ajax的对象创建，发送，返回数据的过程**

Get和Post都是向服务器发送的一种请求，只是发送机制不同

**● **GET请求会将参数拼接到URL后面进行传递，在地址栏上会显示具体的参数

**● **POST请求则不会拼接参数，地址栏上也不会显示请求参数

**●**GET传输数据容量小，不安全

**●** POST传输数据内容大，更加安全

出ajax的对象创建，发送，返回数据的过程如下题所示

**Ajax请求和HTTP请求的区别**

本质上：AJAX就是浏览器发出的HTTP请求，只不过是浏览器加上了一个**同源策略限制**而已。AJAX请求的**XMLHTTPRequest对象**就是浏览器开放给JS调用HTTP请求用的

几点区别:

1) AJAX请求受到浏览器的同源策略限制，存在跨域问题

2) AJAX在进行复杂请求时，浏览器会预先发出OPTIONS预检（HTTP自己是不会预检的）

3) 从使用角度上说，AJAX使用简单一点，少了些底层细节，多了些浏览器特性（如自动带上同域cookie等）

4) 所以说，和认证上的HTTP请求的区别就是-多了一次浏览器的封装而已（浏览器会有自己的预处理，加上特定限制）

详细讲解的链接：http://www.jb51.net/article/132099.htm?utm\_source=debugrun&utm\_medium=referral

**25、创建对象的方法**

工厂模式，构造函数模式，原型模式，组合构造函数和原型模式，动态原型模式等

**25、实现继承的方法**

原型链、借用构造函数、组合继承、原型式继承等

[Link 1]: https://blog.csdn.net/tangxiujiang/article/details/79568548
[Link 2]: http://www.2cto.com/os/
[Link 3]: https://blog.csdn.net/veloi/article/details/53940022