一、前言由于浏览器同源策略，限制了页面无法引用第三方资源，无法请求不同源下面的资源，影响了web的发展，所以浏览器出让了一些安全策略来满足web的发展。通过CSP安全策略来保证浏览器可以安全的加载第三方资源；通过CORS允许浏览器跨域请求；通过PostMessa...
一、什么是CSRF攻击我们常常听到这样一句话：默认的链接不要点，那些年也听过，邮箱中的垃圾链接不要点。 因为可能是黑客发起的CSRF攻击，所以在点击之前最好是确认链接的安全性。CSRF（Cross-site requests forgery）中文名：跨站脚本伪造简单的理解就是，黑...
一、前言我们常常见到很多比较棒的开源项目，但在本地安装运行的话就会很复杂，要配置不同的环境，安装不同的依赖，好一点的会用docker直接拉取，或者打包好。这些无疑都会增加初学者上手的成本，所以这篇文章总结了下目前比较常用的解决方法之一：使用docker...
一、前言今天开发的时候，发现一个页面的表单其实是两个部分，其中一部分还在另一个页面引用了。这就增加代码量，所以优化下，为了重复使用这里的表单。如图，需求就是将下面两个表单拆开，可以重复使用，实际两部分可能有很多表单，这里方便起见，只写了三个...
一、前言通过CRA脚手架构建的项目，一般webpack配置是隐藏的，如果要修改，就要另外处理。想要修改webpack通常有两种方式通过插件去增加或覆盖webpack配置（方法一、方法二）或者释放项目中的webpack配置，使之可见，然后可以修改（方法三）本来CRA脚手架将we...
一、前言昨天一个朋友问：我的工作只有vue、react，了解其他的好像没有太大作用。其实不然，前端要考虑的内容其实很多，不光是完成业务代码。我司的一个控制台前端维护人数在20+，如果每个人都在一个项目中开发，那么每天就等着构建了，不仅容易出错，而且浪...
一、网站加载概述面试过程中，常常遇到这样一道面试题，输入URL到页面加载完毕，浏览器做了哪些工作？首先输入一个URL，你会看到浏览器上面的标签页出现了一个loading图标，开始时是逆时针旋转，接着顺时针旋转，当前页面消失，显示我们常说的空白页面，接着...
一、前言该过程中用到的技术栈git gitlab shell需要提前准备的内容一个项目myweb本机安装Git一个Gitlab仓库docker私有仓库gitlab runner(Gitlab-runner)公司的代码一般都保存在私有化部署的Gitlab，要使用Gitlab的CI/CD，需要Gitlab版本>8.0.0CI/CD虽然不难，...
一、什么是CI/CDCI 持续集成CD 持续交付CI/CD就是在开发阶段，通过自动化发布，来频繁部署应用的一种方式二、为什么要配置CI/CD想象一下，一个项目的发布如果手动部署，需要的操作有：单元测试打包文件上传服务器等等如果每个过程都需要手动执行，每次都要保...
前言前端部署服务器，需要经过打包、迁移、部署、回退操作，如果每次都手动处理，那么容易出错还浪费时间，自动化部署又比较复杂，那么选择shell脚本做自动化，也是一个不错的选择，具体实现如下：项目环境执行自动化构建的前端项目myweb项目通过命令构建测试...
一、前言保持线上项目稳定运行是很重要的，为了达到服务可用性在99.9%，也为了减少开发人员在项目部署时耗费大量精力，可以尝试自动化发布自动化部署涉及到的配置比较多，每个环节需要掌握的知识也不同，所以分开写该过程中用到的技术栈webpack docker nginx ...
一、项目背景前端项目开发一个模块，上线前需要灰度一部分用户，实现一个临时的灰度方案。现有项目状况：一个前端项目1.0.0版本后端服务1.0.0版本后端灰度服务2.0.0版本一个域名解析到前端服务80、443端口前端通过nginx转发静态文件1、实现原理1、打包一份前...
背景：在开发移动端内部应用的时候，涉及安全问题，我们经常在企业微信或者图片上看到水印，防止信息被泄露，针对这次开发做个复盘，记录下。效果图如下： 一、实现原理1、首先用canvas绘制水印2、创建蒙层div，可以覆盖在页面上，并设置pointer-events:none...
背景：在开发移动端内部应用的时候，涉及安全问题，我们经常在企业微信或者图片上看到水印，防止信息被泄露，针对这次开发做个复盘，记录下。效果图如下： 一、实现原理1、首先用canvas绘制水印2、创建蒙层div，可以覆盖在页面上，并设置pointer-events:none...
现象：在前端开发中，发现项目中很多路径引入都是相对路径，出现很多类似importapifrom"../../../api/test"import*asapifrom"../../../api"复制代码这样会导致文件引用的时候，需要计算层级，拖...
认证
