React，在表单中加载脚本（mercadopago）

Posted 2023-03-24

【中文标题】React，在表单中加载脚本（mercadopago）

【英文标题】：React, loading a script inside a form (mercadopago)

【发布时间】：2020-12-05 19:56:02

【问题描述】：

我正在尝试实施一些支付系统 (MercadoPago)。

根据文档，它只是粘贴这个：

<form method="POST">
  <script
    src="https://www.mercadopago.com.pe/integrations/v1/web-payment-checkout.js"
    data-preference-id="589788715-2e52aeec-8275-487c-88ee-1a08cff37c08"
  ></script>
</form>

将其粘贴到纯 html 文件中可以正常工作：出现一个按钮并单击它会打开一个模式，以便按预期使用信用卡付款。但是，这在 React 中不起作用，因为它是动态加载脚本的。因此，我尝试使用效果挂钩在加载时插入<script>：

const App = () => 
  const setMercadoPagoPreferences = async () => 
    const script = document.createElement('script');
    script.src =
      'https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js';
    script.async = true; // commenting or uncommenting seems to have no effect
    script.setAttribute(
      'data-preference-id',
      '589788715-2e52aeec-8275-487c-88ee-1a08cff37c08'
    );
    document.getElementById('mercadoForm').appendChild(script);
  ;

  useEffect(() => 
    setMercadoPagoPreferences();
  , []);

  return <form action='/procesar-pago' method='POST' id='mercadoForm' />;
;

这似乎正确加载了脚本，因为支付按钮被附加到页面上。但是，单击它会打开一个模式，上面写着“哦，不，发生了不好的事情”。这不会发生在我上面的 .html 示例中；所以这一定是因为 React 如何加载脚本或类似的东西。它不适用于开发版或生产版。

编辑：按照建议，我尝试使用 refs 而不是直接附加子级，但这似乎没有任何影响，它仍然不起作用。

【参考方案1】：

我不知道这个框架，但也许就是这样：看起来这家伙有类似的问题right here。

我认为有问题，因为脚本没有按时加载。所以也许让我们试试这个：

script.onload = () => 
  document.getElementById('mercadoForm').appendChild(script);
;

此外，react ref 中有内置机制，例如 HERE 而不是 document.getElementById

【讨论】：

另一个人确实有类似的问题，但它是不同的，因为他的脚本根本没有加载，我的是（当一个按钮出现时），只是不正确（因为点击它会弹出一个错误） .此外，script.onload 运行 脚本已附加到文档之后，因此您的建议不起作用。

【参考方案2】：

如果不是mercadolibre，你的技术可能会奏效。 显然，mercadolibre 不允许使用您尝试加载的页面。这就像你试图在 Iframe 中加载 mercadolibre，他们可能使用 CSP header 阻止了它。具体来说，他们将 Content-Security-Policy 标记设置为 frame-ancestors 'self'。这是一个安全限制标准，不允许在元素 Iframe 中使用来自该域的页面。

【讨论】：

那么有没有办法克服呢？也许是一些 hacky 的东西。

还有一些其他方法可以绕过 CSP 标头的解释，但我想您正在构建一个一般用途的网站。我建议您关注 mercadolibre 文档，了解如何集成他们的插件。

他们的文档假设我使用的是纯 html 文件，但我想将它集成到我的 SPA 中做出反应。他们的文档也没有提到任何 CSP 标头。