我正在构建一个包含表单的Web应用程序。目前,用户将数据输入到此表单中,该表单保存在我的数据库中。然后,用户打开第三方网站,在该网站中将完全相同的数据的子集输入到该网站上的表单中。
理想情况下,在我的网站上提交表单时,我想在iframe中打开第三方网站,其表格预填充已从我的表单中收集的数据。显而易见的目标是防止用户必须两次输入相同的数据,首先是在我的表单上,第二个是在第三方表单上。另一个好处是我的网站缺乏关注,因为用户需要在第三方网站上提交表单后完成其他步骤。
我知道有办法在其他网站上预先填写表格。例如,Google表单允许通过将值传递到查询字符串中相应输入的名称属性来预填充表单。这是我为证明这一点而创建的一个例子(请注意查询字符串。):https://docs.google.com/forms/d/e/1FAIpQLScqua9AJLvRgCuH8o-XfAGeZcbue9ND7a4z2JM5EcAuVqAwag/viewform?vc=0&c=0&w=1&entry.2020941857=Whatever+and+whatever&entry.473490210=foobar
不幸的是,“目标”网站似乎没有以类似的方式处理传入的GET请求,这显然应该不足为奇。当然,它并不总是那么容易。我甚至无法通过使用Chrome DevTools操纵DOM来操纵目标网站表单中输入的值(并不是说我会真正理解这对我有什么帮助,即使我可以)。
此外,表单甚至不使用action属性提交。相反,这里是我公认的不明白的形式和按钮元素(为简洁起见省略了一些属性):
<form name="theForm" ng-submit="submitForm(theForm.$valid)"
no-submit-on-enter="" novalidate="">
<button class="btn btn-full ng-binding" type="submit" id="send-form"
track-event="{category: 'theFormSubmit', action: 'clicked'}"
skip-click-tracker=""> Submit </button>
</form>
当我使用表单提交信息时,我也尝试使用DevTools来查看标题。单击按钮时标题似乎没有变化。实际上,单击按钮时,“网络”选项卡中似乎根本没有任何活动。我根本没有看到任何“表格数据”。但是我可能误解了我所看到的东西。
对于它的价值,似乎目标很大程度上依赖于Angular.js,我几乎一无所知,所以我不确定它是否相关。我也知道iframe不能被我的网站上的javascript操纵,除非它是相同的域,但它不是。我简要地研究了phantom.js,但是(从我理解的很少)看来,在目标站点上维护用户的会话会出现问题。需要重新加载,这将消除预先填充的数据,从而破坏整个目的。
无论如何,我想知道是否有某种方法可以使用PHP卷曲或任何东西实现我的目标。作为旁注,如果不是很明显:我无法访问目标网站的完整源代码,也无法获得对它的访问权限。
更新:使用DevTools网络选项卡,我再次尝试提交表单,其中一个输入是裘德的名字。我终于能够通过“Jude”过滤来隔离包含信息的标题。编辑后的标题信息和请求网址如下:
我觉得我终于到了某个地方。基于以上所述,我觉得我实际上可以将表格数据提交给第三方网站(回避实际输入和提交该网站的表格)。因为我正在使用UI,所以我可以看到表单已成功提交,并且我有关于如何处理该信息的视觉提示。但是,HTTP 204标头(No Content)似乎表明,如果我以编程方式发送信息,则不会返回任何内容来分析表单的成功或失败以及如何处理信息。最终,这可能都是一个红鲱鱼,因为我不知道如何处理它的browser_session_id部分。
如果您使用的是iframe,那么您可能会运气不好,因为浏览器跨域策略会拒绝您的JavaScript篡改IFRAME中的DOM。
如果目标网站足够简单,您可以通过服务器代理整个表单请求和响应,cookie和标题(特别是如果您使用的是PHP),然后您就可以免于交叉原始问题,因为浏览器会将它们视为一个起源
然后你可以访问iframes DOM
window.frames[0]...
或角度范围使用
angular.element("#appname").scope()