前端面试攻略

1.webpack和gulp看法

• webpack是一个模块打包工具，可以管理和打包html，js，css以及各种静态文件，给出一个入口文件，webpack可以分析模块之间的依赖关系，自动化打包所有资源

• 对于不同的资源，webpack有对应的模块加载器，可以处理各种类型的资源

• 可以将资源切割成不同的模块，实现按需加载，降低了初始化时间

• 使用异步IO并具有多级缓存，webpack很快且在增量编译上更快

• gulp侧重于前端开发整个过程的工作流管理，可以设置一系列的任务，需要给定需要打包资源的相应路径，可以启动server，sass编译，文件合并压缩

• gulp也能引用gulp-webpack模块，进行模块打包

2.CommonJS和AMD的区别

• CommonJS主要用于服务端模块加载，模块的加载是同步的，加载完成模块才能继续运行下面的程序
• AMD主要用于前端模块加载，模块的加载是异步的，模块的加载不影响后面语句的运行，所有依赖这个模块的语句，都定义在一个回调函数中，等到模块加载完成后，才会运行这个回调函数

3.作用域链

• 作用域链主要是保证执行环境有权访问的变量和函数是有序的
• 作用域链的变量只能向上访问，直到window对象被终止，作用域链向下访问变量时不被允许的

4.web安全与防护

sql注入漏洞
将用户输入的信息直接通过拼接SQL语言来完成查询导致的。

• 后端采用参数化SQL语言
• 不要把机密信息明文存放，应该将其单向hash后存储

XSS跨站脚本攻击
攻击者在web页面插入恶意的html标签或者js代码，例如在论坛中放置一个链接，骗取用户点击后，窃取用户cookie中的私密信息，或者添加恶意表单

• 对用户输入的<><scripte>等字符进行过滤，将任何内容写到页面前通过encode进行编码
• 避免直接在cookie中直接保存用户的隐私
• 将cookie与系统ip绑定来降低cookie泄露后的危险
• 服务器不需要浏览器端对cookie进行操作，可以在Set-Cookie末尾加上HttpOnly来防止js获取cookie

CSRF跨站请求伪造
登录受信任的网站，并在本地生成cookie，在不登出网站的情况下，访问危险网站，危险网站会带上cookie发送相应请求去获取资源

• 在客户端页面添加伪随机数
• 用户每次提交表单时要在表单中填写一个图片上的随机字符串

angular安全

• angular对一些可能导致安全隐患的场景，html属性绑定，innerHTML，style样式绑定，url绑定提供了安全环境保护，对里面的内容进行了过滤，并转化为可以安全插入DOM中的数据格式
• 如果需要插入HTML和script标签，如富文本编辑，则可以调用相应的DomSanitizer服务，可以跳过Angular默认安全化处理
• 一般应该便面用原生DOM API操作页面内容，这些会绕开angular的安全化处理