0

Integre esta api y funciona correctamente pero tengo un problema y es que cuando le doy al boton que empieza el proceso de pago, no abre la ventana modal en el mismo proyecto sino que lo abre en una nueva pestaña y en mi proyecto en la consola aparece este error.

[Report Only] Refused to frame 'https://www.mercadopago.com.co/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".

Al parecer el problema es con como esta configurado el CSP(content security policy) en mi sitio, pero honestamente es la primera vez que me sucede y no se exactamente como modificarlo. Al parecer es con las cabeceras en las peticiones, pero no me ha funcionado y la poca informacion que hay en internet no me ha ayudado hasta el momento, si alguno supiera. gracias.

Este es el codigo de lo que he intentado

export const mercadoPagoPayment = async (req, res) => {
  res.setHeader(
    "Content-security-policy",
    "default-src 'self' *.mercadolibre.com"
  );
  req.header(
    "Content-Security-Policy",
    "default-src 'self' *.mercadolibre.com"
  );

  let preference = {
    items: [
      {
        title: "Productos",
        unit_price: req.body.price,
        quantity: 1,
      },
    ],
    back_urls: {
      success: "http://localhost:3000/feedback",
      failure: "http://localhost:3000/feedback",
      pending: "http://localhost:3000/feedback",
    },
  };

  mercadopago.preferences
    .create(preference)
    .then(function (response) {
      global.id = response.body.id;
      res.json({ id: response.body });
    })
    .catch(function (error) {
      console.log(error);
    });
};

Frontend

  const handlePayment = () => {
    fetch('/products/payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Content-security-policy': "default-src 'self' *.mercadolibre.com" },
      body: JSON.stringify({ price: getSubTotal() })
    })
      .then(res => res.json())
      .then(data => {
        const mp = new MercadoPago('TEST-d59a2f45-8c61-4a7b-92db-e5a9e09956d7', {
          locale: 'es-CO'
        });
        mp.checkout({
          preference: {
            id: data.id.id
          },
          autoOpen: true,
        });
      })
  }

Dejo dos fuentes importantes que encontre.

Error al integrar SDK de MercadoPago en React

https://github.com/mercadopago/sdk-js/discussions/75

1 respuesta 1

1

Puedes probar usando el siguente plugin de chrome Content Security Policy (CSP) Generator, te va dar una lista de las políticas faltantes, las agregas en el head dentro de un metatag

Ejemplo:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self'; 
    script-src 'report-sample' 'self' https://http2.mlstatic.com/storage/event-metrics-sdk/js https://sdk.mercadopago.com/js/v2 https://www.mercadopago.com.mx/; 
    style-src 'report-sample' 'self'; 
    object-src 'none'; base-uri 'self'; 
    connect-src 'self' https://events.mercadopago.com; 
    font-src 'self' data:; 
    frame-src 'self' https://www.mercadopago.com.mx; 
    img-src 'self'; 
    manifest-src 'self'; 
    media-src 'self'; 
    worker-src 'self';">

Si ya tienes el metatag solo agrega las faltantes.

Tal vez eso pueda ayudarte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.