论您是React.js，Angular，Vue.js还是仅仅是前端开发人员，您的代码都可以成为黑客的诱人之门。
作为前端开发人员，我们最关心的是性能，SEO和UI / UX-安全性经常被忽略。
您可能会惊讶地知道大型框架如何使您对跨站点脚本（XSS）攻击持开放态度。React的dangerouslySetInnerHTML或Angular中的bypassSecurityTrustAPI中存在危险的操作名称。
我们应该记住，就安全性而言，前端现在与后端或DevOps承担同等的责任。前端可能会发生数千种恶意攻击。
让我们了解最常见的情况-这些将涵盖这些类型的攻击的很大一部分。
1.不受限制的文件上传
这是一种将恶意文件上传到服务器然后执行的攻击，以攻击系统。攻击可能包括：文件系统或数据库超载，完整的系统接管，客户端攻击，将攻击转发到后端系统或简单的破坏。
2.点击劫持
这是一种攻击，用户诱骗用户单击网页或不属于该站点的元素。这种攻击可能导致用户不经意间提供凭据或敏感信息，下载恶意软件，访问恶意网页，在线购买产品或转移资金。
3. XSS攻击
这是一种将恶意脚本以浏览器端脚本的形式注入到网页中的攻击。网站上的缺陷使这些攻击得以成功并广泛传播。
4. SQL注入
这是一种攻击，其中注入SQL语句中的恶意代码以通过输入字段破坏数据库。
5.拒绝服务攻击（DoS攻击）
这是一种攻击，其中通过用流量轰炸服务器来使目标用户无法使用服务器或其资源。
6.中间人攻击或会话劫持
这是一种攻击，其中客户端与服务器之间的通信被拦截，以窃取密码，帐号或任何个人详细信息。
攻击者将始终尝试在前端发现一些漏洞以到达服务器并进行工作。在本文中，我们将看到编码前端时要牢记的一些常见最佳实践。
1.严格的用户输入（第一个攻击点）
用户输入本质上应该始终严格，以避免诸如SQL注入，点击劫持等漏洞。因此，在将用户输入发送到后端之前，先对其进行验证或清除是很重要的。
可以通过删除或替换上下文相关的危险字符来对数据进行消毒，例如使用白名单并转义输入数据。
但是，我意识到对于所有现有的可能性，清理和编码并不是一件容易的事，因此我们可以使用以下开放源代码库：
-
[DOMPurify](https://www.npmjs.com/package/dompurify)。这是最简单的使用方法，并且具有一种清理用户输入的方法。它具有自定义规则的选项，并且支持HTML5，SVG和MathML。 -
[secure-filters](https://www.npmjs.com/package/secure-filters)。一个Salesforce库，其中提供了清理HTML，JavaScript，内联CSS样式和其他上下文的方法。如果您想在其他地方使用用户输入，例如生成CSS或JavaScript，则特别有用。
如果是文件上传，请务必检查文件类型并使用文件过滤器功能，并且仅允许某些文件类型上载。
2.当心隐藏的字段或存储在浏览器内存中的数据
如果我们添加输入type="hidden"以将敏感数据隐藏在页面中或将它们添加到浏览器localStorage中sessionStorage，cookies并且认为是安全的，则需要重新考虑。
攻击者可以轻松访问添加到浏览器中的所有内容。攻击者可以打开开发工具并更改所有内存变量。而如果你隐藏了根据该身份验证页面localStorage，sessionStorage和cookies值？
浏览器中有ZapProxy之类的工具，甚至检查工具，可以在攻击者找到注入脚本的方式后将这些值暴露给攻击者，然后他们可以使用它们进行进一步的攻击。
因此，应避免type="hidden"在浏览器的内存中使用并尽可能避免将密钥，身份验证令牌等存储在浏览器中。
3.使用强大的内容安全策略（CSP）
永远不要信任服务器发送的所有内容-始终定义一个强大的Content-Security-Policy HTTP标头，该标头仅允许某些受信任的内容在浏览器上执行或提供更多资源。
最好有一个白名单-允许的来源清单。现在，即使攻击者注入了脚本，该脚本也不会与白名单匹配，也不会被执行。
例如：
content-security-policy: script-src ‘self’ https://apis.xyz.com
在这里，应用程序仅信任来自apis.xyz.com和自己（self）的脚本。对于其余的源，将在控制台中引发错误。
注意：强大的内容安全策略不能解决内联脚本执行的问题，因此XSS攻击仍然有效。
您可以在MDN网站上阅读CSP指令的完整列表。
4.启用XSS保护模式
如果攻击者以某种方式从用户输入中注入了恶意代码，我们可以通过提供"X-XSS-Protection": "1; mode=block"标头来指示浏览器阻止响应。
大多数现代浏览器默认情况下都启用了XSS保护模式，但仍建议包含X-XSS-Protection标头。这有助于确保不支持CSP标头的旧版浏览器具有更好的安全性。
5.避免典型的XSS错误
XSS攻击通常可追溯到DOM API的innerHTML.例如：
document.querySelector（'。tagline'）。innerHTML = nameFromQueryString
任何攻击者都可以使用上面的代码行注入恶意代码。
考虑使用textContent而不是，innerHTML以防止完全生成HTML输出。如果不生成HTML，则无法插入JavaScript，您可能会看到其中的内容，但是什么也不会发生。
请密切注意新的Trusted Types规范，该规范旨在防止Google员工进行所有基于DOM的跨站点脚本攻击。
对于react.js而言，dangerouslySetInnerHTML是明确且谨慎的，并且可能会产生与相似的影响innerHTML。
注意：不要基于用户输入设置innerHTML值，而应尽可能使用textContent 。
此外，HTTP响应报头Content-Type和X-Content-Type-Options应适当设置，与他们的预期行为。例如，请勿将JSON数据编码为text/HTML，以防止意外执行。
6.禁用iframe嵌入
禁用的iframe可以使我们免受点击劫持攻击。我们应该始终"X-Frame-Options": "DENY"在请求中使用标头，以禁止在框架中呈现网站。
另外，我们可以使用frame-ancestorsCSP指令，该指令可以更好地控制哪些parent可以将页面嵌入到iframe中。
7.保持错误通用
诸如“您的密码不正确”之类的错误可能不仅对用户有用，对攻击者也有帮助。他们可能会从这些错误中找出信息，以帮助他们计划下一步行动。
在处理帐户，电子邮件时，我们应尝试使用诸如“错误的登录信息”之类的模棱两可的错误。
8.使用验证码
在面向公众的端点（登录，注册，联系）上使用验证码。验证码是一种旨在区分人与机器人的计算机程序或系统，可以帮助阻止DoS（拒绝服务）攻击。
9.总是设置 Referrer-Policy
每当我们使用定位标记或导航到远离网站的链接时，请确保您使用标头策略，"Referrer-Policy": "no-referrer"或者在使用定位标记的情况下设置rel = noopener or noreferrer。
如果不设置这些标头和相关性，则目标网站可以获得会话令牌和数据库ID之类的数据。
10.使用受限的浏览器功能和API
与CSP中一样，受限域可以连接到网站，相同的原理也可以应用于浏览器功能和API。我们可以添加Feature-Policy标头以拒绝对某些功能和API的访问。阅读更多。
提示：所有不使用的功能设置none。
11.定期审核依存关系
npm audit定期运行以获取易受攻击的软件包的列表，并对其进行升级以避免安全问题。
GitHub现在标记易受攻击的依赖项。我们还可以使用Snyk来自动检查您的源代码，并打开对凹凸版本的请求。
12.分隔您的应用程序
与后端一样，我们拥有微服务架构，其中，单片应用程序被拆分为较小的自包含组件，每个组件单独运行。
相同的原理可以应用于前端。例如，一个应用程序可以分成公共，认证和管理部分，分别托管在独立的子域，如[https://public.example.com](https://public.example.com/)，[https://users.example.com](https://users.example.com/)和[https://admin.example.com](https://admin.example.com/)。
这将确保减少客户端漏洞。
注意：适当的分隔还可以防止在应用程序的公共部分出现XSS漏洞，从而防止它自动破坏用户信息。
13.避免第三方服务
一行代码第三方服务（例如Google Analytics（分析），Google跟踪代码管理器，对讲机，Mixpanel）会使您的Web应用程序容易受到攻击。想一想这些第三方服务受到损害的情况。
拥有强大的CSP政策很重要。大多数第三方服务都有定义的CSP指令，因此请务必添加它们。
另外，integrity在添加脚本标签时，请确保在可能的情况下包括属性。子资源完整性功能可以验证脚本的加密哈希，并确保它未被篡改。
仔细考虑自动填充字段
存储在浏览器自动填充中的个人标识信息对于用户和攻击者都可以很方便。
攻击者添加了第三方脚本，以利用浏览器的内置自动填充功能提取电子邮件地址以构建跟踪标识符。他们可以使用这些信息建立用户浏览历史记录配置文件，然后将其出售给坏人。在这里阅读更多内容。
我们许多人甚至都不知道他们的浏览器自动填充存储了哪些信息。
提示：禁用自动填写的表单以获取敏感数据。
参考
13 Security Tips for Front-End Apps