java 前端页面传过来的值怎么防止篡改_西安腾讯云前端面试经

本人已入职，需要的内推的可以私聊我呦！

一面:

1，平时工作中有遇到过跨域问题吗？怎么解决的？

答:遇到过，一般情况都是ajax请求的跨域问题，常用的解决方式有两种，一种是jsonp，就是通过创建script标签请求一个http接口，但是这种方式必须是get请求且后端必须与前端商量好一个调用方式，第二种是w3c推荐的方式:cors，这种一般是后台通过设置access-control-allow-origion，access-control-allow-headers,access-control-allow-method,access-control-allow-credentials来控制。

面试官进一步体问:能详细说一下jsonp的原理吗？

答:jsonp在前端具体来说就是创建一个script，设置类型为javascript，拼接一个callback=callback的参数，添加一个window.callback的全局回调。服务端收到请求后，手动获取callback的值并将要响应的数据拼接在callback的调用中:res.send(callback+'('+ data +')')

面试官进一步提问，能具体说一下客户端到底怎么触发响应，执行回调的吗？

答:因为刚我们注册了一个全局的回调，当script请求完毕之后会执行这个callback。说完以后感觉面试官依旧不是很满意，他又提示我:script标签加载完之后是自动执行脚本的吗？是！

面试官:好我们接着说说cors，我想所有网站都能跨域请求怎么解决？

答:后端设置access-control-allow-origion:*

面试官:ok，那我要是觉得这样不安全，同时想要解决跨域，应该怎么解决？

答:设置access-control-allow-origion为自己网站具体的协议+域名+端口号

面试官，嗯，一般情况下我这样设置后，前端就无法接受和存储cookies了，你一般怎么解决？

答:前端xmlhttprequest设置withCredentials:true，服务端同时设置access-control-allow-credentials

2，用过闭包吗，你一般用在哪里！

答，用过，以前主要是用在for循环中，当for循环中出现异步操作时，最终结果将会是for循环的最后一个值，这时我们需要用闭包保存住for循环每一步的值。

面试官:额，我还是头一次听说把闭包用在for循环里，但是似乎也可以，那你知道闭包具体的作用吗？

答:我个人理解，闭包就是缓存变量用的！

面试官:闭包为什么能缓存变量，知道他的原理吗？

答:闭包一般都是通过函数内返回另一个函数，并且返回的函数依赖了父函数的某个变量，当我们在外部调用父函数时，此时js将会获得一个内部的函数的对象引用，但因为这个内部函数依赖了外部函数的某个变量，所以外部函数无法被js引擎销毁，此时变量被缓存，行成闭包。

3，了解前端安全吗？比如xss这种

答:了解的，工作中经常遇到。

面试官，大致介绍一下xss攻击，如何利用xss去攻击一个网站，换句话说，攻击的步骤是哪些？

答:xss，也就是跨域脚本攻击，常见于前端的input框还有console控制栏，我们将我们写好的脚本通过input标签注入，没有拦截过xss页面将会直接执行这些脚本。

面试官，你说的这些其实不是很危险，你一直在你本地操作，怎么才能真正的攻击到别人？

答:额，我理解的xss攻击一般不会攻击服务端。。。

面试官:其实这个脚本在你的input框里是不会装执行的，真正的危险是，当你的脚本被上传到服务端(存在数据库或者缓存中，常见于评论等功能)，当其他人请求此资源时，服务端就会将此脚本下发至客户端，客服端收到请求后，就会自动执行此脚本。

4，你了解csrf攻击吗？如何攻击别人？攻击的原理是什么！

答:csrf攻击，也就是跨站请求伪造，当我在一个以cookies为授权方式的网站登陆以后，服务端就会下发用户标识至客户端，此时客户端将会把这些信息存储在cookies中，此时我们打开另一个有攻击性的网站，他将会返回一个带有攻击性的脚本，去请求刚登陆的网站，原网站接到请求后以为是正常操作，默认通过，形成了csrf攻击。

面试官:你说的对，但是我觉得这没有意义啊，你这个csrf脚本，就是为了获取别人的账号信息，进行支付啊发布啊，你刚说的都是在自己本地玩，有考虑过怎么攻击别人吗？

答:不好意思，不太懂。

面试官:其实这很常见，通常做法是，写一个自己的网站，网站里嵌套一个别人的网站，完了以后我把我的域名做的很像，发给别人，别人误以为这是官方网站，进行登陆等一系列操作，我再在页面中加上我自己的一些脚本就可以通过他的cookie执行很多操作！

5，用过es6吗，知道哪些新功能？

答:promise。。。。巴拉巴拉

6，看你简历用过vue，用的怎么样呀，能说下vue的双向绑定原理，或者说是mvvm的双向绑定原理！

参考vue响应式原理！

7，了解http状态码吗？比如304状态码是什么意思？

答:304一般情况下用于http缓存，服务器端告诉客户端请求的资源可以继续使用缓存。

面试官:302呢，302状态码怎么使用？

答:没使用过。

面试官:302也是一个和资源有关的状态码，代表当前url请求的资源已经被暂时移动

8，了解ajax吗，能说说ajax是怎么实现的？

答:了解的，发起一个ajax请求必须创建一个xmlHttpRequest对象，通过设置请求方式、请求参数、url等发出请求，当请求响应时会触发一个onReadyStateChange事件，这时我们监听此事件的readyState属性为4且ajax的status为200时，可以通过ajax.responseText取到后端返回的数据。

面试官:能说说onreadystatechange的几个状态吗？

答:巴拉巴拉。。。

面试官:我们取数据使用4这个状态码吗？是！

9，了解http和https吗，说一下他们的区别！

https采用ssl/tls公钥加密技术，占用端口号443，巴拉巴拉。。。

6月16日二面！

1，说一下工作中觉得有亮点的项目。

答:说了一个做了首屏加载优化，webpack打包优化，精简包体积的项目，面试官觉得只做这些算不上亮点，又问能再说一两个不，又随便说了两个技术难度比较大的项目。但依旧觉得面试官不是很满意！

2，你知道阶乘在原生js怎么实现吗？

使用for循环，逆序遍历n，最终实现，4*3*2*1

3，你知道number在js中会丢失精度吗？你一般怎么处理，数字相乘，数字相除？

是的，常用做法是将数字转为字符串处理，或将数字转为其他进制，或者先将其缩小10的倍数，在转为字符串时再乘回来。

4，了解中序查找吗？

答:不了解。

5，了解二分查找吗？

答，不了解

6，了解快速排序吗？

折中随机找到一个数字，大的往前移动，小的往后移动，循环一定次数后结束。

7，了解算法中的什么什么吗？

由于名词没听过，没回答上，面试完深圳连名字都忘了！

8，csrf介绍一下。？？？又问这个？

答:巴拉巴拉

面试官:嗯，你说的这个只是原理，但是一般情况下，别人调用我的接口都是会跨站的，cookie是无法带上的，想个办法处理一下？

我:额，不知道

9，进程和线程了解吗，解释一下？

说了下大概的

10，了解linux吗，介绍一下他的原理。

不知道具体什么意思

11，我看你用过很多node.js框架，能分别介绍下他们的原理吗？

答，说了下nest.js的原理

面试官:能说下这个框架在上线后，占用服务器多少资源，多少线程，多少进程，分别是哪些服务占用的？

答:不了解

12，大致描述一下服务端渲染。

答:随便答了一点

13，说一下从输入url到页面渲染发生了什么？并针对每个步骤采取一些优化措施！

答:这个很好说

14，页面是如何加载的？

css规则，dom树，渲染树

15，http2新增了什么特性？

多路复用，header压缩

16，了解promise吗，介绍下promise原理

答:这个很简单，参考阮一峰es6

17，eventloop了解吗？

答，同上

18，了解async await

答:同上

19，为什么想回西安？

20，为什么想来腾讯

21，你觉得你的优势在哪里

22，vue中有个子组件，是一个表单，数据从父组件而来，想实现数据回显并可修改，但不能修改父组件传值，最终数据传回父组件提交！

答:首先通过props将数据传给子组件，子组件在props对象中定义，同时在data中新增变量，如果传过来的对象是嵌套对象，且对象中无fuction，则用json.parse(json.stringify(data)深复制一份给data中的变量，若传过来的对象无嵌套对象，则可以直接使用...运算符和object.assign浅拷贝一份，最终模板中用v-modol=http://data.xxx来实现回显及修改。修改完成后，使用this.$emit触发父组件事件，将修改后的值作为参数带回，父组件进行数据上传等操作！

上述操作仅能用于父组件只传一次值的情况，若父组件使用的是动态传值，则上述方法无效，因为data中的参数赋值只会在初始化时将其复制一次，后续变化不会影响data，故此时只能使用watch监听props变化，如需要监听传输对象属性变化，需同时开始deep。同时开启immedate，保证首次赋值也触发监听，最后在watch的handler中进行data的赋值操作，若当前用户已在修改表单，则可能需要开启数据智能合并！可用object.assign和...运算符实现！

23，了解tcp和udp吗，说说他们的原理及区别？

答:tcp是面向连接的，我们前端主要使用这个协议。。。巴拉巴拉说了一些简单的。

中间还问了很多网络、算法、linux的知识，很多题目忘了，抛开前端知识，总体回答上一半左右吧。历时一个多小时！

面试官总结:对计算机网络、数据结构不求甚解，对js原理和vue原理理解较深(滔滔不绝，每次都喊可以了)。估计凉了

三面:

面试官自我介绍，说他是后台开发工程师，主要对我进行一些复试，过程比较简单，问了一些http原理，http状态码，计算机缓存，服务器缓存，mysql，node.js原理，redis原理，服务端渲染，大头时间主要花在亮点项目的介绍上。

9.17日补充，后来才知晓，三面其实是总监面，后台出身，问的都是架构层面的东西！

四面:

4面是个hr面，问一些工作经历，一些职场经历等等，比较简单。

个人总结:难度主要出在二面，二面面试官一般是你将来的直系领导，我在四面时问了hr，hr说以后得工作任务都是二面这位深圳的前端主管安排，所以他问的问题一般非常深入，一知半解的技术最好不要说出来，比如我就被问到了node.js很难的问题，只能解释说自己没接触过这方面知识。祝大家好运，溜了！