前端网络安全

简介: 前端网络安全

跨站脚本攻击(XSS攻击)

XSS(cross site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。

防范:

  1. 对于敏感的cookie信息,使用HttpOnly,使document对象中找不到cookie。
  2. 对于用户输入的信息要进行转义。

跨站请求伪造(CSRF攻击)

防范:

1、验证码。 应用程序和用户进行交互过程中,特别是账户交易这种核心步骤,强制用户输入验证码,才能完成最终请求。在通常情况下,验证码够很好地遏制

CSRF攻击。但增加验证码降低了用户的体验,网站不能给所有的操作都加上验证码。所以只能将验证码作为一种辅助手段,在关键业务点设置验证码。

2、Anti CSRF Token。 目前比较完善的解决方案是加入Anti-CSRF-Token,即发送请求时在HTTP 请

求中以参数的形式加入一个随机产生的token,并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值,会进行校验该请求当中的token

和cookie当中的token值是否都存在且相等,才认为这是合法的请求。

防范 CSRF 攻击可以遵循以下几种规则:

  1. Get 请求不对数据进行修改
  2. 不让第三方网站访问到用户 Cookie
  3. 阻止第三方网站请求接口
  4. 请求时附带验证信息,比如验证码或者 Token

HTTP首部中的一些安全控制

Cookie的HttpOnly属性与secure属性

  • HttpOnly属性使JS脚本无法获得cookie。其主要目的为防止跨站脚本攻击(XSS)对cookie的信息窃取。
  • secure属性用于限制Web页面仅在https安全连接时才可以发送cookie

X-Frame-Options

首部字段 X-Frame-Options 属于HTTP响应首部,用于控制网站内容在其他Web网站的Frame标签内的显示问题。其主要目的是为了防止点击劫持(clickjacking)攻击。

首部字段 X-Frame-Options 有三个可设置值:

  • DENY :浏览器拒绝当前页加载任何frame页面
  • SAMEORIGIN:只允许加载同源域名下的页面
  • ALLOW-FROM:可定义允许frame加载的页面地址(被弃用)

X-XSS-Protections

首部字段 X-XSS-Protections 属于 HTTP 响应首部,它是针对跨站脚本攻击(XSS)的一种对策,用于控制浏览器XSS防护机制的开关。

首部字段 X-XSS-Protection 可指定的字段值如下:

  • 0:将XSS过滤设置成无效状态
  • 1:将XSS过滤设置成有效状态

TRACE请求方法

容易引发XST(Cross-Site Tracing,跨站追踪)攻击

参考文章

web前端安全机制问题全解析

前端常见的安全问题

前端常见的安全问题以及防范措施总结大全

前端安全防范知识XSS/CSRF/点击劫持/中间人攻击及防护方案



相关文章
|
2月前
|
缓存 网络协议 前端开发
2023高频前端面试题合集之网络篇
2023高频前端面试题合集之网络篇
138 0
|
2月前
|
XML 存储 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(三)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
10月前
|
缓存 网络协议 前端开发
前端面试的计算机网络部分(2)每天10个小知识点
前端面试的计算机网络部分(2)每天10个小知识点
57 0
|
2月前
|
XML JSON 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
13天前
|
域名解析 缓存 网络协议
前端必备的网络知识 DNS CDN
前端必备的网络知识 DNS CDN
22 0
|
2月前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
49 3
|
2月前
|
存储 XML 前端开发
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理
【4月更文挑战第30天】本文介绍了Flutter开发中的网络请求和数据处理。 Flutter开发者可选择http(官方库)或dio(功能更强大)进行网络请求。http库简单易用,dio支持更多功能如拦截器。数据处理涉及JSON和XML解析,数据存储可选SharedPreferences或Hive,数据传递推荐使用InheritedWidget或Provider状态管理库。了解这些知识点能提升Flutter开发效率。
【Flutter前端技术开发专栏】Flutter中的网络请求与数据处理
|
2月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
2月前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
125 3
|
2月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
173 0