Question

我正在尝试从服务器端渲染付款页面。我正在Web上使用React，我的服务器是通过HTTPS托管的，并且我正在尝试使用IFrame在React应用程序上加载付款页面。由于我需要对服务器进行API调用，并且必须使用标头进行身份验证，因此我正在调用API和它返回的html（用于IFrame的srcDoc属性）。

// example code
// in React 
async example() {
    const htmlContent = await makeAPICall();
    // htmlContent is the html from response
    this.setState({"html": htmlContent})
}

render() {
    if (this.state.html) {
       return (
            <iframe
            srcDoc = {this.state.html}
            title, width, height
            ></iframe>
        )
    } else return null
 }

我正在使用数据条来收集付款信息。在我进行开发时，这工作正常。我调用API，将HTML作为srcdoc异步加载到iframe中，然后在iframe中继续。但是，当我使用实时密钥在生产环境中进行部署时，此Iframe无法条带化加载付款信息，仅显示一条神秘消息“所有付款都必须通过HTTPS进行”。现在，我的服务器正在使用HTTPS，Web是从服务器本身托管的，通过HTTPS通过相同的来源进行通信，但是由于某些原因，Iframe本身无法让Stripe加载内容。

我曾尝试弄乱Iframe属性（考虑到我没有使用 src 属性），但尚未解决。我被困在生产中-付款页面被阻止。感谢您能获得的所有帮助。

谢谢

我尝试在本地主机上使用ngrok复制此问题。使用我遵循的方法，我无法使用 srcdoc 属性加载它。对我有用的是，当我在 src 属性中提供Iframe的URL时，但这对我不起作用，因为我需要在我发出的每个请求中传递标头。

期望使用Iframe和srcDoc从同一源通过HTTPS加载条带，但这样做失败。

Answer 1

考虑到我没有使用src属性

执行此操作时，在这种情况下，浏览器会将iframe中文档的URL /来源设为about:blank或about:srcdoc。您可以在代码段中看到这一点。 https://html.spec.whatwg.org/multipage/iframe-embed-object.html#otherwise-steps-for-iframe-or-frame-elements

<iframe srcdoc="
<script src='https://js.stripe.com/v3/'></script>
<script type='text/javascript'>
window.onload = function(){
  var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
  document.getElementById('display').textContent = window.location.href;
}
</script>
<p id='display'></p>
"></iframe>

存在问题的原因是，Stripe的JavaScript不知道您的页面确实是在https://example.com上加载的，因为它可能会查看它加载的窗口位置并使用它来显示您看到的错误（因为有很好的理由仅通过https托管付款表单）。如果您在控制台上查看上述片段，则可以看到Stripe的JavaScript发出警告，因为它认为未通过https加载。大概如果我开始使用生产密钥，警告会升级为错误。

看起来像其他人遇到了similar issue，而解决方法是使用src属性并更改设计以适合自己。可能您可以将src属性设置为一个中间页面，该页面可将服务器中的内容动态添加到iframe（或直接在父页面上执行此操作，因为您不需要框架），或者更改后端服务器使用更多基于标准Cookie /会话的身份验证，而不是自定义标头。

尽管位于同一域中，但iframe仍未通过HTTPS集成（与stripe）

1 个答案: