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