javascript - PayPal JavaScript SDK 按钮打开大约 :blank#blocked window in Django template but not in local HTML file

Question

我一直在尝试在我的 Django 网站上集成 PayPal 按钮，但我一直遇到这个问题，其中 PayPal 弹出窗口显示为 about:blank#blocked。我可以在控制台看到这个错误:

popup_open_error_iframe_fallback 
{err: 'n: Can not open popup window - blocked\n    at Ie (…owser=false&allowBillingPayments=true:1342:297830', timestamp: '1644780862712', referer: 'www.sandbox.paypal.com', sdkCorrelationID: 'f12370135a997', sessionID: 'uid_d36969c1b2_mtk6mja6mzy', …}

我不明白的是，如果我只是在浏览器中打开 HTML 文件本身，问题就不存在了……脚本如下所示:

<!-- Set up a container element for the button -->
<div id="paypal-button-container" class='text-center mt-2'></div>

<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=blahblahmyid&currency=EUR"></script>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({
        locale: 'it_IT',
        style: {
            color: 'gold',
            shape: 'rect',
            layout: 'vertical',
            label: 'pay'
        },

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '88.44'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                // Successful capture! For demo purposes:
                console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                var transaction = orderData.purchase_units[0].payments.captures[0];
                alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                // Replace the above to show a success message within this page, e.g.
                // const element = document.getElementById('paypal-button-container');
                // element.innerHTML = '';
                // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                // Or go to another URL:  actions.redirect('thank_you.html');
            });
        }


    }).render('#paypal-button-container');
</script>

有什么问题？我不明白。

Answer 1

django 4.0 中有一个新功能，它是在较新的浏览器中添加 COOP header 之后，据我了解，它会阻止远程站点在相同的浏览上下文中打开窗口。

SECURE_CROSS_ORIGIN_OPENER_POLICY 在 django 中的默认设置将浏览上下文隔离到当前文档来源。将其设置为 same-origin-allow-popups 允许在当前上下文中打开 Paypal 弹出窗口。

见 https://docs.djangoproject.com/en/4.0/ref/middleware/#cross-origin-opener-policy

TLDR;设置 SECURE_CROSS_ORIGIN_OPENER_POLICY='same-origin-allow-popups'