总结-前端知识点(一)

tech2022-09-25  112

1.写出本地离线缓存有哪些,以及他们的区别

    cookie:默认关闭浏览器失效,每次请求都会携带cookie,4k左右,需要自己封装setCookie,getCookie

    sessionStorage:页面会话期间可用,5M或更大,可以用源生接口,也可再次封装

    localStorage:除非数据被清除,否侧一直存在,5M或更大,可以用源生接口,也可再次封装

2.用代码写出字符串 sflsjdflsjiefjwoefojfsfjfliwjovef 出现次数最多的字母

      let str = "sflsjdflsjiefjwoefojfsfjfliwjovef";

      let obj = [];

      for (let i = 0;i < str.length; i++) {

        //   console.log(i)  // str 字符串每个字母的索引

        //   console.log(str[i])  // 字符串里面的每个字母

        let letter = str[i];

        // console.log(letter) // 打印数组里面每个字母

        if (!obj[letter]) {

          // 第一次放进去:里面还没有值的时候,就没为1 

          obj[letter] = 1;

        } else {

          obj[letter]++;  // 字母存在的话就增加次数

        }

        // console.log(obj)

      }

      let max_key,

          max_num = 0;

      for (key in obj) {  // 循环迭代数组里面的每个字母

          console.log(key)  // 数组里面的每个字母

          console.log(obj[key])   // 每个字母的次数

        if (max_num < obj[key]) {

          max_num = obj[key];

          max_key = key;

        }

      }

      document.write("次数最多的字母:" + max_key + " 次数:" + max_num);

3.同源策略是什么? 跨域是什么?解决方案有哪些?以及解决原理

      同源:相同域名地址

      同源策略:保护浏览器数据安全

                        同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

                        这是浏览器一个用于隔离潜在恶意文件的重要安全机制,不同源的客户端脚本在没有明确授权的情况下,不能读                            写对方资源,所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

      限制的内容:cookie,localStorage,IndexedDB等储存性内容    DOM节点      AJAX请求发送后,结果浏览器拦截

      不收同源策略限制:页面中的链接,重定向以及表单提交是不会受到同源策略限制的;

                                       跨域资源的引入是可以的,但是js不能  读写加载的内容

       跨域:由于浏览器受到同源策略限制,协议,域名,端口都不相同的资源之间无法正常进行通信,解决这个问题就需要跨域

       解决方案:

           1. 降域  document.damain

               两两不同源,两个页面可以通过设置 document.damain='a.com',浏览器就会认为它们都是同一个源

               此方式的特点:                    1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com                    2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。                    3. 这种方法只适用于 Cookie 和 iframe 窗口。

           还有类似的 location.hash + iframe  、window.name + iframe

            window.postMessage   是Html5 新特性:用于页面之间跨域通信

            postMessage(message,targetOrigin)    

                                   message:需要传递的数据

                                   targetOrigin:数据传递的目标窗口域名,值可以是具体的域名或者 '*' 通配符

           2. JSONP跨域 (前后端之间的数据通信)

                JSONP 和 JSON 没有什么关系,

                JSONP的原理:前端设置好回调函数,并把回调函数当做请求 url 携带的参数

                                          后端接受到请求之后,返回回调函数名和需要的数据

                                          后端响应并返回数据后,返回的数据传入到回调函数中并执行

             <script>

              function jsonpCallback( data ){

                             console.log( data )

              }   

              </script>

              <script src = "http://localhost:3000/home?callback = jsonpCallback" > </script>

           ----------------------------------------------------------------------------------------------------------------

           JQuery

           <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

           <script>

                 $.ajax({

                           url:"http://localhost:3000/home",

                           type:"GET",

                           dataType: 'jsonp',        // 设置为 jsonp 类型

                           jsonpCallback:"jsonpCallback",        // 设置回调函数

                           success:function(res){

                                     console.log(res)

                           }

                })

           </script>

          ------------------------------------------------------------------------------------------------------------------

         3. Node 中间代理

             通过服务端代理请求的方式也是解决浏览器跨域问题的方案。同源策略只是针对浏览器的安全策略,服务端并不受同源                 策略的限制,也就不存在跨域的问题

            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

            <script>

                 let data = {

                       "name":"团团",

                       "pwd":"123456"

                 }

                 $.ajax({

                       url:"http://localhost:3000/goods/getIndexInfo",

                       type:"POST",

                       data:data,

                       success:function(res){

                                           console.log(JSON.parse(res))

                                     }

               })

          </script>

         --------------------------------------------------------------------------------------------------------------------

      跨域风险:CSRF攻击

用户通过浏览器,访问正常网站A(例如某银行),通过用户的身份认证(比如用户名/密码)成功A网站;网站A产生Cookie信息并返回给用户的浏览器;用户保持A网站页面登录状态,在同一浏览器中,打开一个新的TAB页访问恶意网站B;网站B接收到用户请求后,返回一些攻击性代码,请求A网站的资源(例如转账请求);浏览器执行恶意代码,在用户不知情的情况下携带Cookie信息,向网站A发出请求。网站A根据用户的Cookie信息核实用户身份(此时用户在A网站是已登录状态),A网站会处理该请求,导致来自网站B的恶意请求被执行。

 

 

 

 

最新回复(0)