Javascript google transliterate API not served over https

Question

Javascript google transliterate API not served over https

5.1k Views Asked by Munavar Fairooz At 21 June 2017 at 05:18

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>

Original Q&A

There are 7 best solutions below

**Nitin Goyal** · Answer 1 · 2017-10-12T15:47:08.817000

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

**Amit Kumar Pawar** · Answer 2 · 2017-10-16T07:36:42.010000

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

**Min Somai** · Answer 3 · 2018-06-01T15:14:14.707000

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

**akshay5662** · Answer 4 · 2018-09-06T06:51:31.260000

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

**Varun Joshi** · Answer 5 · 2019-04-16T10:58:18.193000

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.

**Dalbir Singh** · Answer 6 · 2019-10-01T06:02:32.537000

  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';

**ask2rg** · Answer 7 · 2020-06-09T08:34:40.630000

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>

Javascript google transliterate API not served over https

There are 7 best solutions below

Here is a step by step process:

Related Questions in JAVASCRIPT

Related Questions in API

Related Questions in JSAPI

Trending Questions

Popular # Hahtags

Popular Questions