0

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.....

Brotzka
  • 2,959
  • 4
  • 35
  • 56
  • 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 Jul 02 '16 at 05:58
  • Thanks for your response. I've updated the question. My project uses https on all sites and for all resources. – Brotzka Jul 02 '16 at 06:04
  • 1
    Have you looked at the `upgrade-insecure-requests` directive that is part of CSP (Content Security Policy)? –  Jul 02 '16 at 06:30
  • @torazaburo, this works on Chrome and FireFox (so thanks!), but not on Safari (IE/Edge not tested right now). – Brotzka Jul 02 '16 at 06:54
  • also you can try using [HSTS](https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security) on your project because support for @torazaburo 's solution is [limited](http://caniuse.com/#feat=upgradeinsecurerequests). Here is the [support status](http://caniuse.com/#feat=stricttransportsecurity) for HSTS – Max Novich Jul 02 '16 at 06:57
  • @MaksymStepanenko: it seems that hsts is a server side protocol. So I think this won't work for resources loaded from a third party server (in this case from Google). In my case, the additional javascript-files are loaded directly from Google, so a server side protocol on my server like hsts has no chance to tell the browser to load all files from google-server with https.. – Brotzka Jul 02 '16 at 09:01
  • True. Never tried it with external resources, so it was worth a shot. – Max Novich Jul 02 '16 at 09:09

2 Answers2

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);
    }
});
Community
  • 1
  • 1
brm
  • 3,706
  • 1
  • 14
  • 14
  • 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! – Brotzka Jul 03 '16 at 04:36
  • You could always host the file somewhere yourself, make it accessible using https and change the url more drastically. – brm Jul 03 '16 at 05:36
  • 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). – Brotzka Jul 03 '16 at 15:36
  • Do you have an example that I can use for testing? – brm Jul 03 '16 at 18:18
  • Yes, I've created a [codepen](http://codepen.io/Brotzla/pen/grRrzL). Your script from above also is integrated. Thanks! – Brotzka Jul 04 '16 at 04:28
  • I don't see a way to do this more or less in a clean way: one of the images is actually a background specified in a css file, the other is specified in some html code, possibly by using innerHTML. – brm Jul 04 '16 at 11:05
-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

NVRM
  • 11,480
  • 1
  • 88
  • 87
  • 1
    No, unfortunately this does not work. Resource is still loaded over http. Error message is the same. – Brotzka Jul 02 '16 at 06:12
  • 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: "http://www.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: " – NVRM Jul 02 '16 at 06:21
  • 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....``` – Brotzka Jul 02 '16 at 06:26