抉择
最近看了《抉择》,虽说本身是一本企业管理的书,但是对人自身也是特别有指导意义的…
由于某些客户现场以及我们公司自身的要求,产品上线之前都会有一轮的安全扫描,用AppScan等这类工具扫一扫,最近就处理了几个安全扫描的问题,虽说处理的比较原始但是还是需要记录一下,你晓得哇,因为比较折磨人。
什么交XSS、SQL注入网上一大堆我就不出丑了哈,要解决这块问题那就先得搞清楚AppScan这类软件的工作原理。
AppScan 工作原理小结如下:
所以由此看出处理XSS、SQL注入等问题只能在第二个和第三个环节出手。
处理这类问题我所知道的通常就3种姿势:
拦截
触发了这类校验直接拦截掉并提示不让其做任何操作,简单粗暴但是不人性化。经常让人很懵逼。
替换
把可触发这类校验的关键字全部替换为其它字符或者转换为字符串等。这种容易破坏原有的表达。
加密
这是种欺骗扫描软件的方式,直接前后端约定加密方式,对所有的输入进行统一加密,后端再统一解密,这样扫描软件识别不了任何关键字。我同事就这样干过,虽然说性能上会有一点问题但是好在不用动任何代码。嗯,这种只能说骚操作。
最后和架构师定的方式是通过filter+正则这种最原始最简单的方式来做,我们这是toB的运维系统所以让大家失望了没上高大上的安全策略。
需要先搞清楚为什么需要处理输入流,因为 reqeust.getInputStream 方法只能读取一次。我们可以大概捋一下是咋回事。
我们需要输入流所以需要调用reqest.getInputStream(),getInputStream返回值为ServletInputStream,所以我们先看看ServletInputStream。
1 | public abstract class ServletInputStream extends InputStream { |
然后知道是继承自InputStream,所以我们先看InputStream,注意read和reset方法。
read方法告诉我们会从输入流一直读取下一个字节、如果以达到末尾侧返回-1。
reset告诉我们可以重置读取的位置。
1 | public abstract class InputStream implements Closeable { |
所以从上面可以得知ServletInputStream是没有重写r关键的reset方法,所以行为是与InputStream保持一致的即输入流读取一遍之后就没了后续就一直返回-1。
所以解决办法就是找到重写reset的方法的类,即就找到我们常用的ByteArrayInputStream也是继承自InputStream,但是其重写了reset等方法。
我们看下源码:
注意read里面的pos变量,它是标识现在读取的流的位置,所以如果我们想多次读取输入流,需要调用上面说的reset方法重置pos为0。
1 | public |
这些搞清楚之后就是看怎么能在到咱们的filter的时候得到的request是可以读取多次同时又不影响其它地方的读取(比如controller),刚好severlet.api提供了一个叫HttpServletRequestWrapper的东西,刚好提供一种包装(专业名词:装饰器模式)的手法让我们可以包装request请求对象使其可扩展其它能力。包装高富帅哪里都吃得开。
1 | /** |
OK,到这儿输入流总算搞定了,nice,然后开始Filter上场了。
1 |
|
1 | /** |
1 |
|
1 |
|
因为我们用了graphql,有些地方还用了dsl,所以正则是魔鬼,我写崩溃了差点,当然如果有更好的方法请告诉我,万分感谢。
长出一口气…..
本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。
近段时间刚好,做的分享和听的分享较多。刚好缘分就是那么奇妙,在一个网课平台刚好看到了这个网课《如何提高Presentation的展现能力》,在此做个记录。
图1所阐述的观点,是我个人觉得做得最契合的。确实我一直认为,Presentation别弄太多文字类或者花哨的东西,PPT应该是辅助我们说明白一个事情,所以主次需要分清。
图2所说几个点
底稿我觉得如果是很正式或者很重要的Presentation是个很好的减少风险的点。
另外关于互动,这点是很重要的,不管是眼神还是肢体还是语言,他能让讲解人和听众建立联系,如果没有互动,那就感觉像是下命令了,你们只管听我只管讲,不能有异议这样的场景特别糟糕。
时间管理特别重要,我特别厌烦那种拖沓的,慢条斯理的Presentation,让氛围很疲惫,这种效果很差,这点我也需要改进,虽然我很注意时间控制,但是也没有做到掐表的程度,但是我认为有些情况是可以掐表,比如做分享。
图3是我最没有底气的点,Presentation事后的修正和反思做得比较少,特别是修正,要想整个Presentation比较有质量,确实这块是不可或缺的,尽量不因此留下遗憾。
Presentation:我觉得可解释为:具有分享、议题、同步等性质的会议。
图片摘自:
嗯,跟前端暧昧的时间还是挺长了,是时候展现真正的技术了。
常在写代码哪有不bug的道理,那对于前端朋友来讲chrome的工具栏基本上能满足大多数场景下的bug排查,对于奉行假如你暂时不够牛逼,那就善用工具的我来说,我心荡漾啊。必须记录一下,当然chrome提供的工具太多了,今天暂且主要聊聊Sources,也是我使用频率Top 2,结合一些网上的一些说明加自身的实践来说一说。
不用再于数字不好看这些细节,我们走的是放荡不羁的路线,咱们挨个说啊。
数字 | 表头 |
---|---|
1 | 点击该箭头,移动鼠标到页面上定位到页面元素,跳转到Elements 工具栏。 |
2 | 用于模拟移动设备上的效果。 |
3 | 必用的模块,已加载的全部资源,以域名划分文件夹,调试时从这儿下手找源码,当然我通常直接快捷键Ctrl+P定位文件。 |
4、5 | Filesystem & Overrides 可以加载本地文件夹,把Chrome当成IDE用。 |
6 | Content scripts 扩展工具的脚本,比如百度翻译插件等 |
7 | Snippets 代码片段,不会因为刷新丢失,使用:添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove) |
8 | 源码面板,在此处进行打断点、修改端点等操作 |
9 | 调试的快捷键面板 |
10 | 变量监察:添加个变量后会一直监察这个变量的值,当前作用域无值时显示< not availble > |
11 | Call Stack 函数调用栈,会列出断点的调用堆栈列表。 |
12 | Scope 断点所在作用域列表,级别划分如下:
|
13 | Breakpoints 源码的断点列表。 |
14 | XHR/fetch Breakpoints 请求断点:ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈,很方便追踪。 |
15 | DOM Breakpoints 这里列出html的断点。 |
16 | Global Listeners 全局监听器:指的是绑定在 window 对象上的事件。 |
17 | Event Listeners Breakpoints 所有事件的断点:勾选指定类型,比如Mouse/click,则所有的click事件都会被断住。 |
markdown搞出这个表格太费劲,anyway看着舒服就好,下面聊聊对应上面表格中的一些具体的使用场景。
Overrides 覆盖网络请求的资源,即html、js、css、图片等资源,注意一定是同域名同路径同名的文件才能产生覆盖效果。勾选,Enable Local Overrides,修改文件后ctrl+s保存,修改的是Save as Overrides到本地的文件,刷新可看到效果。
Snippets,也是我使用比较多的功能,以前不知道的时候都是找网上现场的js编辑器,但是受网络和维护的影响,有些时候不好用,而且很多还要区分ES5、ES6,自从有了Snippets,随便写各种代码片段超级好用。 但是要注意变量的作用域问题,所以最好用IIFE方式写代码,避免出现错误。
Blackbox Script,黑盒脚本,很多时候是要引用第三方库或框架的,当我们调试时,调试的对象应该是我们自己写的代码,但很多时候,我们经常在焦灼地进行下一步下一步时,突然代码跳到了第三方库或框架的源码上去,多数情况下我们不会关注这些地方的内容,但是它就要跳过去,这种是比较蛋疼的。黑盒脚本就是用来解决这个问题的,它能够把一个脚本文件标记为 “Blackbox Script”,那么我们就永远不可能进入这个文件内部,这个文件对我们来讲就是一个黑盒子。为什么要强调“永远”呢?因为不仅普通的断点不能访问这个被标记了的脚本,其他的,比如说 DOM 断点、事件断点等等都无法访问那个脚本文件内部。
调试面板:Pause on exceptions,在发生异常的地方停顿
点击1处,将打开一个内联输入框,您可以在输入框中输入要监视的变量名称。输入完毕,按Enter键,即可将其添加到列表中。监视器将显示添加时变量的当前值。如果变量未设置或找不到,值将显示为
点击2手动刷新变量。注:监视列表不是变量的实时视图,除非逐步执行。当使用断点逐步执行时,监视列表中的值将自动更新
点击3,删除变量。
代码暂停时,可以在Call Stack窗口查看当前的调用栈。展示了代码到暂停处的完整执行路径,这让我们能够深入代码去找出导致错误的原因。最后调用函数在最顶上,所以最好别用匿名函数,不利于调用栈查看。
作用域:显示断点所在的作用域,级别划分如下:
Local 当前作用域 展开作用域下的变量
Closure (x) 闭包作用域,x是函数名称
Script 标签作用域
Global 全局作用域Window
当改变一个节点或者其子元素时,可以设置一个DOM断点:
点击Elements面板
找到想要设置断点的元素
在此元素上右键
Break on –> Subtree modifications / Attribute modifications / Node removal
Subtree modifications(子树修改):当前选中的元素,删除、增加其子代或者改变其子代的内容。修改子元素的属性或者当前选中元素有任何改变都不会触发此类型断点
Attributes modifications(属性修改):当前选中的元素,增加、删除其属性,或者修改某个属性值
Node Removal(节点移除):移除当前选中的元素
当XHR的请求URL包含某一特定的字符串时,可以暂停调试代码。DevTools会在XHR调用send()那行代码的地方暂停。
这个断点类型也算是比较常用的一个了,特别是当我们调试别人的代码时,触发某个事件,想找到对应的代码。事件类型可以是很具体的,比如click事件,也可以是某一类别的事件,比如“鼠标事件”。
PS:
感谢:
本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。
今天看到一篇文章,是以我媳妇儿的男神马云老师为引得文章。
所有为了能更完美的适配我媳妇儿的诉求,当然我就毫不犹豫的要点进去的看看。
我心甚慰啊,是这两天引发我思考最多的文章,特此记录一下。
文章指出底层系统定义:那些驱动你的核心动力。
体现在两个方面:大局观和是非观。
是非观决定你能走多久。什么事能做什么事不能做,自己心里衡量。有界限。
大局观决定你能走多远。你想进步你的格局就要大于你的现状。
所以前者指引方向,后者决定边界。
所以当你想做什么的时候,先自省一下,自己的底层系统,看有没有bug。
其中大局观是我感慨最多也是我认为自己最需要严肃对待的。
虽然我这两年都在有意识的往这方面努力,但是还远远不够。
我认为的大局观,首先需要对抗的就是,老守着自己的一亩三分地,事不关己高高挂起,满足于现状的状态(这也是我在正在经历的阶段),需要跳脱出来,换角度,纵向、横向的看自己看周围看世界。
说起来有点虚,我一开始看别人动不动用跳脱、升华、灵魂这类词语我就特别不屑,总觉得的是吹牛x。但是亲测真的有效,很多时候做某件事的时候我就强迫自己,重新审视一下要做的事。
那怎么才能重新审视呢,那就涉及到要需要换角色换角度了,那怎么才能换角色换角度呢,这个时候就会突然在头脑中会出现,自己扮演产品经理、研发总监(公司副总)、总经理的角色,另外还会出现一个专门发出质疑的“自己”。这时候你就会萌发很多很多想法,这时候你会发现你考虑事项的方式以及处理事项的方式往往会和你一开始你想的有出入(当然这里肯定有一个边界,那就是你得从你的现状出发),这种出入不见得一定优于之前的想法,但是它肯定会带来附加效果,这种附加效果有可能会来的快也可能来得晚,有可能好有可能坏,但是正因为这样我们才能不断修正自己,我想这种修正应该会让我向大局观进一步。
最近在看一本书《系统之美》,看起来有些艰涩,但是真的很受用,我觉得其中有句话就很符合我对大局观的理解
重塑系统,发现更大的世界
对于怎么才叫有大局观,我其实也没摸到精确的定义,但是这不妨碍我想得到她。人神奇的地方不就是能不断的折腾吗。能捏碎也能重塑。
我觉得作为程序员,别顽固(坚守哪个语言第一、接受不了改变…)、别看谁都不顺眼(你看那说话的SB、你看那写代码的SB、你看那群里发图的SB….)、别老想着对抗(产品、ucd、测试、运维….,感觉他么的一个公司全是你的敌人),我们应该多想想如果我保持现状到底跟自己的职业生涯、跟同事、跟领导、跟公司能带来什么。
我们是不是得抽时间找找自己?
本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。
由于尽量不想让自己在编码路上留下的足迹会让后人觉得像屎一样…年初到现在断断续续的都在想办法提升个人的工程能力
关于Lint最早是前两年写了一段时间的nodejs,然后知道了一个叫ESLint的玩意…这东西好用啊,让代码可以不太像屎一样了所以最近就捡起来了,当然工具是辅助最重要的还是基础。
伴随着格言 do not BB,show me code。刚好同事让我帮忙跟他弄一下ESLint,那我想着干脆整个文档,那不就简单了,大家都能用。
以下就是跟我们项目贴合度比较高的ESLint简单的配置教程出来(为博客凑个数,话说确实太懒了文章写的少),然后有时间再分析其原理的东西。
npm install -g eslint
// 用了 React 需要再安一个babel-eslint
npm install -D eslint babel-eslint
//如果要用大厂的需安装对应的库,比如用airbnb的
npm install -D eslint-config-airbnb
// 因为要校验 Reac 语法,所以这里需要下载一个 React 语法规则的包
npm install -D eslint-plugin-react
可能不全,但是总之一句话,别想太多提示差什么包就装什么包就对了。
node_modules/.bin/eslint --init
//如果全局安装了 可以直接
eslint --init
会出现一个界面,根据模板创建ESLint的配置文件,最终填完之后大概就是下面这样
演示一把:
选一种方式生成配置文件,可根据需求选择,建议第一个问题选第二种Use a popular style guide(使用大厂的),然后选一个,通常用airbnb的. 跟着界面依次填写下面的内容,最终会在你根目录下生成一个文件名为.eslintrc.js的配置文件 。
根据模板创建配置文件,可以选个模板,也可以自己回答问题
PS E:\eslint> eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
Standard (https://github.com/standard/standard)
Google (https://github.com/google/eslint-config-google)
比如选airbnb
module.exports = {
"extends": "airbnb"
};
也可以自己回答问题来创建
> eslint --init
? How would you like to configure ESLint? Answer questions about your style
// 是否校验 Es6 语法
? Are you using ECMAScript 6 features? Yes
// 是否校验 Es6 模块语法
? Are you using ES6 modules? Yes
// 代码运行环境,Browser 指浏览器
? Where will your code run? Browser
// 是否校验 CommonJs 语法
? Do you use CommonJS? Yes
// 是否校验 JSX 语法
? Do you use JSX? Yes
// 是否校验 React 语法
? Do you use React? Yes
// 首行空白选择 Tab 键还是 Space
? What style of indentation do you use? Tabs
// 字符串使用单引号 'string' 还是双引号 "string"
? What quotes do you use for strings? Double
// 操作系统
? What line endings do you use? Windows
// 每行代码结尾是否校验加分号 ;
? Do you require semicolons? Yes
// 以 .js 格式生成配置文件
? What format do you want your config file to be in? JavaScript
PS:也可以直接在根目录下手动建一个文件.eslintrc.js(后缀也可以是JSON、YAML等),然后手动写配置
贴一个我的(手动写的)
如果只用于JS语法类扫描,可参考但不建议直接使用,因为配置的东西有点多
module.exports = {
"extends": ["airbnb", "prettier","prettier/react"],
"parser": "babel-eslint",
//如果我们想对一些非标准 JS 语法添加 Lint 怎么办呢?有办法,ESLint 还支持我们自定义 parser。 parser是为了非标准语法能生的,plugin是针对符合js语法的规则集合的扩展。
"plugins": [
"prettier",
"react",
"jsx-a11y",
"import"],
//自定义规则,可以覆盖掉extends的配置。
"rules": {
"jsx-a11y/click-events-have-key-events":0,
"jsx-a11y/interactive-supports-focus":0,
"jsx-a11y/no-static-element-interactions ":0,
// 'one-var':2,//"error" 或 2 开启规则,使用错误级别的错误
// 强制驼峰命名规则
"camelcase": [0, {
"properties": "never"
}],
"prettier/prettier": ["error"],
"react/prop-types": ["warn"],
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-unused-vars": 1,//"warn" 或 1 - 开启规则,使用警告级别的错误
"global-require": 0,//"off" 或 0 - 关闭规则
"prefer-destructuring": 0,
"class-methods-use-this": 0,
"react/no-unused-state": 1,
"jsx-a11y/no-static-element-interactions":0,
"import/extensions":0
},
"env":{
//定义env会带进来一些全局变量,browser会添加所有的浏览器变量比如Windows
"browser": true,
"es6": true
},
//当我们将默认的解析器从Espree改为babel-eslint的时候,我们需要指定parseOptions,这个是必须的。parserOptions ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下,ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置,以启用对 ECMAScript 其它版本和 JSX 的支持。
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true// 启用 JSX
},
"ecmaVersion": 6
},
};`
VSCode配置需自行上网搜索
启用ESLint插件
配置触发ESLint自动修复的快捷键
ESLint的使用方法
本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。
这玩意能比较通透的了解自己有几斤几两。
最终的表现就是,同样的起点,同样的终点,迷茫的人会走很多很多弯路。
找到人生目标
拆解人生目标
选择职业目标
梳理职业路径
制定发展计划
总结:工具包
延伸问题
可能的解法
本文引用的内容,如有侵权请联系我删除,给您带来的不便我很抱歉。