In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws er

Posted 2023-02-22

【中文标题】In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error

【英文标题】：

【发布时间】：2017-01-13 02:05:37

【问题描述】：

我正在实施 PayPal 的 In-Context Checkout 并正在使用 Advanced In-Context javascript 设置 (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)

我的应用是一个 React 应用。所以我不能像他们建议的那样使用PP API，那只是在他们按钮下页面某处的<script> ... </script>标签之间抛出一个代码。我的 React 组件具有我需要在 PP 函数调用中发送到服务器的状态和数据。所以我把PP代码放在componentDidMount方法中。出于某种原因，PP 抛出了这个错误：

checkout.js:4734 Uncaught SecurityError: 阻止了来源为“http://example.com:3000”的框架访问来源为“https://www.sandbox.paypal.com”的框架。请求访问的帧具有“http”协议，被访问的帧具有“https”协议。协议必须匹配。 （匿名函数）@checkout.js:4734

checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE

代码如下：

componentDidMount() 
    window.paypalCheckoutReady = function() 
        paypal.checkout.setup(config[NODE_ENV].ppMerchantID, 
            locale: 'en_US',
            environment: 'sandbox',
            buttons: [
                
                    container: 'checkoutBtnContainer',
                    type: 'checkout',
                    color: 'gold',
                    size: 'medium',
                    shape: 'pill',
                    click: (ev)=>
                        paypal.checkout.initXO();
                        $.post('/checkout', 
                            checkoutData: this.props.checkoutData,
                        )
                        .done(res => 
                            paypal.checkout.startFlow(res.link);
                        )
                        .fail(err => 
                            paypal.checkout.closeFlow();
                        );
                    
                
            ],
        );
    ;
,

我知道跨域政策。我不明白为什么会这样。如果我将代码放在<script> ... </script> 标签之间的页面上，为什么代码可以正常工作，但是如果我在我的 React 组件中使用它，PP 会抛出错误。这是什么原因？是 React 的错还是 PayPal 的错？

【参考方案1】：

UPD：不，以下不是问题的解决方案。 Paypal 的checkout.js 脚本有时会抛出错误。

但是，它解决了this 问题

显然，

1) 没有this:

window.paypalCheckoutReady = function() 
    // wrong this is here

我改成：

window.paypalCheckoutReady = () => 
    // correct this is here now

我不喜欢.bind(this)。

2) 我删除了<form /> 标签并改为设置纯<div>：

// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>

// after
<div id="checkoutBtnContainer"></div>

我不知道为什么以及如何，但现在一切正常。