javascript - 如何安全地跨域将表单从静态 html 站点提交到服务器端后端？

Question

我想创建一系列将托管在 Amazon S3 上的静态 HTML 站点。

静态站点将具有表单。我的计划是将表单数据发布/ajax 提交到托管在不同域上的服务器端应用程序。服务器端应用程序会将数据存储在数据库中以供将来参考，并将提交的数据通过电子邮件发送给相关人员。

从表面上看，这很简单，HTML 表单只需要将数据 POST 到服务器端脚本，类似于 google forms/wufoo/formspree 等。

我担心的是这对安全的影响。该帖子将来自静态站点的跨域，这似乎使 CSRF 难以在流行的 Web 框架中实现。我已经阅读了许多关于 CSRF/CORS/Authentication 的博客文章，但并不清楚。

通过研究 formspree.io 的源代码，他们似乎检查了referer 和 origin 标头以验证表单提交来自它应该是的网站和已注册的网站。但是我知道这些可以被欺骗吗？

由于静态站点上的任何 javascript 代码都可以被读取和反向工程，API 样式的身份验证似乎很困难......

还是我想太多了，如果我通过 SSL 发布表单，验证表单数据服务器端，根据表单检查引用/来源标头，它应该足够安全吗？

TLDR；对于将表单数据发布到服务器端后端以存储在数据库中和发送电子邮件的静态 HTML 站点，我需要采取哪些安全步骤？

提前致谢！

标签： javascriptformscorscsrfstatic-site

Answer 1

最优解

在您的情况下，最佳解决方案似乎是执行以下操作：

1. 实施 Recaptcha。
2. 首先将请求发送到您自己的脚本，验证验证码，然后转发请求。
3. 仅添加 Access-Control-Allow-Origin 仅您的 HTML 的来源。有用的问题

CSRF 保护

事实上，如果您只能访问客户端，那么构建一个安全的应用程序是非常困难的。如果您发布的服务没有内置的 CSRF 系统，如果您在 HTML 页面中添加一个 recaptcha 并创建一个将接收表单字段的简单 php 脚本，这将是一个很好的解决方案，验证recpatcha 并将表单字段提交到您想要的任何目的地。

通过令牌的 CSRF 保护也可以解决问题，如果您最终首先提交到自己的脚本，它实际上是一种干净的编码解决方案，但是，在静态 HTML 页面中实现它还是有点困难。（您需要通过 Javascript 或 php 脚本生成它，将其存储在您的会话中，然后在您的后端脚本中验证它）但如果您能够编写代码，我会推荐它。

• 在这两种情况下，您都需要先提交到您自己的脚本，然后通过 CURL 转发请求。

验证标头

在您的后端脚本中，您可以验证引用者和来源，以确保请求不是来自 HTML 表单以外的其他来源。

概括

1. recaptcha 将防止任何人对您的用户进行 CSRF 攻击。
2. 如果攻击者试图找到一种解决方法来检查来源和引用者，他们可能会使用 CURL 之类的东西，recaptcha 也会阻止他们这样做。
3. Access-Control-Allow-Origin 实现将阻止攻击者通过 javascript 向您的页面提交数据。
4. 首先提交到您自己的脚本还会阻止任何人知道您在哪里提交这些数据，这将使他们更难执行攻击。

虽然验证码不是一个非常用户友好的解决方案，但如果您有能力编写 CSRF 保护系统，则需要通过 javascript 或发送生成用户会话唯一令牌的 ajax 请求来完成，然后您可以验证该令牌在您的其他 PHP 页面中，但您需要实现验证码以防止垃圾邮件。