Magento 2.3.5-p2 2FA QR code and revenue/amount Graph images don't load

Question

I'm running a Magento 2.3.5-p2 site, but the dynamic images generated in the admin don't appear to load. When I updated to 2.4 the graph problem goes aways as the graphs are drawn with canvases instead, but the 2FA QR code issue remains.

I have tried disabling all 3rd party modules, but this hasn't made any difference Magento 2: Disable all custom and Third Party Module in single Command.

My hosting (Cloudways using AWS) provider doesn't think it is a server problem.

See screenshots below:

Magento 2 admin Graph image not loading Magento 2 admin Graph image not loading

Magento 2 admin 2FA Google Authenticator QR code image not loading Magento 2 admin 2FA Google Authenticator QR code image not loading

problem image urls are typically in this format https://m2.skates.co.uk/sk_admin/tfa/google/qr/key/6d51a9c283d43f0482ee69f53c51cde655eb5b12a51bf431f84752c493e9974e/

All other image types in both the admin and front end work perfectly fine.

Any ideas? Thanks so much for reading.

Answer 1

I guess the issue is related the 2FA module. The 2FA module moved to Magento official repo (Member of MSP Security Suite) and now name is different. So, you need to remove old module.

New one: msp_twofactorauth

Please refer this link: Important notice and the official repo: magespecialist_TwoFactorAuth

Disable module OR remove old directory MSP(do backup before) and run following command:

composer require msp/twofactorauth

Answer 2

For anyone interested my issue was the content security policy. I had unblock the following domains for img-src

cm.everesttech.net

a5.behance.net

amcglobal.sc.omtrdc.net

and connect-src

amcglobal.sc.omtrdc.net

Answer 3

I solved it by maing following changes:

Firstly, in PATH: vendor/msp/twofactorauth/Model/Provider/Engine/Google.php

in function getQrCodeAsPng(), change return $pngData; to return $qrCode->writeDataUri();

---

Secondly, in PATH: vendor/msp/twofactorauth/Block/Provider/Google/Configure.php

in function getJsLayout(), change:

From:

$this->jsLayout['components']['msp-twofactorauth-configure']['qrCodeUrl'] = $this->getUrl('*/*/qr');

To:

$this->jsLayout['components']['msp-twofactorauth-configure']['qrCodeUrl'] = $this->google->getQrCodeAsPng($this->session->getUser());

FYI: You can override these files and create a seperate module if you wish not to modify the files directly in the vendor folder