最近好几个准备暑期实习的学弟学妹都在问2023年奇安信春招前端方向试卷1的事。这份卷子在求职群里流传挺广题型不算偏但有几道安全方向的题确实能拦住一批只会刷普通八股文的人。我花了不少时间把它整个过了一遍把每个模块的考点、答题思路、踩坑点都整理了出来。如果你是准备投安全厂商前端岗位的同学或者单纯想看看大厂前端笔试到底考什么这份拆解应该能给你一些参考。说实话一份前端笔试卷被单独拿出来反复讨论本身就有原因。奇安信这家公司的业务底色是网络安全它招前端的时候考察点会和普通电商、社交类互联网公司有明显的差异。它不是要找一个只会写页面的人而是要找一个“写出来的代码不容易被攻破”的人。所以你会发现这份卷子里JavaScript基础占了大头Web安全相关知识也占了很大比重框架反倒没有那么核心。1. 试卷整体结构与出题风格解读1.1 安全厂商前端笔试和普通互联网公司有什么不一样先说一下我对这份试卷的整体判断难度属于“中规中矩偏上”没有特别变态的算法题但对基础知识的考查非常细甚至有点“抠字眼”的感觉。普通互联网大厂的笔试往往一上来就是一两道中等难度的算法题后面再挂几道前端概念题。奇安信这份卷子给我的感觉则完全不同它倾向于用大量“小题目”覆盖前端知识体系里的各个角落然后集中考两个方向一个是JavaScript语言本身的掌握程度另一个是Web安全的基础认知。为什么安全厂商会这么出题因为安全公司的前端开发日常写业务代码时经常会遇到用户输入、敏感信息展示、第三方脚本加载这类场景。如果开发者对XSS、CSRF、前端加密、Cookie安全这些概念没概念写出来的代码可能就是给攻击者留后门。所以笔试里考的不只是“你会不会写代码”更是“你知不知道边界在哪里”。我见过不少基础不错的同学JS八股文背得滚瓜烂熟结果死在XSS原理题上就是因为复习时压根没想到安全厂商会考这个。1.2 题型分布与时间分配根据流传出来的回忆版本我做了个题型分布估算不一定和原卷完全一致但结构上比较有代表性。整个卷子大概包含单选、多选、填空、手写代码、编程题、简答/场景题这么几类。题型大致占比建议时间分配单选题约30%30分钟多选题约10%10分钟填空题约10%10分钟手写代码题约25%40分钟编程题约15%30分钟简答/场景题约10%20分钟这个时间分配本质上就是“先快后慢”的策略。客观题遇到拿不准的先标记跳过不要恋战把时间留给后面的代码题。我见过不少同学在单选里死磕一道有争议的题结果手写代码没写完非常可惜。线上笔试系统通常有倒计时但不会每道题单独计时所以整体节奏必须自己把控好。2. 核心考点拆解JS、浏览器和网络这一部分是整张试卷的基石客观题和填空题覆盖的知识点很杂几乎把前端面试里最常见的考点都过了一遍。我挑几个分值重、出现频率高的展开讲。2.1 原型链、闭包和this指向JS基础题在这类笔试里属于必考而且考得很有技巧。单选题大概率会出现类似这样的题目function Foo() { this.name foo; } Foo.prototype.say function () { console.log(this.name); }; const a new Foo(); const b a.say; b();问最后输出什么。这里考察的是this指向和原型链的交叉点关键在于b()是普通函数调用this不再指向a。在非严格模式的浏览器环境里this指向全局对象而全局对象上默认存在window.name属性初始值是空字符串所以输出会是一个空行如果运行环境是Node.js且全局没有定义name属性才会输出undefined在严格模式下this是undefined直接抛TypeError。这类题最容易错的地方不是原型链本身而是对函数调用方式的判断。我复盘时习惯拿到题先画两条线一条是对象和原型链的关系线一条是函数调用方式对this的影响线。只要把new调用、普通调用、对象方法调用、call/apply/bind调用这四种方式的this指向搞清楚再配合严格模式的知识点基本不会丢分。闭包也是常客以前有一道很经典的题for (var i 0; i 3; i) { setTimeout(function () { console.log(i); }, 100); }问最后输出什么。答案是3 3 3不是0 1 2。这里考的是闭包捕获的是变量引用不是变量值。var声明的i是函数作用域循环结束后i已经变成3所以三个定时器回调打印的都是3。改成let就能输出0 1 2因为let在每次循环迭代中都会创建一个新的绑定。这个知识点虽然基础但能直观看出你对作用域的理解深度。2.2 事件循环与异步顺序异步题在这份卷子里也是必考而且经常放在多选题里一放就是好几道。常见的一道输出顺序题console.log(script start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);输出顺序是script start - script end - promise1 - promise2 - timeout。这道题的考点是宏任务和微任务的区别同步代码先执行完当前宏任务结束后清空微任务队列最后才会执行下一个宏任务。setTimeout即使延迟是0也要等所有微任务处理完。2023年这场考试的题面可能比这个复杂比如会在微任务里再嵌套queueMicrotask或者加入async/await的前后顺序。这里要特别提醒一个坑await后面的代码本质上是被包装成Promise.then回调执行的所以很多人以为“await后面就是同步”其实是错误的。遇到这类题我建议直接在草稿纸上画一个队列图把所有任务分成“同步代码、微任务、宏任务”三列然后按“先同步、再微任务、最后宏任务”的顺序依次弹出思路会清晰很多。2.3 HTTP、缓存与浏览器渲染网络相关的题目也是重头戏重点集中在HTTP缓存机制、从输入URL到页面渲染的过程、Cookie和Session的区别、跨域方案这几个方向。以缓存为例考法通常是给你一段响应头让你判断这次请求走没走缓存、回没回源。Cache-Control: max-age3600是强缓存一分钟内直接读本地不发请求ETag和If-None-Match属于协商缓存服务器返回304就复用本地资源否则返回新内容Expires是HTTP/1.0的字段如果和Cache-Control同时存在Cache-Control优先级更高。我的复习方法是画一个缓存决策流程把第一次请求、强缓存命中、协商缓存命中和未命中的几种情况分开写清楚。比如第一次请求返回200第二次因为Cache-Control没过期直接走本地副本在DevTools的Network面板里显示from memory cache或from disk cache。如果中间还有CDN代理又得考虑代理缓存对私有缓存的影响这个在简答题里容易展开。从URL到页面渲染的过程也是简答题高频考点。完整链路是DNS解析 - 建立TCP连接 - 发送HTTP请求 - 服务器响应 - 浏览器解析HTML构建DOM树 - 解析CSS构建CSSOM - 合并成渲染树 - 布局 - 绘制 - 合成。笔试里阅卷快只要步骤完整、关键点提到分数都不会低。特别提醒别漏了“CSSOM构建和DOM构建是并行的”这个细节也别忽略了defer和async对脚本阻塞的影响以及重排和重绘的区别这几个点经常作为加分项出现。3. 奇安信特色前端安全相关的考核点这一部分是我认为整张试卷最有“厂商特色”的地方也是它跟普通前端笔试题拉开差距的关键。奇安信本身是做安全起家的前端卷子非常看重你对Web安全基础的理解。3.1 XSS与CSRF几乎年年必考先简单说一下基础概念因为客观题里很可能直接给你一段代码让你判断它有没有XSS漏洞。XSS的核心是攻击者把恶意脚本注入到页面中当其他用户访问时脚本在受害者浏览器里执行。常见类型有三种存储型、反射型和DOM型。前端笔试最爱考的是DOM型典型代码如下const name new URLSearchParams(window.location.search).get(name); document.getElementById(welcome).innerHTML 你好 name;攻击者只要在URL后面加?nameimg srcx onerroralert(1)这段内容就会被当作HTML标签解析弹窗脚本直接执行。修复方案很简单用textContent代替innerHTML或者在插入前对HTML特殊字符做转义。这个点如果你之前做过前端项目应该很容易理解如果没接触过建议多写几遍防御代码笔试中很可能会让你手写一个转义函数。CSRF则完全是另一个维度。它的核心是攻击者诱导受害者在已登录状态下向目标网站发起一个非本意的请求。回想一个场景你在论坛里点了一张图片图片的src实际上是https://bank.com/transfer?tohackeramount10000而你又没退出银行登录请求就会自动带上Cookie完成转账。防御CSRF的常见思路有三个服务端校验Referer字段、使用CSRF Token并在服务端校验、设置Cookie的SameSite属性限制跨站携带。我复盘时发现不少同学能写出“CSRF Token”几个字但说不清为什么有效这就会丢印象分。要记住Token之所以有效是因为攻击者无法在跨站请求里伪造出和当前用户会话绑定的随机Token。3.2 前端安全编码的实操要求除了XSS和CSRF这份卷子还出现过一些偏工程的安全细节。比如localStorage里能不能放敏感信息不建议。因为任意JS脚本都能读取localStorage一旦出现XSS漏洞里面的Token直接就被偷走了。防iframe嵌套点击劫持需要在响应头里设置X-Frame-Options或Content-Security-Policy的frame-ancestors指令。前端对用户输入除了做格式校验还要做长度限制和白名单过滤否则一些恶意载荷照样能传到后端形成存储型XSS。安全厂商的笔试很典型的一点是它会让你的后端视角和前端视角交叉。你不能只懂怎么调接口还得知道接口被恶意调用时会产生什么后果。这也是为什么我建议准备这类公司前端岗的同学除了刷常规八股文一定要额外补Web安全的基础知识。OWASP Top 10里跟Web前端相关的条目至少要知道它们是怎么发生的、怎么防御。3.3 用攻防视角看待前端代码复盘这份卷子时我最大的感受是它想筛选的不是“只会写页面的前端”而是“有安全意识的前端”。很多题目表面上是在考功能实现换个角度其实就在考安全隐患。举个例子假设你负责一个搜索页用户搜索的关键词要在页面上回显。你会怎么实现很多同学第一反应是用innerHTML拼接因为方便。但安全视角会告诉你必须考虑关键词里被人塞了script或iframe srcjavascript:...怎么办所以要用textContent或者转义。再比如前端上传文件功能一般只校验文件后缀名但攻击者可以改后缀绕过甚至上传一个带恶意代码的SVGSVG本质上是XML里面可以内嵌脚本或HTML文件最终形成存储型XSS。这种题不会直接跟你说“考安全”但实际上它就是考你有没有这个意识。4. 手写题与编程题的实战通关思路基础题只是前菜手写代码题才是真正的分水岭。这份卷子的手写题方向非常主流基本都是前端日常开发里会用到的工具函数几乎不考冷门API。4.1 必练的经典手写题清单我按出现频率排了个清单如果你时间有限优先练这些深拷贝要考虑数组、对象、循环引用、Date、RegExp等边界情况防抖和节流Promise.all/Promise.race手写new手写call/apply/bind数组去重和扁平化发布订阅事件总线EventEmitter用defineProperty或Proxy实现一个简单的Vue式响应式。以前我也觉得“面试造火箭工作拧螺丝”写业务根本用不上手写Promise.all。但后来写多了就知道这些题考的不是你背没背过答案而是你理不理解JavaScript本体的能力。比如手写深拷贝时如果你没踩过JSON.parse(JSON.stringify(obj))的坑大概率不会注意到undefined和函数会被忽略、Date会被转成字符串、循环引用会直接报错。真正合格的手写深拷贝要能处理这些边界情况这恰恰是业务代码里容易埋雷的地方。4.2 一道高频手写题的完整拆解以手写Promise.all为例我给出一个比较标准的写法并且拆解每一步的意义function myPromiseAll(promises) { return new Promise((resolve, reject) { if (!Array.isArray(promises)) { return reject(new TypeError(promises must be an array)); } const results []; let count 0; if (promises.length 0) { return resolve(results); } promises.forEach((promise, index) { Promise.resolve(promise) .then((value) { results[index] value; count; if (count promises.length) { resolve(results); } }) .catch((err) { reject(err); }); }); }); }这里有几个关键点值得注意。第一参数不一定是Promise实例可能是普通值所以外层要用Promise.resolve统一包装。第二results用下标赋值而不是push这样能保证结果顺序和传入顺序一致。第三用count计数而不是直接判断results.length promises.length因为数组空位和异步到达顺序会影响length判断。第四一旦某个Promise失败整组立即reject这符合Promise.all的语义。笔试时如果时间允许我会把边界情况用注释标出来比如空数组处理、非数组参数处理。阅卷人看到这种代码基本能判断你不是死记硬背而是真的理解过语义。4.3 编程题的答题套路编程题部分难度不算特别高通常是一道数组/字符串处理题加一道中等难度的算法题。这里没有太多捷径但有几个实战建议。第一先读清题目确认输入输出的边界。输入可能带空格、可能是空数组、数字可能是字符串类型这些在代码里可以直接防御。第二先写一个暴力解法保证能跑通再考虑优化。线上笔试通常是部分得分制暴力解说不定能拿一半分远比你卡在优化上什么都交不了强。第三代码命名要规范别用a、b、temp这类毫无信息量的变量名。你写的代码是要给人看的命名清晰本身就是加分项。我自己做笔试的习惯是“读题—确认边界—写整体结构—补细节”。这个流程看起来慢但能避免很多低级错误。你不可能在40分钟内把每道题都写到最优解但你可以保证每道题都有分。5. 复盘总结与备考实操建议5.1 二八原则把复习重心放到高频考点上复盘完整份卷子我发现80%的分数都集中在20%的知识点上。JavaScript基础、浏览器缓存、异步编程、Web安全基础、常见手写题这几块就是那20%。如果你还在按部就班从头到尾翻书我建议调整一下优先把这些高频考点复习透再扩展其他低概率内容。具体做法是给自己做一个知识点表格每个模块标注“熟练度”和“优先级”由高到低逐项击破。表格不需要多精美关键是“知道自己的薄弱点在哪里”。我当时做的是这样模块高频考点我的熟练度计划JS基础原型链、闭包、this中刷题总结异步事件循环、Promise中手写强化浏览器缓存、渲染机制低看资料画图安全XSS、CSRF低重点补课框架Vue响应式、diff高保持5.2 安全方向前端岗的额外复习清单如果你明确想投奇安信这类安全厂商除了通用前端知识建议额外准备几个方向的题目什么是CSP它如何限制脚本加载什么是点击劫持如何防御React里为什么不能直接用dangerouslySetInnerHTML渲染用户内容如何从URL参数中安全地取出内容并渲染到页面上这些题目不需要你达到安全工程师的深度但至少要能用前端语言讲清楚“风险是什么”。我发现一个比较高效的学习路径是先看OWASP Top 10里和前端相关的条目再结合自己写过的业务代码思考“如果这里被攻击了会发生什么”最后用笔写下来。写下来的过程比看十遍记忆都深刻。5.3 笔试当天的节奏把控与避坑指南刷题之外笔试当天的节奏也非常重要。我第一次参加线上笔试时因为紧张在选择题上花太多时间最后手写题只写了一半复盘时特别后悔。后来我给自己定了固定流程拿到卷子先花2分钟把全部题目扫一遍标出哪些有把握、哪些要跳过选择题尽量控制在1分钟内一题超过时间先蒙一个并标记代码题先写有把握的再回头啃难题所有代码题写完如果还有剩余时间检查边界条件尤其是空数组、空字符串、特殊输入。很多线上笔试系统是允许切出浏览器的但我不建议用这个功能去查答案。一方面防作弊系统会记录异常行为另一方面查来的答案很难内化成自己的知识就算系统没检测到面试被深挖时照样露馅。6. 从笔试到面试这份试卷的延伸用法6.1 面试官会把笔试题延伸成追问笔试考完不代表结束这份卷子里的题很多会在面试环节被再次翻出来只是问得更深。比如笔试里只让你判断this指向面试官可能会继续追问“如果这里换成箭头函数呢”“如果用bind呢”“你能手写一个bind吗”一层比一层深入。我在陪学弟模拟面试时发现很多同学笔试能答对但被追问几句就慌了。原因在于笔试时可以通过背诵和技巧拿分面试时如果只背结论答不出推理过程面试官一眼就能看穿。所以复盘笔试时不要只对着答案解析看一遍而是要把每道题当成一个知识树节点主动往深处延展。比如一道HTTP缓存题我会继续问自己强缓存和协商缓存分别由哪些响应头控制开发环境下改了代码为什么不生效资源在CDN上时缓存策略要怎么调整6.2 把考点地图复用到其他公司我后来发现奇安信这份试卷里的考点覆盖率相当高。事件循环、HTTP缓存、手写Promise、Web安全基础这几类内容在其他几家大厂的校招里也很常见区别只是出题方式更通用或更业务化。所以我的建议是把这份卷子当成一个“前端考点地图”每复习完一个模块就打个勾再用同样的表去对照其他公司的真题。看到重复考点就提速跳过看到没覆盖到的就补充进去比到处找一堆真题从头刷要高效得多。结合我自己这几年看校招简历、带实习生的经验说实话前端入门容易但想要在笔试和面试中稳定拿高分拼的还是基础功的扎实程度。如果你现在还在反复背八股文不如找一份像奇安信春招前端方向试卷1这样的真题把每个考点拆到“为什么”这个层面再动手写一遍效果会完全不一样。希望这份复盘能帮你少走一些我当年走过的弯路。