Content Security Policy #16

Diex · 2021-04-30T01:59:10Z

Diex
Apr 30, 2021

when trying to set the payment I'm getting:
[Report Only] Refused to frame 'https://www.mercadopago.com.ar/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.mercadolibre.com".

and the screen reading: "Oh, no, algo anduvo mal."

this is the preference mockup Im using (copied from mp docs)


let preference1 = {
  "items": [
      {
          "id": "item-ID-1234",
          "title": "Mi producto",
          "currency_id": "ARS",
          "picture_url": "https://www.mercadopago.com/org-img/MP3/home/logomp3.gif",
          "description": "Descripción del Item",
          "category_id": "art",
          "quantity": 1,
          "unit_price": 75.76
      }
  ],
  "payer": {
      "name": "Juan",
      "surname": "Lopez",
      "email": "[email protected]",
      
      "identification": {
          "type": "DNI",
          "number": "12345678"
      },
      "address": {
          "street_name": "Street",
          "street_number": 123,
          "zip_code": "5700"
      }
  },
  "back_urls": {
      "success": "http://localhost:4200/admin/tags",
      "failure": "http://localhost:4200/admin/tags",
      "pending": "http://localhost:4200/admin/tags"
  },
  "auto_return": "approved",
  "payment_methods": {
      "excluded_payment_methods": [
          {
              "id": "master"
          }
      ],
      "excluded_payment_types": [
          {
              "id": "ticket"
          }
      ],
      "installments": 12
  },  
  "statement_descriptor": "MYBUSINESS",
  "external_reference": "Reference_1234",
  "expires": true,
  "expiration_date_from": "2021-02-01T12:00:00.000-04:00",
  "expiration_date_to": "2022-02-28T12:00:00.000-04:00"
}

I get a valid id for that preference but when I click the button that happens.

Answered by perezpefaur

Sep 6, 2022

Same issue here, the brick is not enabiling:

import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Notification from "./success-notification";

export default function Example({
  service,
  selectedHour,
  selectedDay,
  name,
  lastName,
  mail,
  phone,
  comuna,
  address,
  plate,
  notification,
  carData,
}) {
  const [loading, setLoading] = useState(true);
  const [main, setMain] = useState(null);
  const [message, setMessage] = useState(null);
  const [success, setSuccess] = useState(true);
  const router = useRouter();

  const renderPaymentBrick = async (bricksBuilder) => {
    const settings = {
      initialization: {
        amount: ser…

View full answer

NicholasPedroso · 2021-04-30T15:10:12Z

NicholasPedroso
Apr 30, 2021

Hi @Diex
Could you show us how your HTML code is implemented? Also share how you are calling and instantiating the SDK?

Thanks

0 replies

Diex · 2021-04-30T15:20:38Z

Diex
Apr 30, 2021
Author

Hi. It's an Angular component we're developing right now (we couldn't find anything up to date in that regard) . but for the time being we think the error is related to be logged in to the same account we are trying to make de payment. make sense? thanks for your reply. I'll be in touch for further reference. please do not close. :)

0 replies

Diex · 2021-04-30T16:38:43Z

Diex
Apr 30, 2021
Author

well we can't figure it out. I'm sharing the component code.
let me know if you need some pinpoint regarding angular features and the method used for injecting mercadopago sdk.
please take a look... I appreciate it. thx !!


import {
  AfterViewInit,
  Component,
  ElementRef,
  Inject,
  OnInit,
} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MeliConnectorService } from 'src/app/services/meli-connector/meli-connector.service';

@Component({
  selector: 'app-meli-connector',
  templateUrl: './meli-connector.component.html',
  styleUrls: ['./meli-connector.component.scss'],
})
export class MeliConnectorComponent implements OnInit, AfterViewInit {
  constructor(
    @Inject(DOCUMENT) private document,
    private elementRef: ElementRef,
    private meli: MeliConnectorService // custom backend node api
  ) {}

  // see: https://stackoverflow.com/questions/38088996/adding-script-tags-in-angular-component-template
  ngAfterViewInit(): void {
    const s = this.document.createElement('script');
    s.type = 'text/javascript';
    // https://www.mercadopago.com.ar/developers/en/guides/online-payments/checkout-pro/integration
    s.src = 'https://sdk.mercadopago.com/js/v2';
    const __this = this; //to store the current instance to call
    s.onload = function () {
      __this.afterScriptAdded();
    };
    this.elementRef.nativeElement.appendChild(s);
  }

  afterScriptAdded() {
    this.meli
      .preference1()
      .toPromise()
      .then((pref) => {
        console.log(pref);
        if (typeof window['MercadoPago'] === 'function') {
          const mp = new window['MercadoPago'](
            'TEST-19ee2f2b-251b-48ee-89e3-712e2dba8e60',
            {
              locale: 'es-AR',
            }
          );

          mp.checkout({
            preference: {
              id: pref, // <---------- custom preference from backend
            },
            render: {
              container: '.cho-container',
              label: 'Pagar',
            },
          });
        }
      });
  }

  ngOnInit(): void {}
}

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

0 replies

Diex · 2021-04-30T16:44:33Z

Diex
Apr 30, 2021
Author

I thought changing my servers CSP should work but it's related to the mp script because of the "frame-ancestor 'self'..." make sense? thx!

0 replies

Diex · 2021-04-30T23:42:26Z

Diex
Apr 30, 2021
Author

ok. so I solved it using :

window.open(this.preference.init_point, "_self");

instead of mp.checkout()

so what I need now is to embed that redirecting url in an angular app modal. (another story)

thx.

1 reply

DonArgos Nov 23, 2022

Hey @Diex! I'm having the same issue, did you manage to solve it? If you're not using mp.checkout() how are you setting the preference id?

felipe3dfx · 2021-05-04T20:59:12Z

felipe3dfx
May 4, 2021

Same issue:

CSP configuration:

Content-Security-Policy: style-src-elem 'self' 'unsafe-inline'; style-src-attr 'self' 'unsafe-inline'; font-src 'self' data:; frame-src 'self' https://*.google.com; base-uri 'self'; connect-src 'self' ws: https://*.mercadopago.com https://*.hotjar.com; script-src 'self' 'unsafe-eval' https://*.mercadopago.com https://*.mlstatic.com https://*.google.com http://*.googleapis.com https://*.hotjar.com https://*.intercom.io https://*.intercomcdn.com 'nonce-o7yE/tS66h0UdOPN8wYNKw=='; default-src 'self'; img-src 'self' https://firebasestorage.googleapis.com; style-src 'nonce-o7yE/tS66h0UdOPN8wYNKw=='

Its posible to setup an nonce token?

2 replies

Kneehole May 5, 2021

Hi @felipe3dfx! we really appreaciate your feedback. We are already working on this, we let you know any news ASAP

estefaniadiazartucio May 14, 2021
Collaborator

Hi @felipe3dfx!
We weren't able to reproduce your case. Could you share a snippet of your integration with us?

perezpefaur · 2022-09-06T21:29:11Z

perezpefaur
Sep 6, 2022

Same issue here, the brick is not enabiling:

import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Notification from "./success-notification";

export default function Example({
  service,
  selectedHour,
  selectedDay,
  name,
  lastName,
  mail,
  phone,
  comuna,
  address,
  plate,
  notification,
  carData,
}) {
  const [loading, setLoading] = useState(true);
  const [main, setMain] = useState(null);
  const [message, setMessage] = useState(null);
  const [success, setSuccess] = useState(true);
  const router = useRouter();

  const renderPaymentBrick = async (bricksBuilder) => {
    const settings = {
      initialization: {
        amount: service.ref_price, // valor del pago a realizar
        payer: {
          email: mail,
        },
      },
      customization: {
        paymentMethods: {
          creditCard: "all",
          debitCard: "all",
        },
      },
      callbacks: {
        onReady: () => {
          setLoading(false);
          //document.getElementsByTagName("select")[0].className = "select-MP";
        },
        onSubmit: ({ paymentType, formData }) => {
          // callback llamado cuando el usuario haz clic en el botón enviar los datos
          let service_date = new Date(
            selectedDay.getFullYear(),
            selectedDay.getMonth(),
            selectedDay.getDate(),
            parseInt(selectedHour.name.slice(0, 2)),
            parseInt(selectedHour.name.slice(3, 5))
          );
          let booked_date = new Date().toISOString();
          let post_service = {
            name: name,
            lastName: lastName,
            mail: mail,
            phone: phone,
            comuna: comuna,
            address: address,
            plate: plate,
            service: service.id,
            service_price: service.ref_price,
            service_name: service.name,
            service_date_iso: selectedDay.toISOString(),
            booked_date: booked_date,
            carData: carData,
            status: "Agendado",
            notification: notification,
            service_date: service_date,
          };
          let body = {
            cardFormData: formData,
            post_service: post_service,
          };
          if (paymentType === "credit_card" || paymentType === "debit_card") {
            return new Promise((resolve, reject) => {
              fetch(
                "url/dev/pay",
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify(body),
                }
              )
                .then((response) => {
                  return response.json();
                })
                .then((data) => {
                  if (data.body.status === "approved") {
                    router.push({
                      pathname: "/pago-exitoso",
                    });
                  } else {
                    const requestOptions = {
                      method: "POST",
                      body: JSON.stringify(post_service),
                    };
                    fetch(
                      "https://hooks.zapier.com/",
                      requestOptions
                    );
                    setSuccess(false);
                    setMain("Hubo un error con el pago");
                    setMessage("Por favor intente de nuevo.");
                    setTimeout(function () {
                      setMain(null);
                    }, 5000);
                    reject();
                  }
                  resolve();
                })
                .catch((error) => {
                  const requestOptions = {
                    method: "POST",
                    body: JSON.stringify(post_service),
                  };
                  fetch(
                    "https://hooks.zapier.com/hooks/catch/12223778/behku3p/",
                    requestOptions
                  );
                  setSuccess(false);
                  setMain("Hubo un error con el pago");
                  setMessage("Por favor intente de nuevo.");
                  setTimeout(function () {
                    setMain(null);
                  }, 5000);
                  reject();
                });
            });
          }
        },
        onError: (error) => {
          console.log("peric");
          console.log(error);
          reject();
        },
      },
    };
    window.paymentBrickController = await bricksBuilder.create(
      "payment",
      "paymentBrick_container",
      settings
    );
  };

  async function createBrick() {
    const mp = new MercadoPago(process.env.NEXT_PUBLIC_MP_PUBLIC_KEY, {
      locale: "es-CL",
      advancedFraudPrevention: false,
      trackingDisabled: true,
    });
    const bricksBuilder = mp.bricks();
    await renderPaymentBrick(bricksBuilder);
    //document.getElementsByTagName("select")[0].className = "select-MP";
  }

  useEffect(() => {
    if (router.isReady) {
      createBrick();
    }
  }, [router.isReady]);

  return (
    <>
      {main ? (
        <Notification
          main={main}
          message={message}
          success={success}
        ></Notification>
      ) : null}
      {loading ? (
        <div className="text-center py-3">
          <div role="status" className="flex justify-center">
            <svg
              className="inline mr-2 w-6 h-6 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
              viewBox="0 0 100 101"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                fill="currentColor"
              />
              <path
                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                fill="currentFill"
              />
            </svg>
            <p id="words">Cargando Mercado Pago...</p>
          </div>
        </div>
      ) : null}
      <div id="paymentBrick_container"></div>
    </>
  );
}

16 replies

ihojmanb Oct 25, 2022

@lucmantovani what about secure fields? the main error I get within safari is this:
Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. it corresponds to a file named secure-fields.
I understand that under PCI, card number, expiration date and security code should meet security requirements (so they are considered Secure Fields). those three fields are the ones that don't get rendered in my machine. any ideas on why the secure-fields might not be running succesfully? maybe it has to be with the sdk migration?

lucmantovani Oct 25, 2022
Maintainer

@ihojmanb yes, it is related to Secure Fields and we are looking into that
We just couldn't find how to solve it yet and neither why Safari blocks the Content Security Policy

ihojmanb Oct 25, 2022

@lucmantovani I've updated my MacOS to Ventura (and consequently Safari version from 14 to 16) and I'm not having any problems anymore. Tho it doesn't fix the problem if I have users using a Safari version older than 16 ...

lucmantovani Oct 26, 2022
Maintainer

@ihojmanb glad it worked!
Yes, unfortunately it does not solve the problem, but we'll work on that

DonArgos Nov 24, 2022

Hey Guys, same issue here, do you know what @Diex meant here?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content Security Policy #16

{{title}}

Replies: 7 comments 19 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Content Security Policy #16

Replies: 7 comments · 19 replies

Diex Apr 30, 2021 Author

Diex Apr 30, 2021 Author

Diex Apr 30, 2021 Author

Diex Apr 30, 2021 Author

estefaniadiazartucio May 14, 2021 Collaborator

lucmantovani Oct 25, 2022 Maintainer

lucmantovani Oct 26, 2022 Maintainer

Replies: 7 comments 19 replies

Diex
Apr 30, 2021
Author

Diex
Apr 30, 2021
Author

Diex
Apr 30, 2021
Author

Diex
Apr 30, 2021
Author

estefaniadiazartucio May 14, 2021
Collaborator

lucmantovani Oct 25, 2022
Maintainer

lucmantovani Oct 26, 2022
Maintainer