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
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
- Create a new account (or use an account which doesn't have credit card added yet)
- Create a group and a project under the group
- Under the project, go to Settings > CI/CD -> Expand
Runners
section - Toggle shared runners off and then on => An alert asking to validate account should appear
- 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.
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
- Notify support team to update the above tickets once issues is resolved.
- Update this thread with the resolution