java 前端页面传过来的值怎么防止篡改_杂谈!了解一些额外知识,让你的前端开发锦上添花...
1.前言
在前端学习里面,很多人都是注重学习代码(html,css,js)。或者是一些框架,库(jquery,vue,react),或者是各种工具(webpack,gulp)。在以往的文章里面,或者自己和别人交谈,都有建议过别人多练,不要闷头就写代码,多深入了解当中的原理,学习其中的思想。但是除了代码方面的知识之外,还有哪一些是作为一个前端,应该扩展学习的呢?下面简单罗列和整理了一下最近学习的资源。如果大家还有其它的推荐,欢迎在评论区留言。
下面的知识,可能不需要太过于深入,详细的掌握,但是必须要有所了解,这样在开发上遇到问题,解决问题的时候即使不是如虎添翼,也是锦上添花。
2.http,https
前端而言,不可避免的要和接口打交道。除了和后台对接口,请求数据,渲染页面,之外。对http的请求,也是要有一个了解,比如http协议,请求方式,请求过程,结果状态码等。了解这些,对开发的时候可能遇到的问题,就可以大概知道问题是怎么产生的,更快的知道怎么解决,避免。
2-1.请求
首先一个请求,包含有请求头,请求行,请求正文。具体是怎样境,看下面的代码
如上所述
method和url就是这个请求的请求行(这里是请求行部分信息,其实请求行还包括http协议的版本等信息)。headers中的属性就是请求头,里面的属性,全部包含在请求的header里面,是服务端获取客户端版本,缓存等信息的一个途径。data对应的就是请求正文,也就是平常所说的参数。
2-2.响应
在请求发出去,并且响应已经回来的时候,就时候信息可分为响应行,响应头,响应正文。
响应行
引用看云的一个请求作为实例,如下代码就是这个请求的响应行,返回请求的http协议及版本,状态码,请求状态等描述信息。
响应头
响应头和请求头格式一致,返回版本,缓存等信息。
响应正文
平常接触最多的就是响应正文,也就是日常开发需要用到的数据。开发者拿到这些数据之后,再进行相应的处理。
2-3.关于https
关于 https 。下面可以先了解下 http 的缺点,https就是http基础上做的加密处理。
1.通信使用明文不加密,内容可能被窃听 2.不验证通信方身份,可能遭到伪装 3.无法验证报文完整性,可能被篡改
3.响应状态码
上面提到响应状态码,在这里也简单写下。在前端方面,请求接口可能会接触到各种情况,常见的有下面几个,应该怎么解决,就是具体问题,具体分析。
4.前端方面的安全性
4-1.XSS
XSS(Cross Site Scripting)是跨站脚本攻击,为了区分CSS,所以缩写为XSS。XSS攻击方式是往Web页面插入恶意的 JavaScript 代码,当用户浏览网页的时候,插入的代码就是被执行,从而达到攻击的目的。
其中应用比较多的一个就是,在网页一些公用的交互区域。比如搜索的文本框,除了可以输入一些关键字,还可以输入一些 JavaScript 代码,一旦代码点击搜索,代码就会被执行,达到攻击的目的。如下例子
在文本框中输入以上代码,然后点击提交,就会把用户的cookie弹出来。
XSS防范
1.将重要的cookies标记为HTTP ONLY,让JavaScript代码无法调用,只有http能调用。或者将重要的信息保存在session里面。
2.只允许用户输入我们期望的数据。如消费金额框只能输入数字和小数点。
3.对数据进行加密处理。
4.过滤或者移除特殊的HTML标签,过滤JavaScript代码等。
4-2.CSRF
CSRF(Cross-site request forgery)是跨站请求伪造。XSS利用站点内的信任用户,与XSS不同,CSRF是通过伪装来自受信任用户,在受信任的网站进行请求,盗取信息。其实就是攻击者盗用了受害者的身份,以受害者的名义向网站发送恶意请求。
CSRF攻击的思想
引用CSRF攻击原理及防御的一张图进行解释。
图片来自:CSRF攻击原理及防御
根据步骤,看了图,相信不难理解,就是在一个网站里面保留了cookie,然后访问了一些危险网站,然后被危险网站盗用了用户信息。
CSRF的防御
1.在表单里增加Hash值,以认证这确实是用户发送的请求,然后在服务器端进行Hash值验证。
2.验证码:每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。
3.修改,增加重要信息,比如密码,个人信息的操作,尽量使用post。避免使用get把信息暴露在url上面。
4-3.反爬虫
和之前的防护XSS和CSRF攻击目的不一样,反爬虫是为了防止网站重要的数据被别人拿走,比如电商的交易额,电影网站的票房统计,音乐网站的评论等。
5.渲染过程,原理
1.浏览器通过DNS对URL进行解析,找出对应的IP地址;
2.向IP地址发起网络请求,进行http协议会话:客户端发送报头(请求报头),服务端回馈报头(响应报头)
3.服务器根据请求,交给后台处理,处理完成后返回文件数据,浏览器接收文件数据(HTML、JS、CSS、图象等);返回一个页面(根据页面上的外链的URL重新发送请求获取)
4.浏览器接收文件完毕,对加载到的资源进行语法解析,以及相应的内部数据结构(网页渲染)
6.跨域
跨域这方面,平常接触的不多,我们这边遇到也是让后台允许跨域(跨域资源共享),但是这个跨域,也是一个绕不开的话题,受限于篇幅,下面简单进行讲解。
6-1.情形分析
6-2.解决方案
网上的针对跨域的解决方案有很多,大家参考着看就好。虽然罗列这么多,但是我只用过两种。
1、 jsonp
2、 document.domain + iframe
3、 location.hash + iframe
4、 window.name + iframe
5、 postMessage
6、 跨域资源共享(CORS)
7、 nginx代理
8、 nodejs中间件代理
9、 WebSocket协议
7.性能优化
这里只讲个大概,具体操作得靠自己自行问搜索引擎。
7-1.首屏优化
按需加载,非首屏图片使用预加载或懒加载,DNS,压缩代码,合并图片,减少请求等。
7-2.算法优化
减少沉余的代码,控制循环的次数,避免巨大函数等。
8.SEO
作为前端开发者,在SEO方面接触得应该不少。前端方面,注意SEO的点也不少。下面简单写下,在我开发的项目里面,也有几个项目是需要做SEO的,个人的建议如下几点:
8-1.meta标签
可定义关键词、网站描述
8-2.语义化html标签
一方面是,利用html标签,达到语义化的目的,比如列表使用ul,ol。表格使用table等,不建议什么元素都使用div。
另一方面是尽可能使用html5提供的具有语义化的标签。
以前写法
建议写法
8-3.html嵌套级别不宜过多
这一点就是尽量使html做到扁平化,避免嵌套过多,但是这点相对而言,难度比较大。
8-4.img标签四大属性不能省
alt属性是为了让图片因网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况,未成功显示时候,仍可以显示文本,让用户可大概知道这张图片大概是什么。
width和height是为了防止因为图片无法显示,造成页面重新渲染,或者布局错乱。
8-5.h1-h6标签的使用
1.一个页面建议只出现一个h1标签,而且一般是放在网页log上面使用。
2.h2标签一般用于详情页的主标题。详情页没有logo,标题使用h1。如有副标题,使用h3。
3.h1-h6标签自带权重,如果只为了设置字体大小,或者区分样式,不适合使用h1-h6。
8-6.其它方面
关于SEO的其他方式,在网上看到有这样的方法,但是我自己在开发上面没尝试过这样做,这里就简单罗列下,大家参考下。
避免 iframe 标签
重要内容谨慎使用 display:none;
a标签尽量添加title属性
利用布局,把重要内容HTML代码放在最前
使用”rel=nofollow”属性,集中网站权重
最近一段时间很流行前后分离,以及单页应用。但关于前后分离和单页应用这个怎么做SEO现在不清楚(目前我了解的是没法做)。我们现在的做法就是需要做SEO的项目,前端只负责切图,然后后台铺数据,服务端渲染,不是前端渲染。
9.堆、栈?
栈(stack)会自动分配内存空间,会自动释放。堆(heap)动态分配的内存,大小不定也不会自动释放。
基本类型:Undefined、Null、Boolean、Number 和 String,这5中基本数据类型可以直接访问,他们是按照值进行分配的,存放在栈(stack)内存中的简单数据段,数据大小确定,内存空间大小可以分配。
如下例子
如果修改了b
虽然b一开始是通过a赋值,但是a和b是独立的储存在栈内存里面,修改其中一个,不会对另一个有任何影响。
引用类型:即存放在堆(heap)内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置。
如下例子
如果修改了b
b通过a赋值,a和b就共用了一个堆内存,修改了a或者b,都直接修改了堆内存的值,就会对另一个产生影响。
10.响应式和自适应
关于这两个的概念,现在没怎么听说了。可能是因为现在主流的就是PC和手机是分开两个项目的原因,也可能是因为这两个概念更应该是设计图的工作。上一次和别人谈论这个问题,还是在一年前,那个时候我还是切图仔。
但是关于这两个概念的区别,大家知道一下就好,下面看两张图片估计就差不多懂了。
图片来自:响应式和自适应有什么区别?(这篇文章估计也是抄袭的,但是由于图片我也找不到出处了,就声明这个了)
简单来说:
自适应:一个网页,根据屏幕宽度的改变而改变。代码只有一套。在个别的屏幕上,排版这个比较丑,但是设计,开发成本低。
响应式:一个网页,根据屏幕的宽度的改变而展示不同的效果,代码基本是两套以上。在所有屏幕上都展示很好的效果,但是设计,开发成本高。
自适应实例:携程
响应式实例:segmentfault
11.小结
之所以要发这么一片,总结这一些概念,是因为我和别人交谈的时候,遇到这些总是有一个是是而非的概念。所以最近就抽空看了下这些概念,也和大家分享下这一些知识。这些概念知识,可能只是了解一下,大概知道就好,有些可能要深入了解下,这个就看个人所需了。最后,如果大家还有什么要推荐的概念知识是比较重要,需要了解的,欢迎在评论区留言。另外自己是从事了五年的前端工程师,整理了一份2019最全面前端学习资料,需要的伙伴可以私信“前端”获取领取地址,对于学习web前端有任何问题(学习方法,学习效率,如何就业)都可以问我。
java 前端页面传过来的值怎么防止篡改_杂谈!了解一些额外知识,让你的前端开发锦上添花...相关推荐
- java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题,想不拿到offer都难!...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
- java 前端页面传过来的值怎么防止篡改_反爬虫,到底是怎么回事儿?
有位被爬虫摧残的读者留言问:「网站经常被外面的爬虫程序骚扰怎么办,有什么方法可以阻止爬虫吗? 」 这是个好问题,自从 Python 火了起来,编写爬虫程序的门口越来越低,爬取别人网站数据也越来越猖獗. ...
- 通过URL在前端页面传参的方法
通过URL在前端页面传参的方法 整个过程实例 在HTML页面a.html中:参数写入URL function detail(goods_id){window.location.href="h ...
- AndroidStudio安卓原生开发_Intent传过来的值会自动变化_太奇怪了_你碰见过嘛_Http并发引起的问题?_可通过静态变量传值的方式解决---Android原生开发工作笔记130
最近做了个科技展览馆的项目,平板,连接各种硬件设备去测量,人体各种数据,血压,血糖,胆固醇,心电,尿酸,握力...等等.. 要测量,某个成员的上面的这些信息,要先进行登录,登录,可以进行扫描二维码登录 ...
- java批量实现1对1关系的自动匹配_杂谈Java内存Webshell的攻与防
这篇文章主要以Tomcat为例子记录了一些关于Java内存Webshell利用与检测以及相关的思考. 内存Webshell的利用方式 现在的内存Websell的利用方式个人感觉可以分为以下三种: 1. ...
- 电压越低采集的ad值反而变大_网络课堂 | 专业基础知识培训系列3采集仪功能说明与选择...
前面视频介绍了采集仪模数转换器的工作原理和幅频域相关参数.对于数据采集仪,模数转换模块是其最基本的功能.适宜的精度指标可以保证数据的质量,但是仍有很多功能是测试工程师在进行数据采集的过程中需要使用的, ...
- SpringBoot个人博客项目搭建—前端页面功能介绍(一)
SpringBoot个人博客-前端页面功能介绍(一) 项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025 一. ...
- long型长整数字在前端页面显示异常及其解决方法
文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一 ...
- VUE 页面传参、页面跳转
方案一:query参数传递 1.router定义 routes: [{path: '/soft',name: '软件详情',component: PannelContent}, ] 2.页面参数接收 ...
最新文章
- 致广大关注《网络规划设计师考试案例梳理、真题透解与强化训练》读者朋友的一封信...
- 170多万篇论文,存储量达1.1 TB,Kaggle上线arXiv完整数据集
- mac vscode 配置golang
- 新年新气象,祝所有朋友心想事成
- 【Groovy】Groovy 脚本调用 ( Groovy 类中调用 Groovy 脚本 | 参考 Script#evaluate 方法 | 创建 Binding 对象并设置 args 参数 )
- 谈谈对搜索技术Elastic SearchLucene的理解
- Spring-data-redis入门
- 互联网1分钟 | 0306 熊猫直播被爆本月申请破产;腾讯QQ注销功能本周灰度体验,预计下周正式发布...
- TCP IP基础知识的复习
- 计算机二级考试科目python难吗_计算机二级python考试难吗
- SQL Plus的使用详解(登录和常用命令)
- EI会议列表--IEEE主办的会议
- 揭秘李佳琪直播带货绝招,学会它让你直播带货效益翻倍。
- 用前端技术实现2d动画和特效(canvas)
- 找出程序耗费 CPU 的函数
- Android三种姿势带你玩转360度全景图功能
- 汽车常识全面介绍 - 引擎概论
- 高等数学——平面曲线的弧长的计算
- ubuntu 18.04 安装NVIDIA 显卡驱动
- CG-3D渲染器-0.1
热门文章
- Kafka删除topic Note: This will have no impact if delete.topic.enable is not【另外强烈推荐一个kafka小工具】
- 左神算法:猫狗队列(通过给不同实例盖时间戳的方法实现)
- 网络标准之:IANA定义的传输编码
- 关于可变字符串StringBuffer和String的区别总结
- 测试流程图_配方分析 测试说明及流程图详解
- 洛谷——P1540 机器翻译
- Orion算法:GOOGLE干掉百度的核武器?
- 【千字分析】剑指 Offer 46. 把数字翻译成字符串
- 【两种解法】Quadtrees UVA - 297(隐式建树+显式建树)
- 防火墙简介(二)——firewalld防火墙