web前端开发中的安全性问题

web前端 专栏收录该内容
16 篇文章 0 订阅

跨站脚本攻击(XSS攻击)

恶意攻击者往Web页面里注入恶意Script代码,用户浏览这些网页时,就会执行其中的恶意代码,可对用户进行盗取cookie信息、会话劫持等各种攻击.
解决方案:
1. 输入过滤,输入符合预期的格式的数据,比如图片上传,设置accept属性,或者只能输入字母或者日期格式等,同时后台对前台输入的数据也应该做编码或转义来防范XSS攻击。
2.对所有要动态输出到页面的内容,进行相关的编码和转义.主要有HTML字符过滤和转义,JS脚本转义过滤.url转义过滤.。
3.CSP,原理其实就是白名单机制,开发者明确告诉客户端(浏览器)哪些资源可以加载并执行,我们只需要提供配置,其他的工作由客户端(浏览器)来完成。通过 <meta> 标签开启 <meta http-equiv="Content-Security-Policy" content="配置项" >
配置项:

default-src:用来设置每个选项的默认值
script-src:外部脚本
style-src:样式表
img-src:图像
media-src:媒体文件(音频和视频)
font-src:字体文件
object-src:插件(比如 Flash)
child-src:框架
frame-ancestors:嵌入的外部资源(比如<frame><iframe><embed><applet>)
connect-src:HTTP 连接(通过 XHR、WebSockets、EventSource等)
worker-src:worker脚本
manifest-src:manifest 文件
block-all-mixed-content:HTTPS 网页不得加载 HTTP 资源(浏览器已经默认开启)
upgrade-insecure-requests:自动将网页上所有加载外部资源的 HTTP 链接换成 HTTPS 协议
plugin-types:限制可以使用的插件格式
sandbox:浏览器行为的限制,比如不能有弹出窗口等。
report-uri:有时,我们不仅希望浏览器帮我们防止XSS的攻击,还希望将该行为上报到给定的网址,该选项用来配置上报的地址

例子

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
脚本:只信任当前域名
<object> 标签:不信任任何URL,即不加载任何资源
样式表:只信任 cdn.example.org 和 third-party.org
框架(frame):必须使用HTTPS协议加载
其他资源:没有限制

跨站请求伪造(CSRF攻击)

CSRF攻击过程是受害者用户登录网站A,输入个人信息,在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到
B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是交易转账.
解决方案:
1.在关键业务点设置验证码验证。
2.在HTTP 请求中以参数的形式加入一个随机产生的token,并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值,会进行校验该请求当中的token和cookie当中的token值是否都存在且相等,才认为这是合法的请求。否则认为这次请求是违法的,拒绝该次服务。
3.通过检查一下两个 header:Origin Header、Referer Header

  • 1
    点赞
  • 1
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前端技术】<br /> Vue        互联网最火的前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值