CSS and JS broken when using https links

Fernando's Avatar

Fernando

19 Aug, 2015 03:13 PM

Whenever users go into our websites under https all of the CSS and the javascript is broken. And I look over both blocks that call the CSS and the Javascript starting with // and when I look over the html that the pages render cascades adds the http to it. Like this:
<link href="//www.umsl.edu//files/css/redesign/umsl-main-secondary-new.css" rel="stylesheet" type="text/css"/>
<script src="/files/js/redesign/umsl-main-secondary.js" type="text/javascript"></script>

So whenever the user goes to https the CSS and the JS in the page breaks. Here are some screenshots of it.

  1. 1 Posted by Ryan Griffith on 19 Aug, 2015 06:02 PM

    Ryan Griffith's Avatar

    Hi Fernando,

    When you have a moment, try adjusting your Site's URL to be scheme relative (//) instead of using http:// and re-publish the pages to see if that resolves the issue.

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by Fernando on 19 Aug, 2015 07:03 PM

    Fernando's Avatar

    I tried that, and it broke everything in the CMS and when I go live in http it works fine but for https it still broken. Is there any other files you would like in order to resolve this?

    Thanks!

  3. 3 Posted by Ryan Griffith on 19 Aug, 2015 07:11 PM

    Ryan Griffith's Avatar

    Hi Fernando,

    Are you referencing these files from a Block or Template? If so, check those links to see if they start with http:// and if they do change them to //.

    Please let me know if you have any questions.

    Thanks!

  4. 4 Posted by Fernando on 19 Aug, 2015 08:23 PM

    Fernando's Avatar

    In my CSS and in my JS blocks I replaced http:// with //. When I checked the https the CSS works fine but the JS is not firing in the website. Should I try something else with the JS block? This is what is in the JS Block:

    <system-xml>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script src="//www.umsl.edu/files/js/redesign/umsl-main-secondary.js" type="text/javascript"></script>
        <script src="//www.umsl.edu/files/js/redesign/bootstrap-secondary.js" type="text/javascript"></script>
        <script type="text/javascript">
            adroll_adv_id = "WCOPKJ75PRHJTGY5FSBLGW";
            adroll_pix_id = "FLWLPIHPVNDSHKV7TOISE6";
            (function () {
            var oldonload = window.onload;
            window.onload = function(){
            __adroll_loaded=true;
            var scr = document.createElement("script");
            var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
            scr.setAttribute('async', 'true');
            scr.type = "text/javascript";
            scr.src = host + "/j/roundtrip.js";
            ((document.getElementsByTagName('head') || [null])[0] ||
            document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
            if(oldonload){oldonload()}};
            }());
        </script>
    </system-xml>

  5. 5 Posted by Ryan Griffith on 19 Aug, 2015 08:26 PM

    Ryan Griffith's Avatar

    Hi Fernando,

    It looks like you missed the first <script> tag for the Google font, which will cause the in-secure content issue. Try changing that over to scheme relative and let me know if that fixes the issue.

    Please let me know if you have any questions.

    Thanks!

  6. 6 Posted by Fernando on 19 Aug, 2015 09:03 PM

    Fernando's Avatar

    I do not think I am following you. Could you elaborate?

  7. 7 Posted by Ryan Griffith on 20 Aug, 2015 11:26 AM

    Ryan Griffith's Avatar

    Sure, not a problem at all.

    Based on the code you provided, it looks as thought the first <script> tag that loads jQuery from Google:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    

    Note the URL begins with http://, which will cause the in-secure content warning. Try changing this over to // and let me know if that fixes your issue. Also, keep an eye out for any other JS or CSS links that might begin with http://.

    Please let me know if you have any questions.

    Thanks!

  8. 8 Posted by Fernando on 20 Aug, 2015 12:52 PM

    Fernando's Avatar

    Awesome it worked! Thanks Ryan!

  9. Fernando closed this discussion on 20 Aug, 2015 12:52 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac