面试题集锦（2）

MandaoQiusuo
107 阅读3分钟

web安全攻击手段有哪些？以及如何防范

常见的有xss, csrf, sql注入

xss(cross site scripting) 跨站脚本攻击

定义: 指攻击者在网页嵌入脚本，用户浏览网页触发恶意脚本执行

XSS攻击分为3类：存储型（持久型）、反射型（非持久型）、基于DOM

如何防范:

设置HttpOnly以避免cookie劫持的危险 过滤，对诸如<script>、<img>、<a>等标签进行过滤 编码，像一些常见的符号，如<>在输入的时候要对其进行转换编码 限制，对于一些可以预期的输入可以通过限制长度强制截断来进行防御

csrf(cross site request forgery) 跨站请求伪造

定义: 是一种劫持受信任用户向服务器发送非预期请求的攻击方式

如何防范:

验证 HTTP Referer 字段 请求地址中添加 token 并验证 HTTP 头中自定义属性并验证

sql注入(SQL injection)

定义: 在未授权情况下，非法访问数据库信息

如何防范:

杜绝用户提交的参数入库并且执行 在代码层，不准出现sql语句 在web输入参数处，对所有的参数做sql转义 上线测试，需要使用sql自动注入工具进行所有的页面sql注入测试

前端优化手段有哪些？

  • 静态资源合并压缩(js,css, images)
    • 请求数量优化
  • Gzip压缩
    • 带宽优化
  • CDN
    • 就近节点，减少DNS查找
  • 按需加载
  • lazyload
    • 减少请求
  • 骨架屏
    • 优化白屏
  • web缓存
    • 缓存ajax数据
  • 减少重绘和重排
    • 批量更新ＤＯＭ样式
  • 页面结构
    • 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

如何理解es6中的Decorator（装饰器）？

定义

Decorator是ES7中的提案，概念借鉴于python， 它作用于一个目标类为其添加属性于方法

我们用一个比喻来理解Decorator, 把孙悟空看成是一个类，那么棒子就是装饰器为其装备的武器

代码理解:

@stick
class Monkey { }

function stick(target) {// 第一个参数就是目标类的本身
  target.ATK = 100000
}

Monkey.ATK// 为悟空装备了棒子，攻击力提高了100000

// 如果一个参数不够用，可以在装饰器外层再包一层
function stick(atk) {
  return function (targt) {
    target.ATK = atk
  }
}

@stick(200000)// 这样我们就为悟空增加了200000攻击力
class Monkey { }

Decorator 不仅能修饰类，也能修饰类的方法

class Monkey {
  @setName
  name() {
    this.name = '孙悟空'
  }
}

Decorator 只能修饰类及类的方法,不能修饰于函数,因为存在函数提升

Mixin

在修饰器基础上，我们可以实现mixin(混入),意思在一个对象中混入另一个对象的方法

代码示例:

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

const skill = {
  shapeshifting() {
    console.log('72变')
  }
}

@mixins(skill)
class Monkey {
}

Object.assign(Monkey.prototype, skill)
const swk = new Monkey()
swk.shapeshifting() // 72变

使用Decorator的好处

  • 扩展功能，相对于继承增加了更多的灵活性
  • 代码可读性更高，装饰器正确命名相当于注释
avatar
文章
阅读
粉丝