大家好，感谢邀请，今天来为大家分享一下koa网站源码分享的问题，以及和2020网站源码的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
作者：木子星兮i
转发链接：https://mp.weixin.qq.com/s/2kkqXmW_olEwD5D_CRjs6A
CSRF
跨站请求伪造（CrossSiteRequestForgery），是指黑客诱导用户打开黑客的网站，在黑客的网站中，利用用户的登陆状态发起的跨站请求。CSRF攻击就是利用了用户的登陆状态，并通过第三方的站点来做一个坏事。
要完成一次CSRF攻击,受害者依次完成两个步骤:
登录受信任网站A，并在本地生成Cookie在不登出A的情况，访问危险网站B
CSRF攻击
在a.com登陆后种下cookie,然后有个支付的页面，支付页面有个诱导点击的按钮或者图片，第三方网站域名为b.com，中的页面请求a.com的接口，b.com其实拿不到cookie，请求a.com会把Cookie自动带上（因为Cookie种在a.com域下）。这就是为什么在服务端要判断请求的来源，及限制跨域（只允许信任的域名访问），然后除了这些还有一些方法来防止CSRF攻击，下面会通过几个简单的例子来详细介绍CSRF攻击的表现及如何防御。
下面会通过一个例子来讲解CSRF攻击的表现是什么样子的。实现的例子：在前后端同域的情况下，前后端的域名都为http://127.0.0.1:3200,第三方网站的域名为http://127.0.0.1:3100，钓鱼网站页面为http://127.0.0.1:3100/bad.html。
平时自己写例子中会用到下面这两个工具，非常方便好用：
http-server[1]:是基于node.js的HTTP服务器，它最大的好处就是：可以使用任意一个目录成为服务器的目录，完全抛开后端的沉重工程，直接运行想要的js代码;nodemon[2]:nodemon是一种工具，通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于node.js的应用程序
前端页面：client.html
<!DOCTYPEhtml>\n<htmllang=&34;>\n\n<head>\n<metacharset=&34;>\n<metaname=&34;content=&34;>\n<metahttp-equiv=&34;content=&34;>\n<title>CSRF-demo</title>\n<style>.wrap{\nheight:500px;\nwidth:300px;\nborder:1pxsolid34;wrap&34;loginInfo&34;text&34;用户名&34;userName&34;password&34;密码&34;password&34;btn&34;payInfo&34;money&34;text&34;收款方&34;account&34;pay&34;http://127.0.0.1:3100/bad.html&34;_blank&39;.btn&39;.loginInfo&39;.payInfo&39;.money&39;&39;http://127.0.0.1:3200/isLogin&39;POST&34;block&39;none&39;http://127.0.0.1:3200/pay&39;POST&34;none&39;block&39;.userName&39;.password&39;http://127.0.0.1:3200/login&39;POST&34;block&39;none&39;.pay&39;http://127.0.0.1:3200/pay&39;POST&39;POST&39;GET&39;Content-Type&39;application/json&39;cors&39;include&34;koa&39;koa-route&39;koa-bodyparser&39;@koa/cors&39;koa-static&39;&39;name&39;127.0.0.1&39;/&39;2021-02-15&39;None&39;登陆成功&39;GET&39;Access-Control-Allow-Credentials&39;true&39;name&39;支付成功&39;未登录&39;Access-Control-Allow-Credentials&39;true&39;name&39;登陆成功&39;未登录&39;OPTIONS&39;Access-Control-Allow-Origin&39;Access-Control-Allow-Headers&39;Content-Type&39;Access-Control-Allow-Credentials&39;true&39;/login&39;/pay&39;/pay&39;/isLogin&39;启动成功&34;en&34;UTF-8&34;viewport&34;width=device-width,initial-scale=1.0&34;http://127.0.0.1:3200/pay&34;POST&34;form&34;targetIfr&34;display:none&34;text&34;userName&34;xiaoming&34;text&34;money&34;100&34;targetIfr&34;display:none&39;.form&34;http://127.0.0.1:3200/payMoney?money=1000&34;http://127.0.0.1:3200/pay&34;POST&34;form&34;targetIfr&34;text&34;userName&34;xiaoming&34;text&34;money&34;100&34;targetIfr&34;display:none&39;.form&34;http://127.0.0.1:3100/bad.html”>听说点击这个链接的人都赚大钱了，你还不来看一下么</a>
用户点击这个地址就会跳到黑客的网站，黑客的网站可能会自动发送一些请求，比如上面提到的自动发起Get或Post请求。
如何防御CSRF
利用cookie的SameSite
SameSite有3个值：Strict,Lax和None
Strict。浏览器会完全禁止第三方cookie。比如a.com的页面中访问b.com的资源，那么a.com中的cookie不会被发送到b.com服务器，只有从b.com的站点去请求b.com的资源，才会带上这些CookieLax。相对宽松一些，在跨站点的情况下，从第三方站点链接打开和从第三方站点提交Get方式的表单这两种方式都会携带Cookie。但如果在第三方站点中使用POST方法或者通过img、Iframe等标签加载的URL，这些场景都不会携带Cookie。None。任何情况下都会发送Cookie数据
我们可以根据实际情况将一些关键的Cookie设置Stirct或者Lax模式，这样在跨站点请求的时候，这些关键的Cookie就不会被发送到服务器，从而使得CSRF攻击失败。
验证请求的来源点
由于CSRF攻击大多来自第三方站点，可以在服务器端验证请求来源的站点，禁止第三方站点的请求。可以通过HTTP请求图中的Referer和Origin属性。
HTTP请求头
但是这种Referer和Origin属性是可以被伪造的，碰上黑客高手，这种判断就是不安全的了。
CSRFToken
最开始浏览器向服务器发起请求时，服务器生成一个CSRFToken。CSRFToken其实就是服务器生成的字符串，然后将该字符串种植到返回的页面中(可以通过Cookie)浏览器之后再发起请求的时候，需要带上页面中的CSRFToken（在request中要带上之前获取到的Token，比如x-csrf-token：xxxx）,然后服务器会验证该Token是否合法。第三方网站发出去的请求是无法获取到CSRFToken的值的。
其他知识点补充
1.第三方cookie
Cookie是种在服务端的域名下的，比如客户端域名是a.com，服务端的域名是b.com，Cookie是种在b.com域名下的，在Chrome的Application下是看到的是a.com下面的Cookie，是没有的，之后，在a.com下发送b.com的接口请求会自动带上Cookie(因为Cookie是种在b.com下的)
2.简单请求和复杂请求
复杂请求需要处理option请求。
之前写过一篇特别详细的文章CORS原理及@koa/cors源码解析[3]，有空可以看一下。
3.Fetch的credentials参数
如果没有配置credential这个参数，fetch是不会发送Cookie的
credential的参数如下
include：不论是不是跨域的请求，总是发送请求资源域在本地的Cookies、HTTPBasicanthentication等验证信息same-origin：只有当URL与响应脚本同源才发送cookies、HTTPBasicauthentication等验证信息omit：从不发送cookies.
平常写一些简单的例子，从很多细节问题上也能补充自己的一些知识盲点。
推荐JavaScript经典实例学习资料文章
《使用Node.js开发的SpaceX-API开源了》
《63个JavaScript正则大礼包「值得收藏」》
《提高你的JavaScript技能10个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript中Object.freeze与Object.seal的用法》
《可视化的JS：动态图演示-事件循环EventLoop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的js：动态图演示Promises&Async/Await的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线PDF预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug3.0.0正式发布，不再支持Node.js6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript20年中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的5个区别》
《通过发布/订阅的设计模式搞懂Node.js核心模块Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.jsV14.3.0发布支持顶级Await和REPL增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript已进入第三个时代，未来将何去何从？》
《前端上传前预览文件image、text、json、video、audio「实践」》
《深入细品EventLoop和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node+H5实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的JavaScript模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道JavaScript知识点汇总（一）》
《关于前端174道JavaScript知识点汇总（二）》
《关于前端174道JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个JavaScript版敏感词过滤库》
《送你43道JavaScript面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂JavaScript执行机制》
《一个合格的中级前端工程师需要掌握的28个JavaScript技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解js深拷贝vs浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的JS写得更漂亮》
《恭喜你获得治疗JSthis的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于JavaScript作用域的5个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation在JS中的应用「前端篇」》
作者：木子星兮i
转发链接：https://mp.weixin.qq.com/s/2kkqXmW_olEwD5D_CRjs6A
关于koa网站源码分享和2020网站源码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。