jquery issues

I don't know if this is a known issue or not, but I've had a lot of problems with jQuery (with a vanilla version of FUEL). Maybe I did something wrong that caused these issues?

First, the version of jQuery loaded by default in the /assets/js folder was 1.7.1 and seems deprecated because it would not work with a jQuery plugin or with some jQuery code such as .attr(). I manually pasted jQuery 3.5.1 into this file and it fixed all of my problems, except one.

For some reason, I was still getting errors on Firefox (not Chrome), and jQuery was not working in any mobile browsers that I tried. I found out that the source of the error was this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" integrity="sha256-iBcUE/x23aI6syuqF7EeT/+JFBxjPs5zeFJEXxumwb0=" crossorigin="anonymous"></script>

Because it was throwing the following errors (only in Firefox on desktop, not on Chrome):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at moz-extension://9bed58c3-b62e-4d7f-9b85-18c9eb67dc87/resources/jquery/1.7.1/jquery.min.jsm. (Reason: CORS request not http).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js. (Reason: CORS request did not succeed).

None of the “sha256” hashes in the integrity attribute match the content of the subresource. themes
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at moz-extension://9bed58c3-b62e-4d7f-9b85-18c9eb67dc87/resources/jquery/1.7.1/jquery.min.jsm. (Reason: CORS request not http).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js. (Reason: CORS request did not succeed).

None of the “sha256” hashes in the integrity attribute match the content of the subresource.

Even though I only got these errors on Firefox, jQuery still was not working on any mobile browsers. So after a lot of googling and exploration, I discovered that I could fix all of my problems if I edited the Asset.php file in this location:

/fuel/modules/fuel/libraries/Asset.php

In particular, I changed lines 677-678 from this:

$js = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js" integrity="sha256-'.$base64.'" crossorigin="anonymous"></script>';
        $js .= '<script>window.jQuery || document.write(\'<script src="'.js_path($default).'"><\/script>\');</script>';

to this:

    //$js = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js" integrity="sha256-'.$base64.'" crossorigin="anonymous"></script>';
                        $js = '<script>window.jQuery || document.write(\'<script src="'.js_path($default).'"><\/script>\');</script>';

After doing so, jQuery magically started working on all devices and browsers. I don't really know why, but I just wanted to post this in case there's a better solution or its not a known issue.

Thanks!

Comments

  • I too use the latest jquery on the public side by editing the header block.
    I still use Fuel's v1.7.1 in the admin control panel though. I guess some js tools within Fuel needs that version?
    It would be nice for the devs to look at upgrading jquery within Fuel to the latest.

  • Yes, there are a number of plugins that rely on the older version and would take a bit of time to make that update and test as well as the need to potentially make changes to website specific code not related to the FUEL admin area.

    The integrity constraint error is when the sha256 hash of the file doesn't match the value in the integrity constraint attribute. This is used to prevent remote scripts changing unexpectedly perhaps with malicious code that could affect your website. That sounds like it may have been related to the changes you made without updating the hash value. Were you getting that error before the change?

  • I had been getting that integrity constraint error since I did a clean install of FUEL on my server, so I think the answer would be yes - I was getting the error before any changes were made. Should I get a new hash value and try it that way?

  • Are you using the jquery() function that comes with FUEL? If so, that should be automatically creating that hash value and storing it in the cache (see Asset::jquery() line 655).

  • Yes, the jquery() function is what was causing that error, so I had to edit it in FUEL's Asset.php library file and remove the line that included the output of that hash value (shown in the original post). I had not modified the function at all, it just threw that error on its own, but I'm not sure why.

  • It stores a hash value in the cache directory. Am wondering if the stored cache was incorrect. Could you try deleting that cache file first in the fuel/application/cache directory (you can log in to FUEL and do a Clear Page Cache too). Modifying the core Asset.php file may cause you issues down the road with updates.

  • I cleared the cache but the problem was still there.

  • Are you getting that error with a fresh installation of FUEL by chance (the install page uses that jquery() function)?

Sign In or Register to comment.