Force JavaScript to load additional resources over https

Question

I am using the Virtual Keyboard (Deprecated) from Google in my current project. Unfortunately it loads some additionale js-resources from an insecure source. Is there a way to force the script to use https instead of http?

The problem is the language file which is used to display the correct letters. The stylesheet e.g. is loaded over https.

Here is my script:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Virtual Keyboard | Google APIs</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>

<input id="language">

<script>
    google.load("elements", "1", {
        packages: "keyboard"
    });

    function onLoad() {
        var kbd1 = new google.elements.keyboard.Keyboard(
                [google.elements.keyboard.LayoutCode.SWEDISH],
                ['language']);
    }

    google.setOnLoadCallback(onLoad);
</script>
</body>
</html>

Update:

The only resource, which is loaded over normal http is the language-file, in this case the swedish version. The language-file is loaded in the function onLoad during the var kb1 = new google.....

Can you please provide the exact resource name? Because I found couple of hardcoded http links in the script but most of them are relative. Also are you accessing your project by http or https? — Max Novich
– Max Novich, Commented Jul 2, 2016 at 5:58
Thanks for your response. I've updated the question. My project uses https on all sites and for all resources. — Brotzka
– Brotzka, Commented Jul 2, 2016 at 6:04
Have you looked at the upgrade-insecure-requests directive that is part of CSP (Content Security Policy)? — user663031
– user663031, Commented Jul 2, 2016 at 6:30
@torazaburo, this works on Chrome and FireFox (so thanks!), but not on Safari (IE/Edge not tested right now). — Brotzka
– Brotzka, Commented Jul 2, 2016 at 6:54
also you can try using HSTS on your project because support for @torazaburo 's solution is limited. Here is the support status for HSTS — Max Novich
– Max Novich, Commented Jul 2, 2016 at 6:57

Community · Accepted Answer · 2017-05-23 12:08:28Z

2

Based on the answer to another question it seems possible to redefine the src property of a <script> element, which is used to load the javascript code for the swedisch keyboard. If you make sure the following code is executed before the new google.elements.keyboard.Keyboard call, the http will be replaced by https. From the network info in the chrome debug console, this indeed seems to load the keyboard settings over https.

Object.defineProperty(HTMLScriptElement.prototype, 'src', {
    get: function() {
        return this.getAttribute('src')
    },
    set: function(url) {
        var prefix = "http://";

        if (url.startsWith(prefix))
            url = "https://" + url.substr(prefix.length);

        console.log('being set: ' + url);
        this.setAttribute('src', url);
    }
});

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 2, 2016 at 15:42

brm

3,8661 gold badge17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Brotzka Over a year ago

Great! That works for me. Now every file is loaded over https. Unfortunately, there is one file somewhere in the google js-code, which could not be loaded over https. Now I get an 404 error every time I focus the input field and the keyboard appears. But this is only visible in the console (so the normal user would't notice^^). Thanks!

brm Over a year ago

You could always host the file somewhere yourself, make it accessible using https and change the url more drastically.

Brotzka Over a year ago

Is there a similar functionality for images? I've tried around with HTMLImageElement but had no success.. JS-Scripts are loaded via https, but there are a few images, that are not loaded over https and not available over https. So I have to change the url to complete different one (e.g. to a file on my server).

brm Over a year ago

Do you have an example that I can use for testing?

Brotzka Over a year ago

Yes, I've created a codepen. Your script from above also is integrated. Thanks!

|

NVRM · Accepted Answer · 2016-07-02 06:13:39Z

-1

Just setup your script url like this and it will work!

<script src="//www.google.com/jsapi"></script>

This is the url relative protocol The type"javascript" part is not anymore necessary as it is taken as javascript if nothing is specified, so save space! MDN element script

edited Jul 2, 2016 at 6:13

answered Jul 2, 2016 at 6:07

NVRM

13.5k2 gold badges102 silver badges102 bronze badges

3 Comments

Brotzka Over a year ago

No, unfortunately this does not work. Resource is still loaded over http. Error message is the same.

NVRM Over a year ago

First this is not a stylesheet but a script, it should work like this. Maybe the fact that the adress does not end by ".js" is making trouble. Anyway try this first, as the url is answering it should work: "google.com/jsapi" Or much better: copy the content of the script, paste it a file whatever.js on the same folder and run it like this: "<script src="whatever.js">"

Brotzka Over a year ago

The problem is not the "keyboard tool" itself. This is loaded via https. The problem is the additional language-file (in my case the http://www.google.com/uds/modules/elements/keyboard/sv.js). This fiel is loaded in the onLoad function during the variable assignment var kbd1 = google....

Collectives™ on Stack Overflow

Force JavaScript to load additional resources over https

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related