网站安全性：改善前端安全性且不被黑客入侵的13种方法
我们越来越依赖数字设备来管理购物，银行业务和整体通信。毋庸置疑，与后端开发人员一样，作为设计师和前端开发人员，我们有责任帮助保护客户免受欺诈和安全问题的侵害。
无论您是开发电子商务网站（Shopify负责大部分风险）还是开发其他类型的在线体验，您都需要注意许多陷阱。在本文中，我们采访了七位安全专家，以了解最常见的前端漏洞，以及如何降低风险并避免被黑客入侵。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益分享机会，发展业务的工具以及充满激情的商业社区。
1.安全必须是开发过程的一部分
最近，社区中的前端性能引起了很多关注。它使软件工程师Benedek Gagyi意识到它与安全性有多相似。
他说：“当我听到诸如“您必须尽早将其添加到您的流程中”或“反对您的努力的最强大力量是开发人员的便利性”之类的陈述时，我总是会点头，因为它们在性能和安全性上都是如此。”解释。“很显然，可以在开发生命周期的后期修复所有与安全性相关的错误和漏洞，但是这要困难得多，而且成本也更高。这就是为什么添加威胁建模会话和定期进行安全性审查对于任何更大的开发步骤都至关重要的原因，这意味着安全性是设计使然，而不仅仅是补丁程序。”
Benedek指出，虽然认知很重要，但应该更多地讨论实际的开发人员经验。
“我期望使用库和框架编写的软件中的安全性错误更少，这使得编写安全软件变得容易。这很简单，对吧？前端世界中的一个很好的例子是，大型框架如何通过提供有风险的操作名称（例如dangerouslySetInnerHTMLReact或bypassSecurityTrustAngular中的API ）来让您知道是否要跨站点脚本（XSS）攻击。
2.使用自动处理安全性的现代框架
JavaScript框架已成为现代Web开发的重要组成部分。现在，大多数站点似乎都围绕React，Vue或Angular之类的框架构建。从安全角度来看，它们提供了显着的好处。
Pragmatic Web Security的创始人兼安全编码讲师Philippe De Ryck说：“ Angular框架的转世就是一个完美的例子。” “ Angular自动防御各种XSS攻击媒介。它为通过{{}}的简单输出提供自动编码。使用时，Angular会自动清理输出。当使用变量URL或CSS时，Angular还会自动确保在这种情况下可以安全地使用这些值。” innerHTML
其他框架提供了类似的保护，但是据Philippe称，它们的保护范围并不广。尽管如此，使用任何现代框架都可以大大减少开发人员缓解XSS攻击所需的风险。
您可能还会喜欢： Web安全基础知识：每个开发人员都应该知道的内容。
3.避免典型的XSS错误
虽然在使用现代JavaScript框架时不那么常见，但是仍然可以将无意的XSS缺陷编码到您的前端。
数字创新机构Parallax主任詹姆斯·霍尔（James Hall）表示：“假设我们想通过营销电子邮件中的用户名来解决用户的问题。” “添加到查询字符串，然后简单地将其添加到DOM，将是一种快速的方法。”?name=James
例如：
document.querySelector('.tagline').innerHTML = nameFromQueryString
James警告说，使用如上所述的代码意味着，任何人都可以将代码注入您的网站并接管您的工作。他警告说，仅通过将名称更改为
11. HTML编码还不够
WebStoating的联合创始人Ilya Verbitskiy是一家帮助公司创建成功的在线业务的机构，建议特别注意HTML编码。
“如果将用户输入的内容放在HTML标记（例如
或）内，则效果很好
。它也适用于HTML属性中使用的数据。但是，当您在
