Facebook App is not working in Chrome but well in Firefox - javascript

I have just started making Facebook Apps using heroku. I made a test app. I uploaded a page on heroku which uses HTML5, CSS and Javascript. The app is not showing in Google Chrome https://apps.facebook.com/shrytestapp/ but works well in Mozilla Firefox. Also, the page works well when opened in heroku server http://salty-shelf-6707.herokuapp.com/.

When you access the app within Facebook, HTTPS is used to transfer the data, but Chrome has blocked content delivered over normal HTTP as a result and insists that everything be transfered securely whereas Firefox isn't so fussy.
Here's what the Console is showing in Chrome
[blocked] The page at https://salty-shelf-6707.herokuapp.com/
ran insecure content from http://www.google.com/jsapi.
Uncaught ReferenceError: google is not defined
Google's JS API has been blocked and the JavaScript fails to run.
(You also have some not found errors, but that's unrelated)
The app works fine through the http://salty-shelf-6707.herokuapp.com/ as you mentioned, but not through https://salty-shelf-6707.herokuapp.com/
Try using the following instead to load the API
<script type="text/javascript" src="//www.google.com/jsapi"></script>
the // at the start of the src value will make the url protocol-relative or for the correct technical term, scheme-relative.
Paul Irish, the lead developer of HTML5 Boilerplate, has more information about this in a post on his site.

Related

Chrome not supporting getUserMedia

I have a form in my laravel webapp where the user needs to add a profile picture through webcam. While developing in localhost(secure origin), it was working fine but now when i am trying to access it using my IP address, it doesn't seem to work.
I used "navigator.mediaDevices.getUserMedia" for accessing webcam while developing my project but now when the website is made live(or testing through my IP), chrome says that "getUserMedia() no longer works on insecure origins". I also tried Webcam.js but same came across the same error.
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
Error output in console:
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost.
did you check this page? I think you're using HTTP. I'd like to switch to HTTPS and test it.
https://developers.google.com/web/updates/2015/10/chrome-47-webrtc?hl=en
As you can see from the doc, chrome requires a secure context for using it:
So you must switch to https for testing it in chrome

Problem publishing my Office Add-in to Azure, Office.js not fully loaded error, but works fine from localhost:3000

I've built and tested my add-in using Fabric React. When I sideload it from localhost:3000, everything works fine. I then created an Azure app services website to host it. Updated the manifest XML file to point to the correct URL instead of localhost:3000. I updated all references from Office.initialize to Office.onReady(). Still, every time I sideload the app from the Azure manifest I get the following error:
Office.js has not fully loaded. Your app must call "Office.onReady()"
as part of its loading sequence (or set the "Office.initialize"
function). If your app has this functionality, try reloading this
page.
Any ideas as to why this happens?
I can’t reproduce the issue from my side.
I’d recommend you to debug your add-in via the steps in the following link: Test and debug Office Add-ins

Favicons and mixed content WHYYYY?

I am building a web app that is served over https. I am getting a lot of console warnings like these:
Mixed Content: The page at 'https://www.sharewalks.com/' was loaded over
HTTPS, but requested an insecure image
'http://yandex.st/lego/_/pDu9OWAQKB0s2J9IojKpiS_Eho.ico?1493850556643'.
This content should also be served over HTTPS.
There are 14 of these - from the following urls (the numbers change):
FAVICON ERRORS:
http://www.google.com/favicon.ico?1493850556625
http://www.baidu.com/favicon.ico?1493850556625
http://www.cloudflare.com/favicon.ico?1493850556625
http://www.yandex.ru/favicon.ico?1493850556633
OTHER?:
http://yandex.st/lego/_/pDu9OWAQKB0s2J9IojKpiS_Eho.ico?1493850556633
I need all content to be served HTTPS because I want to use geolocation services and I read that some browsers won't allow it unless ALL content is HTTPS. In testing, navigator works on laptop Chrome, but not in mobile browsers (chrome, safari and firefox).
But I'm not requesting these favicons. I don't really even know from where they are being called.
My question is what are these favicons and why are they messing with me? Is there any way around this?
OK I did a global search within my project for some of these url names, and lo! it turns out I was using a library called is-online which calls some of these sites as "tests" to see if you're online. I changed the 'hostnames' file to use the full https url and voila the errors disappeared. Thanks for Barmar for taking the time to answer me without merely downvoting my question!
Firefox -> F12 -> console , you can see the errors of mixed content
Also in Chrome you have the same results in "developer tools" -> console

Website without XMLHTTPREQUEST without webserver

For school we have to make a site.
That site has to run from a local file by opening the index.html.
I am using:
<script type="text/javascript">
$("#navbar").load("SideBar.html");
</script>
To get a sidebar.
The problem is that I get the XMLHTTPREQUEST error on Chrome, on safari it works perfectly.
The teacher does not allow to use a webserver.
What can I do so that my teacher is able to run my site without a webserver?
This is due to chrome security policies. If you don't disable it you won't be able to load local file.
You can disable it by running chrome with the following command on windows.
chrome.exe --allow-file-access-from-files
There's a bit more information here.

Google tag manager error with anonymous function

I have a issue after integration Google-tag-manager code to my web site: "GET https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX (index):336(anonymous function) (index):336(anonymous function)".
We suppose it is related that this script is not directly specified https protocol, and therefore the browser interprets the request as unsafe. This issue happend only Google Chrome. On FireFox everything ok. How it can be fixed?
I have read that issue can occur due to AdBlock, but when I off if, issue wasn't resolved.
As stated in Setup and installation you may try to verify or troubleshoot your installation with:
Tag Manager's Preview Mode
Tag Assistant Chrome extension

Categories