Skip to content
GitLab
Next
Closed
Issue created by Vamsi Vempati@vvempati1️⃣Developer

Payment form not rendered on account validation modal from Runner configuration

Problem

Payment form to add credit card details is not rendered on account validation modal from Runner configuration

Screenshot_2023-01-09_at_3.50.30_PM

Error logs

Refused to frame 'https://www.zuora.com/' because it violates the following Content Security Policy directive: "frame-src 'self' https://www.google.com/recaptcha/ https://www.recaptcha.net/ https://content.googleapis.com https://content-cloudresourcemanager.googleapis.com https://content-compute.googleapis.com https://content-cloudbilling.googleapis.com https://*.codesandbox.io https://customers.gitlab.com".

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.zuora.com') does not match the recipient window's origin ('null').

From the iframe element

<script jstcache="0">
  const pageData = {
    "details": "Details",
    "errorCode": "ERR_BLOCKED_BY_CSP",
    "fontfamily": "system-ui, sans-serif",
    "fontsize": "75%",
    "heading": {
      "hostName": "www.zuora.com",
      "msg": "\u003Cspan jscontent=\"hostName\">\u003C/span> is blocked"
    },
    "hideDetails": "Hide details",
    "iconClass": "icon-generic",
    "language": "en",
    "suggestionsDetails": [],
    "suggestionsSummaryList": [],
    "summary": {
      "failedUrl": "https://www.zuora.com/apps/PublicHostedPageLite.do?method=requestPage&host=https%3A%2F%2Fgitlab.com%2Ftest-one3%2FTest%2F-%2Fsettings%2Fci_cd&fromHostedPage=true&jsVersion=1.3.1&signature=<signature>&token=<id>&id=8a1297307fd4f423017ffbf4f1300200&style=inline&field_accountId=null&field_passthrough1=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA1anDHYYwhBXUC5mnOhhgdFTuG0w85zW2vJBX4UfpcJZGqoCqdEzSRYa2b3EP6%2BXd7MPI%2BYqFqxDaNmv7OGc8osTjL%2BYZlrUhsFyErF5zI4RZOtsAJ%2BpGXNVWJXPcN3q8QnMfBN8QiYDU7utbys2giIA2oG5XamQH43lbSAPTsTiEW9C55s10uMCy7ABE8sfNJCfz5JwxoE4MGW%2BSmaOqUEvJfB3462l8CKK9%2Bjvhw2Xc0Tu7eXzUt4RyZxkFUUMt6KCD0EChMV3f7DmKPXZeonsgqwHXIcNLE4LazaowFHo73g1qG7YFZKWRMk%2BiWYmOvTfwzxFzYan%2BK9CodLZ2xQIDAQAB&field_passthrough2=6165&field_passthrough3=payment_method_validation&field_passthrough5=null&tenantId=6165&submitEnabled=true&location=aHR0cHM6Ly9naXRsYWIuY29tL3Rlc3Qtb25lMy9UZXN0Ly0vc2V0dGluZ3MvY2lfY2Q%3D&user_id=<user_id>&customizeErrorRequired=true&zlog_level=warn",
      "hostName": "www.zuora.com",
      "msg": "This content is blocked. Contact the site owner to fix the issue."
    },
    "textdirection": "ltr",
    "title": "www.zuora.com"
  };
  loadTimeData.data = pageData;var tp = document.getElementById('t');jstProcess(new JsEvalContext(pageData), tp);
</script>

Steps to replicate

  1. Create a new account (or use an account which doesn't have credit card added yet)
  2. Create a group and a project under the group
  3. Under the project, go to Settings > CI/CD -> Expand Runners section
  4. Toggle shared runners off and then on => An alert asking to validate account should appear
  5. Click on Validate button

Additional notes

We use the same zuora component in Project > CI / CD -> Pipelines -> Account validation alert, however the iframe loads fine from here.

Screenshot_2023-01-09_at_3.49.48_PM

The API response for subscriptions/payment_form?id=payment_method_validation from both pages are identical except for the signature and token which makes sense, but it fails from one page and succeeds from another.

Support tickets

https://gitlab.zendesk.com/agent/tickets/359606

https://gitlab.zendesk.com/agent/tickets/359667

https://gitlab.zendesk.com/agent/tickets/359922

Slack conversations

https://gitlab.slack.com/archives/CMJ8JR0RH/p1673038366788879

https://gitlab.slack.com/archives/CMJ8JR0RH/p1673198792252799

Post actions

  1. Notify support team to update the above tickets once issues is resolved.
  2. Update this thread with the resolution
Edited by Wayne Haber