[Hummingbird] Material Icons Blocked by CORS Policy

Hello,
I'm noticing that the icons are not appearing and when I inspect the issue, the says those icons are blocked by CORS policy. I had to clear cache for it to work again but then problem persists again.

Can someone help please!
Thank you,
Sujee

  • Dimitris

    Hello Sujee,

    hope you're doing good and thanks for reaching us! :slight_smile:

    Could you please try to add the following snippet in the .htaccess file of this installation?

    <IfModule mod_headers.c>
      <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>

    Let us know, if that made any difference.
    If not, please consider granting us support access to your site via WPMUDEV Dashboard plugin, as shown here:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5
    Just let us know here in your next reply that access has been granted, as we don't get any notifications about it.

    Warm regards,
    Dimitris

  • Sujee

    Hi Nastia,

    I looked into it more and it looks like when I enter the root domain into the site address (i.e. collegetrackr.com), the site is not forced to https and the icons don't appear. Once I click on anything on the site, it resolves to https and all works. I didn't have this problem before and not sure it's just a coincidence but the only change I recall was removing W3 Total Cache and giving all cache responsibilities to Hummingbird. It may not be related, but I hope you can take a look and see why the site is not being forced to https when I enter collegetrackr.com.

    Thank you!
    Sujee

  • Adam Czajczyk

    Hi Sujee

    I checked the site and I can confirm your finding: if you access the site via https:// protocol it's working fine, but when you access it with http:// prefix or without prefix at all ("generic domain") there's a CORS error.

    The CORS policy message is actually an expected thing in this case because of an attempt to fetch "SSL content over non-SSL connection".

    I'm thinking, however, that instead of trying to "fight that message" it would be best to simply make sure that http:// is actually redirected to https:// as it should in that sort of setup :slight_smile: That would solve the problem and also would made site fully SSL protected.

    In case of your site, I'd start with trying to enable the "Enable 301 .htaccess redirect" option on "Settings -> SSL -> Settings" page (just make sure that you're prepared to regain access to the site as described there in case of an unexpected "redirect loop").

    Best regards,
    Adam

  • Sujee

    Hi Adam,

    Here it is:

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>

    # END WordPress

    <IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
    </IfModule>

    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilter DEFLATE .shtml
    </IfModule>
    # 1 Month for most static assets
    <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
    Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
    # BEGIN WP-HUMMINGBIRD-CACHING

    # END WP-HUMMINGBIRD-CACHING

    Thank you!
    Sujee

  • Nastia

    Hello Sujee

    Hope all is well!

    Looks like your site is loading both, with HTTPS and HTTP, the Cors error showing up when your site is loading with HTTP protocol. Please try following solution, add this code to the .htaccess file at the top.

    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    It will force your site to load only with HTTPS protocol.

    Please clear site cache and browser cache after adding this code. Let us know how it went!

    Cheers,
    Nastia

  • Adam Czajczyk

    Hi Sujee

    This is interesting, I must say. The .htaccess rule that Nastia shared should actually "force redirect" from http to https, yet - it doesn't seem to take any effect on site.

    That suggests that there's some additional issue here but I'm not quite sure what that is. I'd need to take closer look at that and for that I would need a direct access to server. Could you please send in:

    Subject: "Attn: Adam Czajczyk"

    - Mark to my attention, the subject line should contain only: ATTN: Adam Czajczyk
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - login URL and admin account login credentials (may be a temporary admin account) data
    - Include FTP log-in details (hostname, username & password)
    - Include hosting control panel access details (login address, username & password) - cPanel's usually the control panel used for this, but your provider may use something else; I'll need this for accessing your site's database, preferably via phpMyAdmin
    - Include any relevant URLs for your site

    Please use our contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Sujee

    Thank you for your response.

    I must say I'm a bit surprised now. I did check the site in Chrome before I let you know that I think it's working and I wasn't able to replicate the issue anymore. It was properly redirecting me to the https (essentially solving the problem).

    But now, when I checked it again, it looks like the problem "got back". I assume you did not make any configuration changes on site since I wrote you back, correct?

    That would mean that there's still some problem with caching most likely. I'll need to investigate it again so please stay tuned, I'll research this again and get back to you via e-mail.

    Kind regards,
    Adam

  • Adam Czajczyk

    Hello Sujee

    I have done some more tests on the site and so far it looks like it is somehow related to caching. Disabling Hummingbird's Page Cache immediately solves the redirect problem for me and when I asked my colleagues to visit the site they were able to confirm my findings.

    The issue is not that "straightforward" though as it may seem. First, it's difficult to diagnose because one the cache is enabled back it's still redirecting for some time/in some browsers, then it stops. Also, it looks like some sort of cache might be involved on a server/file level as changes in files seem to be showing with a small delay.

    I have consulted this with one of Hummingbird developers and I must say that we're both slightly confused as this is very "weird" issue.

    I'd like to run some more tests but I'd like to ask you first:

    1. I believe this is a live site so do you agree that I also switch (temporarily, for very short time) some plugins off during testing (I'll re-enable them of course)?
    2. Can I also switch to other theme temporarily?
    3. As far as I know, AWS provides various caching mechanisms on different layers. I'm not familiar enough with AWS management to investigate that so could you tell me more about current configuration of the server - mostly if (and if so what) there are any AWS-provided cache layers enabled (and if so, how are they set up)?

    Looking forward to your reply,
    Adam

  • Sujee

    Hi Adam!

    AWS has caching solutions but I do not have them enabled. I've read some threads now that may give light to what is going on (or completely throw you off), but I hope it's the former. I've included it here in order of relevance (in my unprofessional opinion).

    https://serverfault.com/questions/856904/chrome-s3-cloudfront-no-access-control-allow-origin-header-on-initial-xhr-req
    https://forums.aws.amazon.com/thread.jspa?threadID=165257
    https://forums.aws.amazon.com/thread.jspa?threadID=223694

    As for testing on the site, there are a few plugins that cannot be disabled without breaking the site (e.g., buddypress and All-In-One WP migration). You can go ahead and do the tests but could you wait until after maybe 7pm EST to run those tests?

    Finally, I know that AWS CDN does have issues with Chrome when it's pulling cached data from their origins. Maybe it could be the same with HB CDN? The first forum that I listed above does address the issue.

    Hope this helps. Adam, we can always go back and switch off the page cache for HB and then use another plugin like W3 Total Cache for that. I was using that method before and maybe it could solve this issue.

    Thanks again for your amazing support!
    Sujee

  • Adam Czajczyk

    Hello Sujee

    Thanks for your response and the links.

    I checked them but I think that's not exactly the way to go. The solution to the CORS itself is actually pretty simple - just making sure that the entire site is loaded over HTTPS. It's not only the simplest but also the most reliable (and secure) option.

    The "hard part" is how to make it happen. I spent some time investigating the site and the server again and I must say I feel stuck. I was desperately trying to avoid even testing one other solution which is a JavaScript redirect provided by "Really Simple SSL" plugin ("Settings -> SSL" page) as it's probably the slowest and a bit "hacky" option.

    But "being stuck" I decided to give it a chance. I checked this - with the Hummingbird's Page Cache enabled - on Chrome, Firefox, Opera and Edge browsers on Windows 10, in both "regular" and "incognito" modes, clearing browser caches etc, and so far it seems to be working for me.

    I admit though, taking the "nature of an issue" into account, that I won't be sure until you double-check it and confirm. Can you please test the site (without making any changes on it) and let me know?

    If you can confirm that it works, I'd say we got a "workaround" that probably would be the best choice for now if we don't want/can't "take the entire site apart", so to speak, to find the real reason behind the issue :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hi Sujee

    Thanks for confirming this.

    I don't think you should actually experience any noticeable slow down. I know I mentioned that JS redirect is the "slowest" but I mostly meant that "is the slowest in comparison to other ways, especially .htaccess redirect" - but it shouldn't make much of a difference to a human visitor :slight_smile:

    That said, I think in that case we might consider this solved as this seems to be the most reasonable way to go in this case :slight_smile:

    In case you needed more assistance, don't hesitate to let us know and me and my colleagues - we'll be happy to help!

    Have a nice day!
    Adam

  • Sujee

    Hi Adam,

    I hope you've been well. A while ago, you had helped me with solving a HTTPS issue and I had just noticed a wordpress dashboard notice:

    "You do not have a 301 redirect to https active in the settings. For SEO purposes it is advised to use 301 redirects. You can enable a 301 redirect in the settings. View settings page"

    Is this something I should activate?

    Thanks!
    Sujee

  • Adam Czajczyk

    Hi Sujee

    If the site's working fine and everything goes over SSL (as it used to once we finished working on the original issue), I think you can ignore this.

    I think this is detected because the redirect is performed by JS and not via .htaccess. However, you might want to check two things: 1) check your site's sitemap to see if it uses https:// prefixed URLs and 2) try finding your site in Google to see if it's indexed over HTTPS protocol.

    Best regards,
    Adam

  • Sujee

    Hi Adam,

    Thank you for the suggestions. So, once I checked google, it does look like it's indexed over https but once I click on it, it takes me to the site but it doesn't show 'Secure' on the landing page - other pages do have it, however.

    Can you check and verify it is the same for you? Also, can I ask how I can check my site's sitemap?

    Thanks for you continued support. I'm going to try to look for a better SSL plugin as I suspect it could be that causing these funny behaviors.

    Sujee

  • Adam Czajczyk

    Hi Sujee

    I "googled" you site and tested with Chrome and Firefox. In both cases after clicking on Google link (pointing to https:// so that's fine) I was taken to the homepage over HTTS (so that's fine too). I think the redirect works fine then, there's no need to change it.

    The problem here is a bit different. I do, indeed, have an "insecure content" and is related to this file:

    „http://collegetrackr.com/wp-content/plugins/Ultimate_VC_Addons/assets/min-css/ajax-loader.gif”

    For some reason a jquery.js library is trying to fetch that file over http. So, it's kind of hard-coded. This is causing "mixed content" error which results with this warning. I'm not, however, sure where this loader actually comes from - does it ring a bell for you?

    I checked homepage source code and there are trhee "loader.gif" images but they all come from /mediapress/ plugin and are loaded over https, it doesn't show any loader coming from VC. I assume that this one - especially taking into account that the error comes from jQuery.js library - might be generated dynamically.

    Are you aware of any "loader" that might have been set via Visual Composer? Maybe there's some loader enabled for one of the modules on the homepage?

    Best regards,
    Adam

  • Sujee

    Hi Adam!

    So, I did some reading and it turns out that if these fonts are being used significantly, it's best to combine file for all modules for the plugin that will be loaded on the site. Checked the plugin details and they had an option to combine CSS and JS. As of right now, it works but I'll give it some time and start clearing cache to see if the problem is truly gone.

    For those in the forum that may have the same issue using 'Ultimate VC Addons' - you can navigate to your wordpress dashboard ---> Ultimate --> Modules --> Scripts/Styles --> enable CSS and JS Combine

    So far so good! I think the other insecure content caused by the 'dashicons' is the same that is found in my wp-includes directory. I just messaged the theme developer to see if they have a similar fix to it.

    I will keep you posted if anything does change.

    Thanks!
    Sujee

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.