4月1号的时候因为出去玩了，没时间上课，好像忘记请假也旷课了。
然后看完这节课的复播，表示挺兴奋的，就立马来写周记了。
一开始主要是讲了上报的知识点：
上报分两种，打点上报和性能上报。
性能上报
1.打点上报就是用Date类统计时间。
let start = +new Date();
let end = +new Date();
console.log(start - end);
2.性能上报是用performance的api：
以下内容大部分摘抄自这位大佬的 html5的学习--performance
以下代码块有任何不懂的api均可翻上边的link
let timing = performance.timing;
// 这里可以找到很多加载的信息
console.log(timing);
// 准备新页面时间耗时：
let readyStart = timing.fetchStart - timing.navigationStart;
// redirect 重定向耗时：
let redirectTime = timing.redirectEnd - timing.redirectStart;
// Appcache 耗时：
let appcacheTime = timing.domainLookupStart - timing.fetchStart;
// unload 前文档耗时：
let unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
// DNS 查询耗时：
let lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
// TCP连接耗时：
let connectTime = timing.connectEnd - timing.connectStart;
// request请求耗时：
let requestTime = timing.responseEnd - timing.requestStart;
// 请求完毕至DOM加载
let initDomTreeTime = timing.domInteractive - timing.responseEnd;
// 解释DOM树耗时：
let domReadyTime = timing.domComplete - timing.domInteractive;
// load事件耗时：
let loadEventTime = timing.loadEventEnd - timing.loadEventStart;
// 从开始至load总耗时
let loadTime = timing.loadEventEnd - timing.navigationStart;
代码加注释看起来有点模糊，所以顺手做了一个表格对照，正好以后做性能优化时可以照着这个表格参考。
| code | 解释 |
|---|---|
| readyStart | 准备新页面耗时 |
| redirectTime | 重定向耗时 |
| appcacheTime | Appcache耗时 |
| unloadEventTime | unload前文档耗时 |
| lookupDomainTime | DNS查询耗时 |
| connectTime | TCP连接耗时 |
| requestTime | request请求耗时 |
| initDomTreeTime | 请求完毕至DOM加载耗时 |
| domReadyTime | 解释dom树耗时 |
| loadEventTime | load事件耗时 |
| loadTime | 从开始至load总耗时 |
异常上报
Badjs与Ravenjs，目前工作暂时用不上，而且还没正式使用node，待研究。
安全
CSP
CSP： Content Security Policy，内容安全策略。
主要用来解决浏览器扩展程序潜在的跨站脚本问题。如果后台配置了，则在浏览器的response Header中可见：Content-Security-Policy
CSP 策略会以白名单的机制对网站加载或执行的资源起作用。从而保证客户端内容的可信。
由后台配置认可的域名，只有 配置过的域名 提供的内容才可以被加载，这么做不能保证整个请求的安全性，但至少可以保证客户端内容是可靠的。
例：如果浏览器插件要修改一些内容，假设内容是其他域名并且不在白名单域名中的，则会被浏览器自动忽略掉。
以上只是粗略的记录个人的理解，想要更详细的内容可以看这位大佬的讲解：前端防御从入门到弃坑--CSP变迁
XSS
XSS： Cross Site Scripting，跨站脚本攻击，为了不与 Cascading Style Sheets 的缩写 “CSS” 重叠，故将其的名字改成 “XSS”。虽然老掉牙的概念，但我这里还是习惯性记录一下吧哈哈哈哈哈。
因为本身对XSS没什么概念。。所以下面的内容会写的比较烂，知乎大佬解释这两种区别会解释的比较通俗：知乎Snake用户形容的存储型与反射型XSS。
XSS 分两种类型：
1、存储型：输入--进入数据库--取出数据库--输出。
1.1、抽象解释：输入在A处进入数据库，而输出则可能出现在其他任何用到数据的地方。
1.2、常见方式：输入大部分来自来自POST/GET请求，常见于一些保存操作中。
1.3、通俗解释：也就是持久性XSS攻击，将攻击村居存进数据库，攻击行为就伴随着攻击数据一直存在。
1.4、常见解决方式：使用encodeURIComponent的api过滤。
2、反射型：输入--输出。
2.1、抽象解释：输入在哪里，输出在哪里。
2.2、常见方式：输入大部分来自DOM的某些属性，也会偶尔有数据在请求中（POST请求）。
2.3、通俗解释：直接在页面上插入script标签代码，调用恶意js。
2.4、常见解决方式：将 innerHTML 插入内容改成 innerText 的api。设置 X-XSS-Protection: 1; mode=block。
CSRF
CSRF： 跨站请求伪造，Cross-site request forgery。
例：网站投票，如果是通过url形式带参数（get请求）来向后台提示已投票时，可以将链接嵌入到其他站点让其他用户误操作，刷投票数。
解决方案：
1、在接收参数加一个加密cookie，也就是token。
2、只接收post请求。
3、分多步处理，也就是多次页面跳转。
4、页面重定向，就是完事了别在这里逗留，赶紧到下一个页面玩儿去。
5、设置 X-Frame-Options: deny;。不允许使用iframe嵌入此页面，例如github禁止了，其中一个点就是防止刷star之类的CSRF。
clickjacking
clickjacking： 点击劫持。
常见：绝大部分你懂的网站。。不过那些应该是刻意劫持，各种伟哥广告需要嘛。
而我们不需要，还是设置 X-Frame-Options: deny; 。
完。
网友评论