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

时间 2021-01-02

标签 javascript css html 前端 java 后端浏览器缓存安全性能优化栏目快乐工作繁體版

原文原文链接

安全

XSS

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

类别

DOM XSS

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

反射型XSS

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

存储型 XSS

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

XSS危害

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

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