Pro Content Editor can't load SVG icons from CDN

Support
#1

When I try to use the Pro editor, none of the icons load. In the console I get an error that says “Unsafe attempt to load URL https://dq5k1rassfgs.cloudfront.net/wp-content/themes/pro/cornerstone/assets/dist-app/svg/ui.svg?v=4.2.3 from frame with URL https://mysouthland.com/pro/#/content. Domains, protocols and ports must match.”

I’ve tried adding ui.svg to the list of files to not load from CDN, but it always defaults to loading from the CDN and gives me the error. Nothing I can do short of completely disabling the CDN altogether makes the icons load. Has anyone else solved this issue?

#2

Hi @thomdick,

Thank you for reaching out to us. There are couple of known Cloudflare issues, can you please follow the troubleshooting guide here https://theme.co/docs/site-appears-broken-after-updates#cloudflare-problem

Let us know how this goes!

#3

Thanks @nabeel, however this article refers to issues with CloudFlare. I’m use AWS CloudFront as a CDN. Regradless I did clear the cache style cache, and the site cache but it didn’t help. Do you have any other suggestions?

#4

Hi @thomdick,

Please see the following documentation.

How do I prevent CloudFront from caching certain files?

Please make sure you purge all cache after doing changes in the configuration so the changes will take effect immediately.

If that does not work, please contact the AWS CloudFront support as they can help you better regarding this issue.

Thanks,

#5

Thanks for your response. I’ve tried preventing CloudFront from caching the svg files both on the WordPress side, and by modifying CloudFront behaviours like you mentioned in your link. However those svg files are still being loaded from the cache from some reason. I believe it’s because of how Pro is coded (e.g. a css or js file is being cached and is referencing cached svg file). I’ve tried preventing certain css and js files from being cached but it doesn’t help. The only way to make the icons appear is to completely disable CloudFront.

Any help would be appreciated since I don’t think it’s unreasonable to expect your plugins to be used on a site with a CDN.

#6

Hi @thomdick,

Your site might have a Cross-Origin Resource Sharing issue. Please allow your CDN to serve resources to your site.

Please see this article, this article is talking about Font Awesome icon, but can be the same with SVG icons.

Hope it helps,
Cheers!

#7

I’ve already added the header Access-Control-Allow-Origin "*" to all requests via Apache, but I’m still getting the error.

I’m not getting CORS errors in DevTools, just the Unsafe attempt to load URL <...> from frame with URL <...> error as I mentioned in my initial post.

Thanks again for your help, I appreciate any other suggestions you can think of.

#8

Hey @thomdick,

By seeing your error, the domains do not match e.g https://dq5k1rassfgs.cloudfront.net/ and https://mysouthland.com/ both are different domains and the error also states that Domains, protocols and ports must match

One possibility could be to configure a webserver to proxy the target domain so that the target files appear to be on the host domain, you can ask your host to do that for you.

Hope this helps!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.