Errors with slider revolution and CDN
-
Hi, my configuration at a high level is
1) Page Cache enabled
2) Browser Cache enabled
3) CDN enabled through Generic Mirrion ( Azure Endpoint)As you would notice when trying to access the link above, you will get the following errors on console
`THREE.WebGLState: DOMException: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: Tainted canvases may not be loaded.
at Object.texImage2D (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:305714)
at Z (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:315422)
at V (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:310207)
at rs.safeSetTexture2D (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:321490)
at mr.Yi [as setValue] (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:261765)
at Function.br.upload (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:265804)
at It (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:350248)
at us.renderBufferDirect (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:342100)
at Ct (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:345272)
at Rt (https://www.invitekaro.com/wp-content/plugins/revslider/public/assets/js/libs/three.min.js?ver=6.5.21:6:344920)`I spoke with the developers of Slider revolution, and they suggested to exclude fetch of three.min.js from CDN
1) I excluded the above page from caching, but the error persisted.
2) I disabled browser cache, the issue still persisted.
3) I completely disabled CDN. And everything worked as expected.
4) I re-enabled CDN, and then enabled ” Disable CDN for the following roles”, logged in as Administrator. Everything worked as expected
5) I Disabled “Disable CDN for the following roles” went ahead and added in “Rejected files” {plugins_dir}/revslider/*, cleared page cache. I got the same error
6) I then went to “wp-includes file types to upload” and “Theme file types to upload” and removed .js. Cleared page cache, cleared endpoints on CDN. Still got the same error
7) Then I disabled “Host custom files”. Cleared page cache, cleared endpoints on CDN. Still got the same errorNo matter what I try, the request is always getting fetched from CDN for rev slider’s “three.min.js” until I completely disable the CDN. That’s not an ideal solution unfortunately.
Can you please let me know what I am missing and how can I go ahead with fixing this?
The page I need help with: [log in to see the link]
-
Hello @arpitkr
I am sorry about the issue you are experiencing and I am happy to assist you with this.
I’ve checked your website and I am not seeing the errors in the console you are mentioning, and I can see that the CDN is enabled.
Can you please confirm you are still experiencing the issue?
Thanks!My bad, the errors appear when you tap on “Start Invitation” button. Those errors are still present.( I have disabled the pre loader for now so that its easier for you to get there)
As this is a production system, I had to minify the files. Those errors would now show scripts as autoptmize file rather then the actual three.min.js. If you would like, I can replicate this behavior on staging ( with minification turned off).
Hello @arpitkr
Thank you for yoru feedback.
This issue does not seem related to W3 Total Cache. Since you are using AO to minify assets, I would suggest reaching out to AO support for more assistance with this.
Thanks!Hi @vmarko , from what I have provided, yes it does seem like an AO issue.
Infact its not. I am trying to get a staging environment setup in cloud. If you can give me a couple of days, I will be able to provide much better debug-able environment.
Thanks for your time and patience.
Hi @vmarko , so the issue is fixed on the staging site, but somehow the same fix isn’t working on live site. Let me give you details of what was found ,and what was done
Link to stating environment (working): https://staging.invitekaro.com/2022/04/26/basic-invite/
Link to production environment ( broken): https://www.invitekaro.com/2022/04/26/basic-invite/1. After disabling AO, and CDN for slider revolution, we were still getting the following error.
THREE.WebGLState: – SecurityError: The operation is insecure. — three.min.js:5
2. On Further investigation, is was found that WebGL has issues with cross domain image access. (https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html)
3. Hence, temporarily, I disabled CDN for Media library, and everything started working as expected.
3. We discovered that, Slider Revolution provides an option to configure CORS permissions for images within the modules. (https://www.sliderrevolution.com/faq/cors)
4. We set CORS for images to “Anonymous” in slider revolution, re-enabled CDN for Media Library, and everything seems to be working as expected. You may check the Link https://staging.invitekaro.com/2022/04/26/basic-invite/
5. Now we went ahead, and replicated everything on Production from staging, step by step. W3 total cache on production is now an exact replica of staging. However, we are getting CORS error in production. (You may check console logs: https://www.invitekaro.com/2022/04/26/basic-invite/)
6. Both production and staging use different Azure CDN endpoints, and both have rules enabled on Azure to add CORS to header for source domain.Other then purging the complete CDN, I have done almost everything else. But the issue on production persists.
Additionally, in networks tab on production, I can see an image being referenced to twice, as opposed to once in staging environment. One instance of the image has CORS issue, the other one doesn’t.Is there something I am missing?
-
This reply was modified 4 years ago by
arpitkr.
Hello @arpitkr
Thank you for the information.
Yes, I do see the CORS problem now on the prod website.
Can you please check if the CORS is enabled in the Performance>CDN?
What you can do is try to add custom CORS rules for your images in the nginx.conf on the top of the file outside of W3TC rules:location ~* \.(png|ico|jpg|jpeg|jpe|webp)$ { add_header Access-Control-Allow-Origin *; }Alternatively, try excluding the image from being served from the CDN in Performance>CDN>Advanced>Rejected files: – For example:
/wp-content/uploads/2022/04/729335.pngI hope this helps!
Thanks!
Hi @vmarko , the issue is resolved now. Apparently, slider revolution maintains a cache of its own. Once I cleared it, all the errors went away.
Hello @arpitkr
Thank you for the information. This will be very helpful information for possible future problems related to this kind of issue.
We would really appreciate it if you could take a minute and post a review here. This will help us to continue offering a top-notch product to users.
Thanks!Done
-
This reply was modified 4 years ago by
The topic ‘Errors with slider revolution and CDN’ is closed to new replies.