YUI 3 is going to yui.yahooapis.com to get code. I am HTTPS and content blocked

Question

I worked this holiday to find out my code wont work on HTTPS. My LOCALDEV is HTTP and our production server is HTTPS.

For some reason YUI is going out to get JS, when I have it locally.

I have it on the server...........

And finally my code:

    YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {

    var notes = [
        "Dr Follow Up Complete Notes",
        "Fax Document Notes",
        "Event Notes",
        "Email Information Notes",
        "Corresponding Document Notes",
        "Return Call Notes",
        "Admit Notes",
        "Discharge Notes",
        "Other Notes",
        "Excellent Resource Notes",
        "Good Resource Notes",
        "Neutral Resource Notes",
        "Poor Resource Notes",
        "Unacceptable Resource Notes",
    ];

    var inputNode = Y.one('#name');

    inputNode.plug(Y.Plugin.AutoComplete, {
        resultFilters    : 'phraseMatch',
        resultHighlighter: 'phraseMatch',
        source           : notes,
        minQueryLength   : 0
    });
    inputNode.ac.get('boundingBox').setStyle('zIndex', 50);
    inputNode.on('focus', function () {
        inputNode.ac.sendRequest('');
    })

==================================================================================

THIS IS AFTER I ADDED : base: 'include/javascript/yui3/build'

I don't have that directory in my build.

Answer 1

TLDR: try setting the base config property in your call to YUI.

I haven't used YUI, but generally speaking, requests from a HTTPS site should always hit other HTTPS sites (otherwise you'll see insecure content warnings, or requests get blocked as you've discovered). So that's the problem.

You have 2 options I can think of to fix this:

1. Configure YUI to request from a HTTPS site. Google's AjaxAPIs did have it hosted and did support SSL, but it appears to have been removed from Google's list of hosted libraries. A post in the YUI forums by a YUI developer in 2011 indicates Google stopped hosting new versions of YUI due to Google's CDN not supporting combo handling. So that's not really an option, and some people are of the opinion that external scripts loaded over HTTPS are bad anyway.

2. Configure YUI to load the content from your local server. This requires that your javascript is not only locally present but will also be served by your server at a particular URL. Aside from making your initial script tag point to your locally hosted YUI script, it looks like configuring the client side loading is done by setting the base config property in your call to YUI (or comboBase if you are using a combo loader - but that would mean you'd have to set up your own YUI combo loader).

For example, if your YUI lib is available at https://mydomain.com/static/js/yui_3.6.0/yui/build/ (and your page is at, say https://mydomain.com/sample/page), then you might do the following:

<script src="https://mydomain.com/static/js/3.6.0/yui/build/yui-min.js"></script>

And then in your javascript files:

YUI({ 
    base: 'static/js/yui_3.6.0/yui/build/'
}).use('node', 'event', function(Y) { 
    ...
})

(or possibly base: '/static/js/yui_3.6.0/yui/build/'; I haven't got a server handy to test on - please report back which worked, if any!)

Answer 2

I thought I would share my experience in hopes that someone else may be helped. May not work for others or not. I was requesting the following url: http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js

But needed https, so I simply changed it from http to https and got a security warning that the cert wasn't valid for the domain. I looked at valid domains and noticed a "yui-s" and thought "Hmmmm secured version?"

I then tried this: https://yui-s.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js

Which worked wonderfully. So others try just changing to https and if your subdomain is "yui" change it to "yui-s"

Hope this helps someone

Answer 3

It looks like you are serving the initial yui-min.js file from the CDN. Find this:

<script type="text/javascript" src="http://yui.yahooapis.com/..."></script>

Replace that to point to your local copy of YUI:

<script type="text/javascript" src="/where/you/put/yui/build/yui/yui-min.js"></script>

That should work and serve the necessary JS off your local server.

However, this will not have any combo loading, which will cause the page to load (sometimes a lot slower. You can read a good article about combo loading YUI locally at http://blog.endpoint.com/2011/02/locally-served-yui3.html