Search code examples
jqueryhtmlminify

Unquoted 'href' attributes blocked from an asynchronous load

I manage a static website with a Search Tool that uses the Taxonomy Terms structure as data-source to find links matching some criteria which will then be loaded asynchronously and parsed to build a UI.

The structure of the Taxonomy Terms is something like that:

<ul>
    <li data-term="TaxonomyTermOfFirstLevel">TaxonomyTermOfFirstLevel
        <ul>
            <li data-term="TaxonomyTermOfSecondLevel">TaxonomyTermOfSecondLevel
                <ul>
                    <li data-term="TaxonomyTerm">
                        <a href="https://www.example.com/some-page/">Some Page</a>
                    </li>
                </ul>
             </li>
         </ul>
      </li>
</ul>

And the (fragment of the) loading routine:

var cache = {};

function load( url ) {

    if( ! cache[ url ] ) {
        cache[ url ] = $.ajax( url );
    }

    return cache[ url ];
}

With an un-minified HTML output, everything works fine. But when minifying it with extreme tools that also remove the quotes around attributes, all Requests made to the URLs found within the structure above fail with the following error:

Mixed Content: The page at 'https://www.example.com/search/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.example.com/some-page/'. This request has been blocked; the content must be served over HTTPS.

As you can see, both Requester (/search) and the Requested (/some-page) are in the same domain but the browser says the URL being requested is insecure because it's not under SSL. But if you look at the fragment I provided, the Requested URL does have the https schema prefix.

I've searched exhaustively about this without success and only when I deactivated the output minifying everything returned to the working state. I then analyzed everything involving the searching process, from the HTML to each of the JS files responsible for the searching (after all it's a static site) and I only noticed two differences:

  • The (obvious) lack of quotes around the href attributes.
  • The fact that the URLs point to folders in the root directory, each one with an index.html file (i.e. /same-page/index.html), causing a redirection for a pseudo-friendly-url. But as far as I understand, this wouldn't be a problem as jQuery would transparently follow the redirection, right?

The alternative I would have in that case would use another minifier that doesn't remove the quotes instead of tdewolff's minifier, the built-in choice of Hugo Static Site Generator used to create all HTML files.

Would be there something else I'm missing?

Solution

  • Since "Friendly URLs" in a static site are simply nested directories with an index.html file inside, all URLs request must end with a trailing slash -OR- have the said file appended before requesting with/by AJAX.

    However, as you can see in case described in this topic — in-depth in this testing repository — regardless all URLs do have a trailing slash, in the background, at some point of the asynchronous requests process, these trailing slashes are being removed, ignored or, given the fact an HTML minifier is involved, being misinterpreted by the browsers.

    In order to solve this issue, I just reinforced a trailing slash to the URLs I would be requesting. Because the wrapper function load shown above is very generic, I wouldn't workaround the situation in there as not all of the URLs would yield a 301 redirection, so, instead, I've applied the fix only after I retrieved the href attribute:

    var url = $( 'some selector' ).find( 'a' ).attr( 'href' ).replace( /\/?$/, '/' );

    The "ace in the hole" is the replace function that'll keep existing trailing slashes untouched but will add one where it's missing, be it for wrongly built <a> tags or wrongly removals — as it seems to be what's happening.

    Note: For a further understanding of the context and the fix above, check the already linked repository or, at least, the extended discussion on this issue of the mentioned minifier.

    I hope this helps someone else in the future, as at least something unrelated to a specific software will be available as a search result.