前端安全（自留）

已于 2023-03-30 10:58:33 修改
阅读量1.8k 收藏 1
点赞数 2
分类专栏： 浏览器 文章标签： 前端 安全 服务器
于 2023-03-10 22:17:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52711377/article/details/129453156
版权

目录

XSS——跨站脚本

当目标站点在渲染html的过程中，遇到陌生的脚本指令执行。

攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。
在这里插入图片描述

常见

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

解决

对于用户提交的参数 或者输入的内容没有很好的过滤

黑名单过滤 白名单过滤（用户名密码）

输出转义：
在这里插入图片描述

在这里插入图片描述

cookie 设置为http-only
这样js脚本就不能读取到cookie

CSRF ——跨站请求伪造

本质是利用了 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
在这里插入图片描述

常见

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

解决

reffer token 短信验证
在这里插入图片描述
黑客和本地不同源
拦截器检查reffer 但是可以伪造
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

AC_uv
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试计网、HTTP协议，操作系统（自留，持续更新）
Y_ooo的博客
04-15 3029
参考： https://juejin.cn/post/6844903590058786824 https://space.bilibili.com/327247876 1.ajax，fetch，axios是什么，优缺点？ 1）ajax ajax指异步的javascript和XML，是一个技术统称，特点就是局部刷新页面、不需要重载整个页面。ajax通过js操作浏览器提供的XMLHttpRequest构造函数表示网页请求，以此来进行网络通信。 ajax内部有这么几个需要注意点函数和参数： open(请求方法.
前端安全问题
yanner_的博客
08-05 1252
1.不安全的第三方依赖包 现如今进行应用开发，就好比站在巨人的肩膀上写代码。据统计，一个应用有将近80%的代码其实是来自于第三方组件、依赖的类库等，而应用自身的代码其实只占了20%左右。无论是后端服务器应用还是前端应用开发，绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。 这样做的好处显而易见，但是与此同时安全风险也在不断累积——应用使用了如此多的第三方代码，不论应用自己的代码的安全...
网络安全类学习资源
热门推荐
天涯学馆
11-20 1万+
目录分类 媒体社区类 安全公司类 应急响应类 安全团队类 高校社团类 CTF类 个人类 web安全类 网络运维类 安全研发类 二进制安全类 硬件安全类 其他 媒体社区类 媒体、资讯、社区 网络安全和信息化 :- 《网络安全和信息化》（原《网络运维与管理》）杂志官方所属，IT运维管理人员的专业管理类经验、知识、资料。提高IT基础设施运营水平，提高IT管理人员工作能力。 i春秋 :- 专业的网络安全、信息安全、白帽子技术的培训平台及学习社区，78万安全用户的精准推荐。 合天智汇 :- 为广大信息安.
前端安全汇总（持续更新）
WLANQY的博客
02-07 171
子资源完整性(SRI)是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能.integrity 值分成两个部分，第一部分指定哈希值的生成算法（sha256、sha384 及 sha512），第二部分是经过 base64 编码的实际哈希值，两者之间通过一个短横（-）分割。
ecshop-微信手机支付自留备用
10-31
2. **安全配置**：设置API密钥，用于加密和解密敏感数据，确保交易安全。 3. **订单创建**：在ECSHOP后台生成订单后，需要调用微信支付接口生成预支付交易单，获取预支付交易会话标识（prepay_id）。 4. **支付发起*...
jameslittle.me:我的个人网站
05-13
而“static-site”意味着这个网站是一个静态网站，不包含服务器端脚本，内容在用户请求时直接发送到浏览器，这通常意味着更快速的加载时间、更高的安全性以及更低的维护成本。 “eleventy”是一个提及的关键词，它...
老码农冒死揭开行业黑幕：如何编写无法维护的代码
程序员的那些事
08-18 2911
（给程序员的那些事加星标）【程序员的那些事 注】：这是一篇非常经典的文章，我们以前发过多次。虽然部分内容是针对 Java 语言，但其他部分对所有编程语言都有参考意义。今天重新推荐给新读者...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 481
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 299
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
网页开发 HTML
ultramand的博客
09-06 849
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 332
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4544
深入理解JavaScript闭包：避免常见的内存泄漏问题
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 833
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
Nginx部署前端Vue项目
不会代码的小林
09-03 1309
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
springblade-JWT认证缺陷漏洞CVE-2021-44910
m0_73756016的博客
09-03 420
大概意思就是这个认证判断有个逻辑缺陷，就是在泄露的前端pack里面对于jwt的判断认证不够严谨，并且加密的TokenConstant.SIGN_KEY也泄漏了。直接搜索“请求未授权”，定位到认证文件：springblade/gateway/filter/AuthFilter.java。/api/blade-log/api/list接口中会泄漏账号密码，只要管理员登录过。/api/blade-user/user-list泄露了账号密码。然后直接访问接口：api/blade-log/api/list。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1254
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 1035
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 628
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
项目风险管理：风险自留策略与应对
"风险自留方式-风险管理与项目管理" 在风险管理领域，风险自留是一种常见的策略，它指的是项目或企业选择自己承担潜在的风险损失，而不是通过保险或其他转移机制将风险转移出去。风险自留分为有计划的（有意识的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值