袁光斌的Blog

完整阅读本文大约需要5分钟。 开启本文前，先提出两个我在面试时被问到的题： 为了预防XSS攻击，我们会对用户的输入内容进行过滤，转义的时机应该是a.输入时前端处理 b.落库时后端处理 c.拼接HTML时 ？ XSS攻击的预防，需要前端还是后端去做？ 什么是XSS攻击XSS攻击是Cross-Site Scripting的缩写，直白来说，就是页面被注入了恶意的代码——用户输入的内容跳出文本的限制，成了可执行的代码。 XSS攻击的分类根据入侵代码的来源，通常将XSS攻击分成三类： 存储型 XSS 攻击特点：恶意代码已经落库，被拼接到HTML中返回。 攻击者通过论坛评论区提交恶意代码到数据库； 其他用户打开论坛，服务端把恶意代码取出来，拼接在HTML中返回； 恶意代码在用户的浏览器端运行； 除了论坛，这类攻击还常见于用户私信发送。 比如用户提交评论<script>alert('XSS');</script>到网站的数据库中。 <div> 评论内容：<%= getContent("comment") % ...

完整阅读本文大约需要5分钟。 开始阅读之前，先上一道面试题： CSRF攻击和XSS攻击之间，有什么联系？ 什么是CSRF攻击CSRF攻击即Cross-site request forgery，跨站请求伪造，直白来说就是恶意网站伪装成用户，向被害网站发起操作请求。 为了方便理解，做了一张图，攻击流程如下： 用户登录受害网站，浏览器把获取的身份凭证保存在本地cookie中； 用户被诱导打开黑客网站，黑客网站向受害网站服务器发起一个恶意请求，由于cookie的取用规则，这时浏览器会自动带上第一步中的身份凭证； 受害网站服务端对恶意请求校验，发现有身份凭证，恶意请求被成功受理； 如果黑客的操作是将用户的钱转到自己的账户，那么这时，他已经卷款跑路了。 如何发起CSRF攻击 诱导用户跳转到黑客网站，网站的HTML中有一个自动提交的隐藏表单，只要用户打开页面，就会发起转账请求； <form action="http://bank/transfer" method=POST> <input type="hidden" na ...

提到react fiber，大部分人都知道这是一个react新特性，看过一些网上的文章，大概能说出“纤程”“一种新的数据结构”“更新时调度机制”等关键词。 但如果被问： 有react fiber，为什么不需要 vue fiber呢； 之前递归遍历虚拟dom树被打断就得从头开始，为什么有了react fiber就能断点恢复呢； 本文将从两个框架的响应式设计为切入口讲清这两个问题，不涉及晦涩源码，不管有没有使用过react，阅读都不会有太大阻力。 什么是响应式无论你常用的是 react，还是 vue，“响应式更新”这个词肯定都不陌生。 响应式，直观来说就是视图会自动更新。如果一开始接触前端就直接上手框架，会觉得这是理所当然的，但在“响应式框架”出世之前，实现这一功能是很麻烦的。 下面我将做一个时间显示器，用原生 js、react、vue 分别实现： 原生js： 想让屏幕上内容变化，必须需要先找到dom（document.getElementById）,然后再修改dom（clockDom.innerText）。 <div id="root"> ...

2013年发布至今， Docker 一直广受瞩目，被认为可能会改变软件行业。 但是，许多人并不清楚 Docker 到底是什么，要解决什么问题，好处又在哪里？本文就来详细解释，帮助大家理解它，还带有简单易懂的实例，教你如何将它用于日常开发。 一、环境配置的难题软件开发最大的麻烦事之一，就是环境配置。用户计算机的环境都不相同，你怎么知道自家的软件，能在那些机器跑起来？ 用户必须保证两件事：操作系统的设置，各种库和组件的安装。只有它们都正确，软件才能运行。举例来说，安装一个 Python 应用，计算机必须有 Python 引擎，还必须有各种依赖，可能还要配置环境变量。 如果某些老旧的模块与当前环境不兼容，那就麻烦了。开发者常常会说：”它在我的机器可以跑了”（It works on my machine），言下之意就是，其他机器很可能跑不了。 环境配置如此麻烦，换一台机器，就要重来一次，旷日费时。很多人想到，能不能从根本上解决问题，软件可以带环境安装？也就是说，安装的时候，把原始环境一模一样地复制过来。 二、虚拟机虚拟机（virtual machine）就是带环境安装的一种解决方案。它可以在 ...

为什么要服务端渲染(ssr)至于为什么要服务端渲染，我相信大家都有所闻，而且每个人都能说出几点来。 首屏等待在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。 没考虑SEO的感受有些网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 还是很重要的，而 SPA 模式对搜索引擎不够友好，要想彻底解决这个问题只能采用服务端直出。改变不了别人（搜索yinqing），只能改变自己。 SSR + SPA 体验升级只实现 SSR 其实没啥意义，技术上没有任何发展和进步，否则 SPA 技术就不会出现。 但是单纯的 SPA又不够完美，所以最好的方案就是这两种体验和技术的结合，第一次访问页面是服务端渲染，基于第一次访问后续的交互就是 SPA 的效果和体验，还不影响SEO 效果，这就有点完美了。 单纯实现 ssr 很简单，毕竟这是传统技术，也不分语言，随便用 ...

背景浏览器的架构现代浏览器的架构都是多进程架构（multi-process architecture），它也是不断在不断的解决问题当中演化而来，而多进程架构优势明显，也就被不同的浏览器厂商采用。以Chrome为例： 浏览器进程（Browser Process）：控制浏览器这个应用的chrome（主框架）部分，包括地址栏、书签、前进/后退按钮等，同时也会处理浏览器不可见的高权限任务，如发送网络请求、访问文件。 渲染器进程（Renderer Process）：控制显示网站的选项卡内的任何内容；图中渲染进程有多层，表示Chrome为每个选项卡运行多个渲染器进程。 插件进程：控制网站使用的任何插件，例如 Flash。 GPU进程：在独立的进程中处理GPU任务。之所以放到独立的进程，是因为GPU要处理来自多个应用的请求，但要在同一个界面上绘制图形。 多进程架构优势 更强的健壮性在最简单的情况下，您可以想象每个选项卡都有自己的渲染器进程。假设您打开了 3 个选项卡，每个选项卡都由一个独立的渲染器进程运行。如果一个选项卡变得无响应，那么您可以关闭无响应的选项卡并继续前进，同时保持其他选项卡处于 ...

Hooks使用时存在所谓的「闭包陷阱」 function Chat() { const [text, setText] = useState(''); const onClick = useCallback(() => { sendMessage(text); }, []); return <SendButton onClick={onClick} />;} 我们期望点击后sendMessage能传递text的最新值。 然而实际上，==由于回调函数被useCallback缓存，形成闭包，所以点击的效果始终是sendMessage('')==。 这就是「闭包陷阱」。 以上代码的一种解决方式是「为useCallback增加依赖项」： const onClick = useCallback(() => { sendMessage(text);}, [text]); 但是这么做了后，==每当依赖项（text）变化，useCallback ...

Mybatis 学习mybatis时的上课笔记 1. 准备工作1.1 Sql建表语句create database `mybatis`;use `mybatis`;create table `user`(`id` int(20) not null primary key,`name` varchar(30) default null,`pwd` varchar(30) default null)engine=innodb default charset=utf8;insert into `user`(`id`,`name`,`pwd`) values(1,'狂神','123456'),(2,'张三','123456'),(3,'李四','123890')select * from `user`; 1.2 mapper.xml模板<?xml version="1.0" encoding="UTF8" ?><! ...

前言现代前端项目多为单页Web应用(SPA)，在单页Web应用中路由是其中的重要环节。 每个现代前端框架都有与之对应的路由实现，例如 vue-router、react-router 等。 本文并不涉及 vue-router、react-router 的实现方式，而是介绍前端路由的基本实现原理及实现方式。 vue-router、react-router 的源码解析，会在以后的文章中逐步推出。 什么是 SPASPA 是 single page web application 的简称，译为单页Web应用。 简单的说 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。 取而代之的是利用 JS 动态的变换 HTML 的内容，从而来模拟多个视图间跳转。 从传统页面到视图对于初学者来说，理解传统页面与 SPA 视图间的差异是困难的。 在这里，用两张图，来分别表明传统页面与 SPA 视图间的区别： 上图表明了，在传统的网站设计中，每个HTML文件都是一个完成的HTML页面，涵盖了完整的HTML结构。 上图表明了，在 SPA ...

前言随着主流JavaScript中函数式编程的迅速发展， 函数柯里化在许多应用程序中已经变得很普遍。 了解它们是什么，它们如何工作以及如何充分利用它们非常重要。 什么是柯里化（ curry）在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 举例来说，一个接收3个参数的普通函数，在进行柯里化后， 柯里化版本的函数接收一个参数并返回接收下一个参数的函数， 该函数返回一个接收第三个参数的函数。 最后一个函数在接收第三个参数后， 将之前接收到的三个参数应用于原普通函数中，并返回最终结果。 // 数学和计算科学中的柯里化：//一个接收三个参数的普通函数function sum(a,b,c) { console.log(a+b+c)}//用于将普通函数转化为柯里化版本的工具函数function curry(fn) { //...内部实现省略，返回一个新函数}//获取一个柯里化后的函数let _sum = curry(sum);//返回一个接收第二个参数的函数let A = _sum(1);//返回一个 ...