Javascript google transliterate API not served over https

Question

JavaScript google transliterate API is not serving over https. Im getting below mixed content error . Its working over http website, but not working with https. I have tried to invoke the API in all the below ways.

 <script type="text/javascript" src="https://google.com/jsapi">
 <script type="text/javascript" src="http://google.com/jsapi">
 <script type="text/javascript" src="//google.com/jsapi">
 <script type="text/javascript" src="//www.google.com/jsapi">

Error:

Mixed Content: The page at 'https://extranuclear-freque.000webhostapp.com/lang.html' was loaded over HTTPS, but requested an insecure script 'http://www.google.com/inputtools/request?text=gy&ime=transliteration_en_bn&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&uv&cb=callbacks._2j46jfkrs'. This request has been blocked; the content must be served over HTTPS.

Please help me out. Thanks

<pre> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">
      google.load("elements", "1", {
            packages: "transliteration"
          });
      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.BENGALI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        control.makeTransliteratable(['transliterateTextarea']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    <textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
  </body>
</html> 
</pre>

this has nothing at all to do with `java` because `java !== javascript` - that certainly seems like a bug in googles code, doesn't it — Jaromanda X, Jun 21 '17 at 05:21
@ChiragRavindra - that request comes from `transliteration.l.js` which is loaded correctly (https) - it looks like a google code bug — Jaromanda X, Jun 21 '17 at 05:23
I visited the link of the website but couldn't see the mixed content error. However I did get a message like `jsapi:22 A Parser-blocking, cross site (i.e. different eTLD+1) script, https://www.google.com/uds/?file=elements&v=1&packages=transliteration, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message....` This may be fixed by moving the script includes to the bottom of the body and out of the head. — Chirag Ravindra, Jun 21 '17 at 05:29
https://extranuclear-freque.000webhostapp.com/lang.html this has no other script tags being loaded on it? — , Jun 21 '17 at 05:44
@John. Please try the website with http and https in the URL and check the console while typing You can see the difference. With http it is working and with https we will get mixed content error. — Munavar Fairooz, Jun 21 '17 at 05:53
Would but on my phone. If the said site doesn't load any other script or CSS from http then I would agree with the others, seems like the script tags you are trying to use are loading in other tags that are themselves not https — , Jun 21 '17 at 06:01
@John Please see the file content. I didnt get what you meant by tags that are themselves not https. Please correct me if i am wrong. Thanks — Munavar Fairooz, Jun 21 '17 at 06:36

score 11 · Answer 1 · answered Sep 06 '18 at 06:51

I have found one solution to rectify above error,you just have to paste this below line Meta tag while uploading server ..if you find this helpful please let me know so..

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

score 5 · Answer 2 · answered Oct 16 '17 at 07:36

5

save this (https://www.google.com/uds/api/elements/1.0/7ded0ef8ee68924d96a6f6b19df266a8/transliteration.I.js) file locally

find for "qi="http://www.google.com" then change it to qi="https://www.google.com"

it will work

this is description for prev answer of @Nitin Goyal

answered Oct 16 '17 at 07:36

Amit Kumar Pawar

3,252
1
20
27

I'm facing the same problem as well , when you say , you downloaded `translationI.js` to your server , how did you get it to work with the example given in google site ? , like i believe that translationI.js get's called internally rite ? – RaJesh RiJo Apr 25 '18 at 10:15
Nup yo can call it in your code like normal js file – Amit Kumar Pawar Apr 25 '18 at 11:02
In normal file, i am getting `Mixed Content: The page at 'https://extranuclear-freque.000webhostapp.com/lang.html' was loaded over HTTPS, but requested an insecure script 'http://www.google.com/inputtools/request?text=gy&ime=transliteration_en_bn&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&uv&cb=callbacks._2j46jfkrs'. This request has been blocked; the content must be served over HTTPS` error – RaJesh RiJo Apr 25 '18 at 11:58
have u changed "qi="http://www.google.com" then change it to qi="https://www.google.com" to in transliteration.I.js – Amit Kumar Pawar Apr 25 '18 at 12:27
I have changed, but still i am getting below error `transliteration.I.js:281 Mixed Content: The page at 'https://***.org/Translate.html' was loaded over HTTPS, but requested an insecure script 'http://www.google.com/inputtools/request?text=dfdsgf&ime=transliteration_en_ta&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&uv&cb=_callbacks_._0jgf4egx4'. This request has been blocked; the content must be served over HTTPS.` – RaJesh RiJo Apr 25 '18 at 13:15
When i am using `transliteration.I.js`, The translation is working fine. But the translate suggestion not working properly and its showing out of `div.`. – RaJesh RiJo May 11 '18 at 12:30

score 3 · Answer 3 · answered Oct 12 '17 at 15:47

3

I have research on the problem and found that google having hardcore into the translationI.js

for fix this issue you can download that file on to your computer and upload to your own server and change the http://google.com to https://google.com that will solve your problem

answered Oct 12 '17 at 15:47

Nitin Goyal

497
4
16

@AmitKumarPawar Can pls tell me what should I do in the above code to make it work? if we save the transliteration.I.js file locally, will it work? I tried that one. it is not working. Pls help me – Munavar Fairooz Nov 04 '17 at 07:26
@Munavar Fairooz yes you have to save that file locally then have to change qi="http://www.google.com" to qi="https://www.google.com" it worked for me – Amit Kumar Pawar Nov 06 '17 at 06:39
@AmitKumarPawar Not working for me. Do we have to remove – Munavar Fairooz Nov 07 '17 at 08:46
@Munavar Fairooz yes you have to remove online script calling link and replace with your local file address – Amit Kumar Pawar Nov 07 '17 at 09:07
I'm facing the same problem as well , when you say , you downloaded `translationI.js` to your server , how did you get it to work with the example given in google site ? , like i believe that translationI.js get's called internally rite ? – RaJesh RiJo Apr 25 '18 at 10:15
@RaJeshRiJo you have to add js file yourself. in the body of your Code – Nitin Goyal Apr 29 '18 at 02:56
When i am using `transliteration.I.js`, The translation is working fine. But the translate suggestion not working properly and its showing out of `div.` – RaJesh RiJo May 11 '18 at 12:31

score 3 · Answer 4 · answered Jun 01 '18 at 15:14

Here is a step by step process:

First, there's a link to API:

<script type="text/javascript" src="https://www.google.com/jsapi">

Second, Visit the API link above and search the contents as given below:

google.loader.ServiceBase = 'https://www.google.com/uds';

Now, this is the important part!

You need to replace the link of google.loader.ServiceBase = 'yourfile.js';

note: yourfile.js is a script created by you.

And to do that - you need to create two separate JavaScript files. Why? because the google.loader.ServiceBase is inside google.com/jsapi

This is the process I did:

step 1: Create two JavaScript files - lets say main.js and extra.js

step 2: save the contents of https://www.google.com/jsapi to main.js

step 3: save the contents of https://www.google.com/uds/api/elements/1.0/7ded0ef8ee68924d96a6f6b19df266a8/transliteration.I.js to extra.js

step 4: In extra.js - find qi="http://www.google.com" and replace with qi="https://www.google.com" - remember http is changed to https and save it.

step 5: Now back to main.js - you have to find the google.loader.ServiceBase = 'https://www.google.com/uds'; and replace with google.loader.ServiceBase = 'extra.js'; and save it.

step 6: Call the javascript - the main.js one to your html.

<script type="text/javascript" src="main.js">

https://www.google.com/jsapi, this re-directed to https://www.gstatic.com/charts/loader.js, Is this source are same as you described? — E J Chathuranga, May 14 '20 at 16:22

score 1 · Answer 5 · answered Apr 16 '19 at 10:58

1

Extending Min Somai's answer for all those who are facing an issue with the pop up not showing up correctly.

Copy CSS from this link & add it to a file transliteration.css. Add the following line to index.html

<link type="text/css" href="assets/google/js/transliteration.css" rel="stylesheet"/>

This should get you the correct CSS required for showing the transliteration popup.

answered Apr 16 '19 at 10:58

Varun Joshi

599
2
9
24

but still the corrections appear at te bottom of the page – Prashanth Benny Jun 29 '19 at 07:28

score 1 · Answer 6 · edited Oct 01 '19 at 06:03

1

  var control =
            new google.elements.transliteration.TransliterationControl(options);

        var ids = ["transl1", "transl2"];
        control.makeTransliteratable(ids);


//Add the following line to make it work over https

control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';

edited Oct 01 '19 at 06:03

tripleee

175,061
34
275
318

answered Oct 01 '19 at 06:02

Dalbir Singh

11
1

ask2rg · Answer 7 · 2020-06-09T08:39:43.663

Working Demo:

<html>
  <head>    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <script type="text/javascript">
      google.load("elements", "1", {
            packages: "transliteration"
          });    
      
      function onLoad() {
        var options = {
            sourceLanguage:
                [google.elements.transliteration.LanguageCode.ENGLISH],
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI ],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

                var control = new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id 'transliterateTextarea'.
        control.makeTransliteratable(['transliterateTextarea']);
        //Add the following line to make it work over https
        control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';
  }
    google.setOnLoadCallback(onLoad);
      
    </script>
  </head>
  <body>
    <textarea id="transliterateTextarea" style="width:600px;height:200px">यहाँ टाइप करे ...</textarea>
    <p>(Press Ctrl+g to toggle between English and Hindi)</p>
  </body>

</html>

Loading "elements" other than "inputtools" is unsupported. – John Aug 05 '20 at 12:12 — John, Aug 05 '20 at 12:12

Javascript google transliterate API not served over https

7 Answers7

Here is a step by step process:

Linked