您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

前端开发人员要懂的10个安全措施

时间:2020-05-02 10:47:12  来源:  作者:
前端开发人员要懂的10个安全措施

 

 

​Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时,我们通常会查看性能,seo友好性和可访问性等指标,而网站抵御恶意攻击的能力通常会受到关注。即使敏感的用户数据存储在服务器端,后端开发人员也必须采取重要措施来保护服务器,但最终,保护数据的责任在后端和前端之间共享。虽然敏感数据可以安全地锁定在后端仓库中,但是前端将密钥保存到其前门,而窃取它们通常是获得访问权限的最简单方法。

“保护用户数据在后端和前端之间共享的责任。”

恶意用户可以采取多种攻击手段来破坏我们的前端应用程序,但是幸运的是,我们只需使用几个正确配置的响应头并遵循良好的开发实践,就可以在很大程度上减轻此类攻击的风险。在本文中,我们将介绍10种简单的操作,您可以通过这些简单的操作来提高对Web应用程序的保护。

 

测量结果

 

在我们开始改善网站安全性之前,重要的一点是要对我们所做更改的有效性提供反馈。虽然量化“良好开发实践”的构成可能很困难,但可以非常准确地测量安全头的强度。就像我们使用Lighthouse获取性能,SEO和可访问性分数一样,我们可以使用SecurityHeaders.com根据当前响应标头获取安全分数。对于不完美的分数,它还将为我们提供一些有关如何提高分数并因此增强安全性的提示:

 

前端开发人员要懂的10个安全措施

 

 

SecurityHeaders可以给我们的最高分是“ A +”,我们应该始终为此努力。

 

注意响应头

 

处理响应标头曾经是后端的任务,但是如今,我们经常将Web应用程序部署到Zeit或Netlify之类的“无服务器”云平台,并配置它们以返回正确的响应标头成为前端责任。确保了解您的云托管提供商如何使用响应标头,并进行相应配置。

 

安防措施

 

1.使用强大的内容安全策略

声音内容安全策略(CSP)是前端应用程序中安全性的基石。CSP是浏览器中引入的一种标准,用于检测和缓解某些类型的代码注入攻击,包括跨站点脚本(XSS)和点击劫持。

强大的CSP可能会禁用潜在有害的内联代码执行,并限制从中加载外部资源的域。您可以通过将 Content-Security-Policy 标头设置为以分号分隔的指令列表来启用CSP 。如果您的网站不需要访问任何外部资源,则标题的起始值可能看起来像这样:

Content-Security-Policy: default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self'; connect-src 'self';

这里我们设置script-src,img-src,style-src,和connect-src指令,以自我,以表明所有的脚本,图片,样式,分别取电话应仅限于相同的起源html文档从服务。未明确提及的任何其他CSP指令将回退到指令指定的值default-src。我们将其设置none为指示默认行为是拒绝与任何URL的连接。

但是,如今几乎没有任何Web应用程序是自包含的,因此您可能需要调整此标头以允许使用其他受信任的域,例如google Fonts或AWS S3存储桶的域,但始终最好以最严格的政策,并在需要时稍后放宽。

您可以在MDN网站上找到CSP指令的完整列表。

 

2.启用XSS保护模式

如果确实从用户输入中注入了恶意代码,我们可以通过提供 "X-XSS-Protection": "1; mode=block" 标头指示浏览器阻止响应。

尽管大多数现代浏览器默认情况下都启用了XSS保护模式,并且我们也可以使用内容安全策略来禁用内联JAVAScript,但仍建议使用 X-XSS-Protection 标头,以确保不支持CSP标头的旧版浏览器具有更好的安全性。

 

3.禁用iframe嵌入以防止点击劫持攻击

点击劫持是一种诱骗,诱使网站A上的用户在网站B上执行某些操作。为此,恶意用户将网站B嵌入到看不见的iframe中,然后将其放置在网站A上毫无疑问的用户光标下方,因此当点击,或者认为他们点击了网站A上的元素,实际上是点击了网站B上的某些内容。

我们可以通过提供 X-Frame-Options 禁止在框架中呈现网站的标头来防止此类攻击:

"X-Frame-Options": "DENY"

另外,我们可以使用frame-ancestorsCSP指令,该指令可以更好地控制父级可以或不能将页面嵌入到iframe中。

 

4.限制对浏览器功能和API的访问

良好的安全做法的一部分是限制对正确使用我们的网站所不需要的任何内容的访问。我们已经使用CSP应用了该原理来限制允许网站连接的域数量,但是它也可以应用于浏览器功能。我们可以通过使用Feature-Policy标头指示浏览器拒绝访问应用程序不需要的某些功能和API 。

我们设置Feature-Policy了由分号分隔的一串规则,其中每个规则都是功能的名称,后跟其策略名称。

"Feature-Policy": "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; camera 'none'; encrypted-media 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none';  picture-in-picture 'none'; speaker 'none'; sync-xhr 'none'; usb 'none'; vr 'none';"

Smashing Magazine上有一篇很棒的文章Feature-Policy,详细解释了该问题,但是大多数时候您会想要none为所有不使用的功能进行设置。

 

5.不要泄漏引荐来源网址的值

 

当您单击导航到远离您的网站的链接时,目标网站将在referrer标头中收到您网站上最后一个位置的URL 。该URL可能包含敏感数据和半敏感数据(例如会话令牌和用户ID),这些数据永远都不应公开。

为了防止referrer值泄漏,我们将Referrer-Policyheader 设置为no-referrer:

"Referrer-Policy": "no-referrer"

在大多数情况下,此值应该很好,但是如果在某些情况下您的应用程序逻辑要求您保留引荐来源,请查看Scott Helme的这篇文章,其中他分解了所有可能的标头值以及何时应用它们。

 

6.不要基于用户输入设置innerHTML值

 

跨站点脚本攻击(其中,恶意代码被注入到网站中)可以通过许多不同的DOM API发生,但最常用的是innerHTML。

永远不要innerHTML基于用户未过滤的输入进行设置。用户可以直接操作的任何值-输入字段中的文本,URL中的参数或本地存储条目-应该先进行转义和清理。理想情况下,请使用textContent而不是innerHTML完全阻止生成HTML输出。如果确实需要为用户提供富文本编辑,请使用建立良好的库,该库使用白名单而不是黑名单来指定允许的HTML标签。

不幸的是,innerHTML这并不是DOM API的唯一弱点,而且容易受到XSS注入攻击的代码仍然难以检测。这就是为什么始终具有禁止内联代码执行的严格内容安全策略很重要的原因。

将来,您可能希望关注新的Trusted Types规范,该规范旨在防止所有基于DOM的跨站点脚本攻击。

 

7.使用UI框架

 

诸如React,Vue和Angular之类的现代UI框架内置了良好的安全性,可以很大程度上消除XSS攻击的风险。它们会自动对HTML输出进行编码,减少对XSS敏感DOM API的使用,并为诸如的潜在危险方法提供明确的名称 dangerouslySetInnerHTML。

 

8.使您的依赖关系保持最新

快速浏览内部 node_modules 文件夹将确认我们的Web应用程序是由数百个(如果不是数千个)依赖项构建而成的难题。确保这些依赖项不包含任何已知的安全漏洞对于网站的整体安全非常重要。

确保依赖关系保持安全和最新的最佳方法是使漏洞检查成为开发过程的一部分。为此,您可以集成Dependabot和Snyk之类的工具,这些工具将为过时或潜在易受攻击的依赖项创建提取请求,并帮助您更快地应用修补程序。

 

9.添加第三方服务之前请三思

诸如Google Analytics(分析),Intercom,Mixpanel等第三方服务以及其他一百种服务可以为您的业务需求提供“一行代码”解决方案。同时,它们会使您的网站更容易受到攻击,因为如果第三方服务受到损害,那么您的网站也会受到损害。

如果您决定集成第三方服务,请确保设置最强大的CSP策略,该策略仍将允许该服务正常运行。大多数流行的服务都记录了它们要求的CSP指令,因此请确保遵循其准则。

使用Google跟踪代码管理器,细分或任何其他允许组织中任何人集成更多第三方服务的工具时,都应格外小心。有权使用此工具的人员必须了解连接其他服务的安全隐患,并且最好与开发团队进行讨论。

 

10.将子资源完整性用于第三方脚本

对于您使用的所有第三方脚本,请确保 integrity 在可能的情况下包括属性。浏览器具有“子资源完整性”功能,该功能可以验证您正在加载的脚本的加密哈希,并确保它未被篡改。

这怎么您script的标签可能是这样的:

<script src="https://example.com/example-framework.js"        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."        crossorigin="anonymous"></script>

值得澄清的是,该技术对第三方库很有用,但对第三方服务的作用较小。大多数情况下,当您为第三方服务添加脚本时,该脚本仅用于加载另一个从属脚本。无法检查依赖脚本的完整性,因为可以随时对其进行修改,因此在这种情况下,我们必须依靠严格的内容安全策略。

 

结论

保存浏览体验是任何现代Web应用程序的重要组成部分,并且用户希望确保其个人数据保持安全和私有。而且,尽管这些数据存储在后端,但确保数据安全的责任也扩展到了客户端应用程序。

恶意用户可以利用多种UI优先攻击,但是,如果按照本文中的建议进行操作,则可以大大提高防御它们的机会。

 

大前端洞见——认知引导方向,洞见改变格局!



Tags:前端开发   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  Tags: 前端开发  点击:(17)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 前端开发  点击:(19)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 前端开发  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: 前端开发  点击:(51)  评论:(0)  加入收藏
Web前端开发工程师需要核心掌握HTML/CSS/JS开发,在几年前HTML5标准进入国内后,得到了快速的应用于推广,开发人员为了实现更多的效果和功能,将HTML5的应用推崇到了极高的位置。作...【详细内容】
2021-09-17  Tags: 前端开发  点击:(61)  评论:(0)  加入收藏
前端开发一定会遇到框架的问题,那前端开发时用哪个框架好呢?哪个框架更适合前端初学者呢?我们就来梳理一下三大主流框架。 Reat.js(react)是脸书推出的一个用来构建用户界面的Jav...【详细内容】
2021-07-23  Tags: 前端开发  点击:(119)  评论:(0)  加入收藏
前言后端程序员们常常会争论“什么是最好的语言”,而对于前端来说,我们没有选择,无论爱与恨,我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及...【详细内容】
2021-04-08  Tags: 前端开发  点击:(291)  评论:(0)  加入收藏
基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外。正例:export default { name: &#39;TodoItem&#39;, // ...}复制代码反例:e...【详细内容】
2021-03-10  Tags: 前端开发  点击:(287)  评论:(0)  加入收藏
不久之前,我开始为自己的新项目构建一套仪表板。这套仪表板中包含一个 Node.js API 网关(仍处于起步阶段),外加用于记录的 Clickhouse:https://github.com/restyler/api-gateway...【详细内容】
2020-11-05  Tags: 前端开发  点击:(97)  评论:(0)  加入收藏
在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会给您一个可供选...【详细内容】
2020-09-21  Tags: 前端开发  点击:(64)  评论:(0)  加入收藏
▌简易百科推荐
我 2010 年开始在 Github 上开源自己的代码。在 push 代码之前我根本没想过为什么。只是因为我当时学了 git,而且我又觉得 Github 很方便,可以用来备份自己的代码。而后我就参...【详细内容】
2021-12-28  程序员的喵    Tags:Github   点击:(2)  评论:(0)  加入收藏
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  just do丶IT公众号    Tags:国企   点击:(2)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  博士聊IT    Tags:程序员   点击:(9)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03    财经杂志  Tags:程序员   点击:(16)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  云南贤哥在深圳    Tags:程序员   点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  findyi    Tags:程序员   点击:(15)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  郭主任    Tags:程序员   点击:(42)  评论:(0)  加入收藏
即使在安全技术取得进步之后,网络犯罪仍在不断增加。据统计,网络犯罪每分钟给企业造成约 290 万美元的损失。主要是因为新技术不断涌现,难以维护安全。随着网络威胁的增加,网络...【详细内容】
2021-11-04  章大千    Tags:编程语言   点击:(40)  评论:(0)  加入收藏
北漂小伙李强(化名),在北京互联网大厂工作7年,月薪3万,离职回老家开摄影店,亏了200万。李强出生于山西一座名不经传的小城市,互联网专业大学毕业的他,没有听父母的劝言回到家乡考公...【详细内容】
2021-10-29  霸王课  今日头条  Tags:程序员   点击:(53)  评论:(0)  加入收藏
程序员是青春饭,这在国内似乎是公认的。所以很多公司不愿招大龄程序员,很多程序员也“知趣”地及早转型。有的做管理,有的做架构,我还见过改行卖保险的。总之,年龄大了不想敲代码...【详细内容】
2021-10-27  编程的艺术    Tags:   点击:(30)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条