熬夜吐血整理最全web前端面试题合辑（四）

Ajax/ ES6/Http/安全等知识

Ajax是什么? 如何创建一个Ajax？
- Ajax的全称：Asynchronous Javascript And XML。
- Ajax是一种用于创建快速动态网页的技术, 异步的JavaScript和XML
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
- 创建
  (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
  (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  (3)设置响应HTTP请求状态变化的函数
  (4)发送HTTP请求
  (5)获取异步调用返回的数据
  (6)使用JavaScript和DOM实现局部刷新
手写一个ajax

function creatXhr() {
      var xhr;
      if(window.XMLHttpRequest){ //code for IE7+,Firefox,Chrome,Opera,Safari
          xhr = new XMLHttpRequest();
      } else {
          xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      return xhr;
  }
  let xhr = creatXhr();
  xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
            alert(xhr.responseText);
        }else {
          alert("Request was unsuccessful:" + xhr.status)
        }
        
      } 
  }
  xhr.open('POST',url,true);
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//请求
  xhr.send();

Ajax的优缺点
- 优点：
  1.减轻服务器的负担，Ajax一般只从服务器获取只需要的数据。
  2.无需刷新整个页面, 减少用户等待时间。
  3.更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。
  4.基于标准化的对象，不需要安装特定的插件, 浏览器都能支持Ajax
  5.彻底将页面与数据分离。
- 缺点：
  1.没有浏览历史, 不能回退
  2.存在跨域请求问题
  3.对搜索引擎支持比较弱
  4.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中,不过这些都有相关方法解决
Ajax 解决浏览器缓存问题？

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random();。
在URL后面加上时间戳："nowtime=" + new Date().getTime();。
如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
如何解决跨域问题?
jsonp、CORS(跨域资源共享)、iframe、window.name、window.postMessage、服务器上设置代理页面
怎么理解不同源
- 协议名不同
- 域名不同
- 端口号不同
详细说说jsonp

基本思想

网页通过添加一个<script src=‘’>元素，向服务器请求JSON数据（<script>的src属性获得js代码，不受同源政策限制）

服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

用JSONP 获取的不是JSON 数据，而是可以直接运行的 JavaScript语句网页不能跨域的 ajax 请求，<script> 可以跨域<script src='xxxxx'>到本地就执行

动态生成<script>标签, 然后通过标签的src属性发送GET类型的跨域请求, 服务器端返回一段js脚本, 这段js脚本的内容为一个函数调用,实参为需要返回的响应数据(json);

客户端这边需要提前定义好对应的函数, 当<script>请求成功并接收到数据时, 会自动调用此函数, 在函数中我们就可以处理响应数据了

HTTP状态码知道哪些？
- 100 Continue 继续，一般在发送post请求时，已发送了http header 之后服务端将返回此信息，表示发送具体参数信息
- 200 OK 请求成功正常返回信息
- 301 Moved Permanently 请求的网页已永久移动到新位置
- 302 Move temporarily （暂时性重定向）
- 304 Not Modified （从上次请求后，请求的网页未修改。存在缓存，没修改）
- 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
- 403 Forbidden （禁止访问，非法）
- 404 Not Found 找不到如与URL相匹配的资源
- 500 Internal Server Error 最常见的服务器错误
什么是XSS攻击？如何预防？
- Cross-Site Script:又称CSS,为了区分css样式，我们又叫它XSS,跨站脚本攻击。

它的原理是：攻击者向有XSS漏洞的网站输入恶意的HTML代码，当其他用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如：盗取用户cookie,破坏页面结构，重定向到其他网站等。

XSS分为两种：分别是DOM Based XSS和Store XSS。

理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力，攻击代码也不局限于script。

如何防御XSS攻击？

完善的过滤体系：永远不相信用户的输入。需要对用户输入进行处理，只允许输入合法的值，其他值一概过滤掉。

Html Code

假如某些情况下，我们不能对用户数据进行严格的过滤，那我们也需要对标签进行转换。

比如用户输入：<script>window.location.href=”http://www.baidu.com”;</script>，
保存后最终存储的会是 <script>window.location.href="http://www.baidu.com"</script>
在展现时浏览器会对这些字符转换成文本内容显示，而不是一段可执行的代码。

什么是CSRF攻击？如何防御？
- Cross-Site Request Forgery: 跨站请求伪造

原理：攻击者盗用你的身份，以你的名义发送恶意请求。CSRF能做的事情包括：以你的名义发邮件，发消息，盗取你的账号，甚至购买商品，虚拟货币转账…
造成的问题包括：个人隐私的泄露以及财产安全

CSRF攻击是源于web的隐式身份验证机制！web 的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但是却无法保证该请求是用户批准发送的！

如何防御呢？

CSRF的防御可以从服务端和客户端两方面着手，防御效果是从服务端着手效果比较好，现在一般的CSRF防御也都在服务端进行。

Cookie Hashing(所有表单都包含同一个伪随机值)
这可能是最简单的解决方案了，因为攻击者不能获得第三方Cookie(理论上)，所以表单中的数据也就构造失败了:>
构造加密的Cookie信息
在表单里增加Hash值，以认证这确实是用户发送的请求
然后在服务端里进行Hash值验证

验证码
这个方案的思路是：每次用户提交都需要用户在表单中填写一个图片上的随机字符串，这个方案可以完全解决CSRF，但易用性方面似乎不太好还有听闻是验证码图片的使用涉及了一个被称为MHTML的Bug，可能在某些版本的微软IE中受影响。

One-Time Tokens （不同的表单包含一个不同的伪随机值）
在实现One-Time Tokens时，需要注意一点：就是“并行会话的兼容”。如果用户在一个站点上同时打开了两个不同的表单，CSRF保护措施不应该影响到他对任何表单的提交。考虑一下如果每次表单被装入时站点生成一个伪随机值来覆盖以前的伪随机值将会发生什么情况：用户只能成功地提交他最后打开的表单，因为所有其他的表单都含有非法的伪随机值。必须小心操作以确保CSRF保护措施不会影响选项卡式的浏览或者利用多个浏览器窗口浏览一个站点。

熬夜吐血整理最全web前端面试题合辑（四）

Ajax/ ES6/Http/安全等知识

猜你喜欢