FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
- ``标签的download属性 - ``的accept属性 - ``的onerror属性 - ``的tabindex属性 - ``的async属性和defer属性 - ``的preload属性 - ``的fetchpriority属性
### XSS（跨站脚本攻击 Cross Site Scripting） #### 攻击 - 分类：存储型、反射型、DOM型 - DOM API注入：innerHTML（v-html），outerHTML，document.write()， - js API注入： 内联监听器，eval()，setTimeout，setInterval #### 防范 - 输入过滤并且转义 - XSS攻击字符串，XSS漏洞检测工具 - 避免原生API使用模板引擎，避免内联事件，避免拼接HTML - 包含敏感数据的cookie通过服务端做写入，httpOnly；event isTrusted属性 - 验证码（手机端是一个沙盒，很难进行窃取）、图形验证、手势验证、人脸识别等等 ###...
经历过几次面试后，才深知精通css对于前端开发的重要性，这个issue将集中针对css展开进攻，提升自己的薄弱的css基础。 - ex是什么？ - ch是什么？ - resolution是什么？ - 不要用!important - 子元素浮动导致父元素塌陷怎么处理？ - ::placeholder是什么意思？ - :fullscreen是什么意思？ - 说一下position的区别 - 内容两行展示，多余文字显示省略号 - Edge浏览器不生效word-break: break-word; - @charset是什么？ - 继承属性(inheritable properties)和非继承属性(non-inherited properties) - word-break的break-all和break-word的区别是什么...
看经验比我丰富的老哥的代码，惊觉自己对cookie的掌握程度，还是小学生的水平，所以开这个issue补充一下cookie知识点，以后在开发过程中总结到的好的实践也会记录在这里。 参考资料：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie - cookie基础概念 - cookie使用实践 - 浏览器如何精确清除cookie - 常见应用场景 - cookie是当前tab有效的还是所以tab有效的？ - 服务端如何既对token做处理又对cookie做处理？ - cookie与前端安全
 关于强缓存和协商缓存的理论知识和express.js下的实践，政采云前端团队的这篇文章已经非常详尽了：[图解 HTTP 缓存](https://juejin.im/post/5eb7f811f265da7bbc7cc5bd) ### 什么是强缓存 - 不需要发送请求到服务端，直接读取浏览器本地缓存 - 强缓存分为Disk Cache和Memory Cache，由浏览器决定存放 - 强缓存通过Expires、Cache-Control和Pragma 3个头决定 ### 什么是协商缓存 - 强缓存失效并且请求头中设置了If-Modified-Since或者If-None-Match时触发 - 协商缓存是通过带着上面2个请求头到服务器验证是否命中协商缓存，若命中返回304，加载浏览器缓存，并且响应头设置Last-Modified和ETag ### 二者区别 协商缓存可以说是一种通过访问服务器去判断是否走浏览器本地缓存的方式，在服务器资源更新时，可以使得浏览器获取到最新的资源；而强缓存是不叫简单粗暴的，直接根据过期时间进行判定 ### 强缓存和协商缓存流程图  图来自[图解 HTTP 缓存](https://juejin.im/post/5eb7f811f265da7bbc7cc5bd)...
- compilation.hooks.processAssets - compiler还有什么hooks - compilation还有什么hooks - webpack中的module，chunk，bundle有什么区别 ### compilation.hooks.processAssets 这个compilation的钩子可以处理静态产物。 ```js compilation.hooks.processAssets.tap( { name: 'MyPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, // 阶段 }, (assets) => { // 产物对象，key为asset路径，value为asset数据 } ); ``` PROCESS_ASSETS_STAGE_SUMMARIZE：总结现有资产表阶段。...
demo repo: https://github.com/FrankKai/npm-bundle-demo - tsc - rollup - webpack - esbuild
- 问题场景 - npm包改造前，仅支持esm - npm包改造后，既支持esm，又支持cjs - 为什么改造后，还是会报错？ - 如何理解ts编译配置esModuleInterop？ - 其它npm包中类似__importDefault的函数 - 有哪些包是要开启esModuleInterop后，在esm环境中引入的？ - 总结 ### 问题场景 遇到一个很有趣的场景，cjs中需要引入原先打包方式为esm方式的模块。 也就是想要通过require()，去引入一个export的模块。 my-npm-package包的暴露方式为： ```js import foo from "./foo"; import bar from './bar';...
原文： https://webpack.js.org/contribute/writing-a-plugin/ demo: https://github.com/FrankKai/webpack-plugin-demo - 什么是插件 - 新建一个插件 - 插件的基础架构 - compiler和compilation - 异步事件hook - tapAsync - 示例 ### 什么是插件 插件是webpack引擎开放给第三方开发者的一种潜力机制。使用分阶段构建callback，开发者可以引进自己的行为到webpack构建进程。比起构建loader，构建插件更加高级一些，因为你需要理解一些webpack底层内部的hook。做好看源码的准备！ ### 新建一个插件 一个webpack插件，由以下这些内容组成： - 一个具名js函数或者js类 - 在原型链上定义一个apply方法 - 声明接入的事件hook...