前端面试之（安全、性能优化、SEO）

安全

XSS

xss: 跨站脚本攻击（Cross Site Scripting）是最常见和基本的攻击 WEB 网站方法，攻击者通过注入非法的 html 标签或者 javascript 代码，从而当用户浏览该网页时，控制用户浏览器。

类别

DOM XSS

DOM即文本对象模型，使用DOM可以允许程序和脚本动态的访问和更新文档的内容、结构和样式。这种方式不需要服务器解析响应的直接参与，触发XSS靠的是浏览器端的DOM解析，可以认为完全是客户端的事情。
反射型 xss :

反射型XSS

也被称为非持久性XSS，是现在最容易出现的一种XSS漏洞。发出请求时，XSS代码出现在URL中，最后输入提交到服务器，服务器解析后在响应内容中出现这段XSS代码，最后浏览器解析执行。

存储型 XSS

存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具有更高的隐蔽性，所以危害更大，它不需要用户手动触发。 当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。

XSS危害

利用虚假输入表单骗取用户个人信息。
利用脚本窃取用户的 Cookie 值，被害者在不知情的情况下，帮助攻击者发送恶意请求。

XSS 防御

httpOnly: 在 cookie 中设置 HttpOnly 属性，使js脚本无法读取到 cookie 信息。
前端负责输入检查，后端也要做相同的过滤检查。
某些情况下，不能对用户数据进行严格过滤时，需要对标签进行转换

CSRF

跨站点请求伪造（Cross-Site Request Forgeries），冒充用户发起请求（在用户不知情的情况下）， 完成一些违背用户意愿的事情（如修改用户信息，删初评论等）。

CSRF危害

• 利用已通过认证的用户权限更新设定信息等；
• 利用已通过认证的用户权限购买商品；
• 利用已通过的用户权限在留言板上发表言论。

防御

• 验证码；强制用户必须与应用进行交互，才能完成最终请求。
• 尽量使用 post ，限制 get 使用；get 太容易被拿来做 csrf 攻击；
• 请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。
• token 验证 CSRF 防御机制是公认最合适的方案。

使用token的原理：
第一步：后端随机产生一个 token，把这个token 保存到 session 状态中；同时后端把这个token 交给前端页面；
第二步：前端页面提交请求时，把 token 加入到请求数据或者头信息中，一起传给后端；
后端验证前端传来的 token 与 session 是否一致，一致则合法，否则是非法请求。

点击劫持

点击劫持，是指利用透明的按钮或连接做成陷阱，覆盖在 Web 页面之上。然后诱使用户在不知情的情况下，点击那个连接访问内容的一种攻击手段。这种行为又称为界面伪装(UI Redressing) 。

点击劫持一般有如下两种方式实现：

• 击者使用一个透明 iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的 iframe 页面；
• 攻击者使用一张图片覆盖在网页，遮挡网页原有的位置含义。

防御

X-FRAME-OPTIONS

X-FRAME-OPTIONS HTTP 响应头是用来给浏览器指示允许一个页面可否在<frame>, <iframe> 或者 <object> 中展现的标记。
网站可以使用此功能，来确保自己网站内容没有被嵌到别人的网站中去，也从而避免点击劫持的攻击

X-FRAME-OPTIONS 有三个值：

• DENY：表示页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。
• SAMEORIGIN：表示该页面可以在相同域名页面的 frame 中展示。
• ALLOW-FROM url：表示该页面可以在指定来源的 frame 中展示。

使用 Javascript 防御

判断顶层视口的域名是不是和本页面的域名一致，如果不一致就让恶意网页自动跳转到我方的网页。

if (top.location.hostname !== self.location.hostname) {    
    alert("您正在访问不安全的页面，即将跳转到安全页面！")   
    top.location.href = self.location.href;
}

此种方法可轻易被破解：

// 破解：
// 顶层窗口中放入代码
var location = document.location;
//或者
var location = "";
if (top.location.hostname !== self.location.hostname) {    
    alert("您正在访问不安全的页面，即将跳转到安全页面！")   
    top.location.href = self.location.href;
}
 

性能优化

有哪些性能优化的方面？

content

• 减少HTTP请求：合并文件、CSS精灵、inline Image
• 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
• 避免重定向：多余的中间访问
• 使Ajax可缓存
• 非必须组件延迟加载
• 未来所需组件预加载
• 减少DOM元素数量
• 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
• 减少iframe数量
• 不要404

Server

• 使用CDN
• 添加Expires或者Cache-Control响应头
• 对组件使用Gzip压缩
• 配置ETag
• Flush Buffer Early
• Ajax使用GET进行请求
• 避免空src的img标签

Cookie

• 减小cookie大小
• 引入资源的域名不要包含cookie

css

• 将样式表放到页面顶部
• 不使用CSS表达式
• 不使用IE的Filter

Javascript

• 将脚本放到页面底部
• 将javascript和css从外部引入
• 压缩javascript和css
• 删除不需要的脚本
• 减少DOM访问
• 合理设计事件监听器

图片

• 优化图片：根据实际颜色需要选择色深、压缩
• 优化css 雪碧图
• 图片地图
• 内联图片
• 不要在HTML中拉伸图片
• 保证favicon.ico小并且可缓存

具体性能优化方法

• 减少http请求次数：

  • CSS Sprites, JS、CSS源码压缩、图片大小控制合适；
  • 网页Gzip，CDN托管，data缓存 ，图片服务器。
• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，
• 前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
• 当需要设置的样式很多时设置className而不是直接操作style
• 少用全局变量、缓存DOM节点查找的结果。
• 减少IO读取操作
• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
• 图片预加载，将样式表放在顶部
• 将脚本放在底部 加上时间戳
• 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

SEO

前端需要注意哪些SEO

• 合理的title、description、keywords：搜索对这三项的权重逐个减小；

  • title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
  • description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
  • keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

如何做SEO优化?

• 标题与关键词

  • 设置有吸引力切合实际的标题，标题中要包含所做的关键词

• 网站结构目录

  • 最好不要超过三级，每级有“面包屑导航”，使网站成树状结构分布

• 页面元素

  • 给图片标注"Alt"可以让搜索引擎更友好的收录

• 网站内容

  • 每个月每天有规律的更新网站的内容，会使搜索引擎更加喜欢

• 友情链接

  • 对方一定要是正规网站，每天有专业的团队或者个人维护更新

• 内链的布置

  • 使网站形成类似蜘蛛网的结构，不会出现单独连接的页面或链接

• 流量分析

  • 通过统计工具(百度统计，CNZZ)分析流量来源，指导下一步的SEO