资讯专栏INFORMATION COLUMN

前端解决跨域总结

kumfo / 258人阅读

摘要:跨站请求伪造定义又称,攻击者盗用用户身份,发送恶意请求。避免全站通用的,严格设置的域。并且通过携带过程的信息可以使服务端返回开头的状态码,从而拒绝合理的请求服务。

CSRF (cross site request forgery)跨站请求伪造 定义

又称XSRF,攻击者盗用用户身份,发送恶意请求。【冒充用户发起请求(在用户不知情的情况下),完成一些违背用户意愿的请求(如恶意发帖,删帖,改密码,发邮件等)】

原理

用户登录受信任网站A,网站A下发cookies,在未关闭A网站页面情况下,访问B网站,网站B接收到用户请求后,返回一些攻击性代码,并发出一个请求要求访问第三方站点A,于是,便带着网站A下发cookies完成请求
注:合法用户(C)、存在漏洞网站(A)、攻击网站(B)

用途&危害

以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账等
个人隐私泄露以及财产安全受到威胁、网站信誉受到影响

防御

通过 referer、token 或者 验证码 来检测用户提交。(验证refer(referer)(禁止来自第三方网站的请求))

尽量不要在页面的链接中暴露用户隐私信息。

对于用户修改删除等操作最好都使用post 操作 。

避免全站通用的cookie,严格设置cookie的域。

xss (cross site scripting) 跨站脚本攻击 定义

攻击者可以利用 web应用的漏洞或缺陷之处,向页面注入恶意的程序或代码,以达到攻击的目的

原理

攻击者通过各种办法,在用户访问的网页中注入恶意脚本,让其在用户访问网页时在其浏览器中进行执行,从而达到恶意攻击用户的特殊目的

类型

反射性XSS

通过给用户发送带有恶意脚本代码参数的URL,当URL被打开时,特有的恶意代码被html解析,执行。
特点是非持久化,必须用户点击特定参数的链接才能引起

存储型XSS

XSS代码提交给网站 -> 网站把XSS代码存储进数据库 -> 当该页面再次被访问时服务器发送已经被植入XSS代码的数据给客户端 -> 客户端执行XSS代码

基于DOM的XSS

DOM中的可被用户操纵的对象,如果DOM中的数据没有经过严格确认,就会产生漏洞XSS

用途&危害

身份盗用,钓鱼欺骗、垃圾信息发送

盗取用户信息、隐私

网站钓鱼,盗取各类用户的账号

劫持用户会话,从而执行任意操作,例如进行非法转账,强制发表日志等

强制弹出广告页面,刷流量

流量劫持(通过访问某段具有 window.location.href 定位到其他页面)

dos攻击:利用合理的客户端请求来占用过多的服务器资源,从而使合法用户无法得到服务器响应。并且通过携带过程的 cookie信息可以使服务端返回400开头的状态码,从而拒绝合理的请求服务。

防御

对数据进行转义,针对富文本设置白名单,使用CSP

具体做法:

对输入内容的特定字符进行编码,例如表示 html标记的 < > 等符号。

对重要的 cookie设置 httpOnly, 防止客户端通过document.cookie读取 cookie,此 HTTP头由服务端设置。

将不可信的值输出 URL参数之前,进行 URLEncode操作,而对于从 URL参数中获取值一定要进行格式检测(比如你需要的时URL,就判读是否满足URL格式)。

不要使用 Eval来解析并运行不确定的数据或代码,对于 JSON解析请使用 JSON.parse() 方法。

后端接口也应该要做到关键字符过滤的问题。

XSS、CSRF两者区别

XSS利用站点内的信任用户,而CSRF则通过伪装来自受信任用户的请求来攻击受信任的网站
XSS是服务器对用户输入的数据没有进行足够的过滤,导致客户端浏览器在渲染服务器返回的html页面时,出现了预期值之外的脚本语句被执行。
CSRF是服务器端没有对用户提交的数据进行随机值校验,且对http请求包内的refer字段校验不严,导致攻击者可以利用用户的Cookie信息伪造用户请求发送至服务器

CORS

是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
最常用,主要是后端配置
实现此功能非常简单,只需由服务器发送一个响应标头即可。

如:php文件中 header("Access-control-allow-origin:*")
注:ajax xhr.open(method, url, async) async[true: 异步]

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102979.html

相关文章

  • 2018年腾讯前端一面总结(面向2019届学生)

    摘要:前言腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。 前言 腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性,也有在等待电话的时候的心情的忐忑。 背景 我是一名大三学生,大一...

    Kosmos 评论0 收藏0
  • 前端跨域方法论

    摘要:说明是否允许通讯同一域名允许同一域名下的不同文件夹允许不同端口号不允许不同协议不允许不同域名不允许主域相同,子域不同不允许跨域解决方案由于浏览器同源策略是允许标签这样的跨域资源嵌套的,所以标签的资源不受同源策略的限制。 前言 本着学习和总结的态度写的技术输出,文中有任何错误和问题,请大家指出。更多的技术输出可以查看我的 github博客。 整理了一些前端的学习资源,希望能够帮助到有需要...

    leejan97 评论0 收藏0
  • 慕课网_《Ajax跨域完全讲解》学习总结

    摘要:时间年月日星期三说明本文部分内容均来自慕课网。当预检请求通过的时候,才发送真正的请求。 时间:2018年04月18日星期三说明:本文部分内容均来自慕课网。@慕课网:https://www.imooc.com教学源码:https://github.com/zccodere/s...学习源码:https://github.com/zccodere/s... 第一章:课程介绍 1-1 课程介...

    fredshare 评论0 收藏0
  • 总结系列〕前端面试题精华筛选

    摘要:所谓同源是指协议域名端口三者相同,即便两个不同的域名指向同一个地址,也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇 如何获取浏览器URL中查询字符串中的参数? 1.封装方法 getUrlArgs(url) { const args =...

    lyning 评论0 收藏0
  • 总结系列〕前端面试题精华筛选

    摘要:所谓同源是指协议域名端口三者相同,即便两个不同的域名指向同一个地址,也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇 如何获取浏览器URL中查询字符串中的参数? 1.封装方法 getUrlArgs(url) { const args =...

    Thanatos 评论0 收藏0
  • 前端秋招面试总结

    摘要:前言秋招宣告结束,面试了接近家公司,有幸拿到,感谢这段时间一起找工作面试的朋友和陪伴我的人。一定要提前准备好,不然面试官叫你说遇到的难点,或者直接问问题时可能会懵逼。 前言 秋招宣告结束,面试了接近20家公司,有幸拿到offer,感谢这段时间一起找工作面试的朋友和陪伴我的人。这是一段难忘的经历,相信不亚于当年的高考吧,也许现在想起来高考不算什么,也许只有经历过秋招的人才懂得找工作的艰辛...

    Gu_Yan 评论0 收藏0

发表评论

0条评论

kumfo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<