网站安全知识看看国外怎么说？

网站安全性：改善前端安全性且不被黑客入侵的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缺陷编码到您的前端。 

数字创新机构Paralla/upload/ad_content/xuanchuantu-1.jpg主任詹姆斯·霍尔（James Hall）表示：“假设我们想通过营销电子邮件中的用户名来解决用户的问题。” “添加到查询字符串，然后简单地将其添加到DOM，将是一种快速的方法。”?name=James

例如：

document.querySelector('.tagline').innerHTML = nameFromQueryString

James警告说，使用如上所述的代码意味着，任何人都可以将代码注入您的网站并接管您的工作。他警告说，仅通过将名称更改为，攻击者就可以设计一个URL，该URL可以使伪造的付款页面看起来像是从您的SSL加密网站提供的。

4.考虑可信类型

网站安全：可信类型

W3C的Trusted Types。

即使采取诸如输出编码或清理等对策，对于面向Web的应用程序，XSS攻击仍然是一个主要问题。开源安全公司Snyk的开发者，Node.js安全工作组成员Liran Tal警告说，诸如Angular或React之类的现代前端框架并非完全不受它的影响。

Liran建议使用Google的安全专家Krzysztof Kotowicz和Mike Samuel 提倡的一种新的浏览器API Trusted Types，以利用内容安全策略规范（请参阅下文，第12页）来定义与敏感API一起使用的数据源模板，从而解决XSS问题。如水槽。innerHTML

Trusted Types规范仍然需要完善，但是Liran要求开发人员选择加入并开始使用此安全API。 

他说：“幸运的是，我们在前端社区中看到了认可和采用的迹象。” “例如，React框架最近合并了一个拉取请求，以在新版本中进一步扩展对Trusted Types的支持。”

您可能还会喜欢： 业内人士对Shopify所采用技术的关注。

5.考虑使用te/upload/ad_content/xuanchuantu-1.jpgtContent代替innerHTML

为了防止XSS攻击，您可以使用DOMPurify之类的清理库（请参阅下面的11下），但是前端顾问Zell Liew建议，如果仅更改文本，则可以使用te/upload/ad_content/xuanchuantu-1.jpgtContent代替innerHTML。 

“假设您要从输入字段中获取文本值，然后将该文本值输出到DOM中。这是获取文本值的代码：

const value = input.value

但是用户可以尝试输入恶意代码，例如以下代码段：

如果使用innerHTML，则将创建元素并运行onerror处理程序。这就是XSS开始的地方。”

Zell建议te/upload/ad_content/xuanchuantu-1.jpgtContent改为使用，因为它只能输出文本，并且不会生成任何HTML。 

“如果不生成HTML，就无法插入JavaScript，” Zell解释道。您会在DOM中看到，但JavaScript无法运行。

6.分隔您的应用程序 

Web应用程序通常构建为单个应用程序，并在浏览器中的单个来源中部署。例如，在中运行的应用程序https://app.e/upload/ad_content/xuanchuantu-1.jpgample.com提供了公共部分，经过身份验证的部分甚至管理员功能。但是，Philippe De Ryck警告说，对应用程序公共部分的成功攻击也会自动影响其他部分，从而可能造成重大损害。

他解释说：“在后端，整体应用程序通常分为较小的组件，每个组件单独运行。” “我们可以将类似的模式应用于前端应用程序。例如，我们可以将前端应用程序分为一个公共部分，一个经过身份验证的部分和一个管理部分。通过在一个单独的部署每个部分起源，例如，https://public.e/upload/ad_content/xuanchuantu-1.jpgample.com，https://users.e/upload/ad_content/xuanchuantu-1.jpgample.com，和https://admin.e/upload/ad_content/xuanchuantu-1.jpgample.com-我们可以确保浏览器彼此隔离这些应用程序“。

Philippe相信，分区化是减少客户端漏洞影响的关键。“适当的分隔将防止应用程序公共部分的XSS漏洞也自动损害用户信息。”

您可能还会喜欢： 解构Monolith：设计可大化开发人员生产力的软件。

7.使用Google跟踪代码管理器时要小心

网站安全：谷歌标签管理器

在为个人和企业授予对Google跟踪代码管理器的访问权限时，您应该非常小心。

使用Google跟踪代码管理器，可以轻松添加最新的跟踪脚本，支持团队想要的聊天机器人以及用于用户分析的Hotjar。 

但是James Hall指出，虽然很想允许组织中的每个人（有时甚至是外部）访问您的Google跟踪代码管理器，但您仍需要注意。

他警告说：“如果某个Google帐户被黑客入侵，则可以向您的网站添加任意JavaScript。” “复杂的攻击可能会将您的用户带到伪造的付款页面，让他们完成订单，将钱汇给其他人！”

8.使用第三方脚本更具选择性

即使不损害对Google跟踪代码管理器的访问权限，您选择添加的跟踪脚本本身也可能会遭到黑客入侵。在基于JavaScript的Web应用程序中使用第三方库和开放源代码组件是一种常见的做法，但是它使您暴露出只能在一定程度上控制的漏洞。

“如果您将“每周风味”聊天窗口小部件添加到您的站点，则任何有权访问其服务器的人现在都可以修改您的网站，” James Hall警告说。“这发生在英国航空公司和Ticketmaster包括一个名为Feedify的推送通知库时。”

James建议，对哪些第三方可以访问您的页面有更多选择，这也将有助于您遵守欧盟的《通用数据保护条例》（GDPR）。您所提供的信息越少，使人们在您的隐私政策中了解的信息就越少，这意味着违反GDPR的可能性就更低。 

James也建议不要考虑让Shopify为您托管它，而不是让其他第三方托管您的JavaScript框架。 

他说：“与自动热链接最新版本的开源依赖项相比，他们在使您免受任何困扰方面要做得更好。”

您可能还会喜欢： 应用程序开发人员需要了解的GDPR。

9.审核您的依赖项

您可能会使用许多本地构建工具来创建前端，例如SCSS插件。James Hall建议确保您定期运行npm audit以显示易受攻击的软件包的列表并升级它们，以避免无意中将安全性问题包括到内置的JavaScript文件中。

如果使用GitHub，它现在将标记易受攻击的依赖关系，并且还有Snyk之类的替代服务，可以自动检查源代码并打开请求请求以更改版本。

最后，如果您要为无法访问Google跟踪代码管理器的客户端构建主题，James建议使用BuiltWith之类的工具进行快速审核。

网站安全性：buildwith

BuiltWith使您能够找出网站完全使用哪种工具和技术。

10.将子资源完整性用于第三方CDN托管

但是，有时您无法避免使用第三方。Snyk的Liran Tal指出，我们经常使用外部托管的字体和CSS库，并将它们导入具有内容传送网络（CDN）的Web应用程序中。 

他问道：“如果有人访问这些库的代码并将其替换为自己的恶意版本，将会发生什么？” “如果网络介质被破坏或发现不安全，将会发生什么？攻击者获得对构建服务器或CDN交付的我们自己代码的缓存或存储的访问权限，甚至可能损害我们自己的源代码！”

为了帮助解决此问题，Liran建议使用Subresource Integrity，该规范可提供网页中所使用资源的完整性的证明，并传达其内容未被篡改。使用完整性属性声明资源，该属性利用在功能上使用资源之前浏览器验证的加密哈希。

James Hall同意，并说Subresource Integrity对于确保资产与您打算包含的资产相同非常有用。这是一个校验和，可确保您的脚本与以前的相同：

11. HTML编码还不够

WebStoating的联合创始人Ilya Verbitskiy是一家帮助公司创建成功的在线业务的机构，建议特别注意HTML编码。 

“如果将用户输入的内容放在HTML标记（例如

。它也适用于HTML属性中使用的数据。但是，当您在标记内，URL内或事件处理程序（如onclick或）中呈现用户输入时，HTML编码将无济于事onerror。”

Ilya指出，例如，以下代码段很危险： 

Sample Link

这很危险，因为  Model.UserInput可能是alert(document.location)或： 

eval(String.fromCharCode(105,102,40,33,119,105,110,100,111,119,46,120,41,123,97,108,101,114,116,40,100,111,99,117,109,101,110,116,46,108,111,99,97,116,105,111,110,41,59,119,105,110,100,111,119,46,120,61,49,59,125))

另一个危险代码可能如下所示：

Sample Link

在这种情况下，Model.UserLink可能是： 

javascript:eval(String.fromCharCode(105,102,40,33,119,105,110,100,111,119,46,120,41,123,97,108,101,114,116,40,100,111,99,117,109,101,110,116,46,108,111,99,97,116,105,111,110,41,59,119,105,110,100,111,119,46,120,61,49,59,125))

这将给用户带来麻烦，因为一旦用户单击脚本，脚本将被执行。

Ilya承认：“编写所有编码器以防止XSS并非易事，”。“首先，该库应支持不同的执行上下文。它必须了解浏览器支持的不同编码，并且必须意识到必须过滤掉的潜在危险HTML属性。”

Ilya建议使用已经实现了推荐的XSS保护技术并且免费提供的库：

DOMPurify：易于使用，因为它只有一种方法可以清理用户的输入。它的默认策略已被多个用户证明，带有自定义规则的选项，并支持HTML5，SVG和MathML。

secure-filters：Salesforce的此库提供清理HTML，JavaScript，内联CSS样式和其他上下文的方法。如果您想在其他地方使用用户输入，例如生成CSS或JavaScript，则特别有用。

12.实施内容安全策略

网站安全：内容安全政策

内容安全策略（CSP）。

“分层安全性”或“分层防御”是网络安全领域中众所周知的方法，描述了结合多种安全控制措施来保护数据的做法。Ilya Verbitskiy说，它也适用于前端安全性。他建议：“即使该站点因XSS漏洞而受到损害，我们也必须将用户损失降至最低。”

“ XSS攻击的通常结果是将脚本注入到易受攻击的网页中，” Ilya解释说。“脚本要么从本地存储和会话存储中窃取用户的cookie和数据，要么注入键盘记录器，甚至进行加密货币挖掘。大多数攻击都需要在黑客的服务器和受害者之间进行通信的渠道。通信渠道可以是AJAX呼叫，标签，iframe或网络套接字。您的目标应该是打破沟通渠道。”

所有现代浏览器都已经实现了以下解决方案：内容安全策略（CSP），这是一种附加的安全层，有助于检测和缓解某些类型的攻击，包括XSS和数据注入攻击。要启用CSP，您需要配置Web服务器以返回Content-Security-PolicyHTTP标头，该标头通过声明允许加载哪些资源来帮助缓解XSS风险。例如： 

Content-Security-Policy: default-src 'self'; child-src child-src 'none'; img-src https://cdn.e/upload/ad_content/xuanchuantu-1.jpgample.com 'self'; object-src 'none'

如果您的网站的网址是https://e/upload/ad_content/xuanchuantu-1.jpgample.com，CSP块的使用，以及标签，以及框架和网络工作者。该浏览器将只加载图像https://e/upload/ad_content/xuanchuantu-1.jpgample.com和https://cdn.e/upload/ad_content/xuanchuantu-1.jpgample.com。所有其他资源（例如脚本和样式表）都必须托管在上https://e/upload/ad_content/xuanchuantu-1.jpgample.com。

另外，您可以使用HTML页面中的标记定义策略：

内容安全策略提供了许多指令，可帮助您定义最适合您的项目的策略。一些使用最广泛的指令包括default-src，child-src，script-src，style-src，img-src，connect-src等。Ilya建议确保始终将default-src定义为后备忘记了指令。

您可能还会喜欢： 2019年的移动设计趋势。

13.注意要暴露的东西

最后，请务必牢记要在代码中暴露给前端的数据。 

“在某些情况下，在产品页面上使用产品JSON可能会有所帮助，但这也意味着您正在向前端显示应该是私人商人的数据，” Taproom Agency创始人Kelly Vaughn警告说。“一种好的做法是将这种数据存储在一个元字段中，因为必须手动赋予每个的元字段以允许通过API读取的权限。”

而且，如果您使用源代码控制进行主题开发（例如GitHub），请始终隐藏API密钥，Kelly建议。使config.yml或.env文件在GitHub上可用，任何人都可以访问商店的主题（以及通过私有应用程序允许的任何其他权限）。也仅允许访问您真正为应用程序所需的功能。如果您仅使用私有应用程序来构建或更改主题，则应禁止所有访问权限（读写主题除外）。

安全促进信任

安全比以往任何时候都重要。无论是大型公司还是小型站点，任何人都可能发生违反行为。我们需要注意不要泄露客户数据，并且需要了解部署网站或应用程序时可能发生的许多攻击以及可能发生的错误。现代JavaScript框架承担了很多风险，但不能完全依靠它们。

客户期望他们的在线体验是安全的，并且他们提供的任何信息都不会被他们所期望的方式窃取或使用。客户反过来希望您保护他们的站点，他们的数据和他们的客户。按照各种方法自己保护站点安全并减少本文中探讨的漏洞，您将赢得信任并向您的客户表明您非常重视安全性。