wordpress https effects.js issue - javascript

I added SSL to a domain running Wordpress. When I access through https I get
Reference error: $ is not defined in resources/effects.js and the functions using this script break.
If I access through http then no error.
I did a Google search but could not find any reference to an issue like this. Any ideas?

I found the issue and solution. Turns out the particular jquery library i was calling was not available from the cdn over a https connection. It took a while to figure out because i was using the Firefox console to debug and it showed a successful connection, 200 OK. I eventually switched to Chrome js console and it showed this error: Failed to load resource: net::ERR_INSECURE_RESPONSE.
Also Google does not host the 1.2.7 library and the only cdn i could find that has it is cloudflare:
https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js

Related

Sticky-kit.js not working even in the official example page

I´m working with sticky-kit for in my web project for a while. Now, I´m developing new functionalities with sticky-kit that are not working. But, the point is even the examples in the sticky-kit official web page are not working for me: https://leafo.net/sticky-kit/#examples. I can see a lot of javascript errors in the console. I´m pretty sure I´m missing something stupid, but I don´t know what.
UPDATE:
I can see these errors in the console:
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure script '<URL>'. This request has been blocked; the content must be served over HTTPS.
main.js:3 Uncaught ReferenceError: $ is not defined
at main.js:3
at main.js:24
example.js:5 Uncaught ReferenceError: $ is not defined
at example.js:5
at example.js:54
You cannot do anything about it but inform the maintainers of sticky-kit.js that they update there site. As their site is only reachable via https (which is good) they are not allowed to load 3rd party code via http like the do with google fonts or jQuery.

What am I doing wrong with the Google Drive Picker example code?

On this page there is an example of how to include the Google Drive Picker in a plain JavaScript web page. I've copied and pasted the sample code into a file on my machine, and followed the instructions for replacing the example strings with my own API key, Client ID, and App ID.
If I serve the page from localhost using python -m SimpleHTTPServer 8000, and visit the page, it fails in two ways. First, the Drive dialog that pops up says "There was an error! The API developer key is invalid." Second, on the console, I see the errors below. Searching the web tells me that this is probably because I'm using a non-HTTPS connection, from which the Google API tries to make an HTTPS connection to Drive. (Contrary to what they errors seem to say.)
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').
(anonymous) # cb=gapi.loaded_0:46
Uncaught ReferenceError: init is not defined
at onload (https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…22%7D))&rpctoken=6pstmf1ss7m2&rpcService=v8gvn97850jj&thirdParty=true:3:54)
If I serve the page from localhost using this handy python script for an SSL web server, and visit the page, it fails in a different way. The Drive dialog that pops up says the following.
400. That’s an error.
Error: origin_mismatch
Request Details
proxy=oauth2relay379676703
immediate=false
scope=https://www.googleapis.com/auth/drive
origin=https://localhost:8000
response_type=token
redirect_uri=postmessage
state=912029351|0.3907265328
client_id=[REDACTED]
include_granted_scopes=true
jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.en.eBn7I_cE2GI.O/m=__features__/am=AQ/rt=j/d=1/rs=AGLTcCNXKKlDNVVUdz0bvaxNh7fYe-hpSQ
gsiwebsdk=1
That’s all we know.
Although this seems to suggest that the Drive API doesn't want to hear from localhost, I have the credentials for the app (in my Google Developer Dashboard) set to accept requests from https://localhost:8000/* and http://localhost:8000/*.
What am I doing wrong?
You can't use localhost as the 'origin' address - that's a limitation of Google APIs. To deal with this issue, you might want to go for one of the options suggested in this question - either use a URL-shortener or configure your hosts file to have a custom URL resolved to 127.0.0.1.

How to catch 'ga is not defined' in your dev environments

So I have my development environment, and every time I run the project, I have a javascript error in my console:
ga is undefined
Of course I am not at the correct domain so Google Analytics see this as an issue and I am fine with that, but it doesn't allow the rest of my Javascript to run so I have modals and other JS based functionality that stops working.
My thought were I could just write a wrapper method and check for ga undefined. But before I do that I just wanted to see if there was a better solution or possibly different way of thinking about my setup.
Cheers,
Devin
I solved my issue with a method of redefining ga rather than trying to catch the error. In the backend we had logic to only included the Google Analytics script tag if the host url included our domain so when it was localhost or a dev url the script was not included.
So as a resolution I took the answer from this SO question ( Google Analytics Tag for Dev vs. Prod ) and implemented a similar solution in the backend instead and excluded the following code when not our production website domain.
ga('create', 'UA-********-1', 'mywebsite.com');
The result, ga was still defined but does not send data to our Google Analytics account.
Good Luck,
Devin

Issue with Youtube Data API integration

I wanted to integrate the Youtube Data API in my application. For the same reason, with reference to the following link,
https://github.com/youtube/api-samples and create my client id and tried running the code.
I am working with Javascript + HTML. While running the code I am getting the following error.
Load denied by X-Frame-Options: https://accounts.google.com/o/oauth2/auth?client_id=AIzaSyARXJSURlAnAm48f3uXok0rB7GrEGb3pLc&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay311121687&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost%3A8080&response_type=token&state=475509781%7C0.2158929842&authuser=0 does not permit cross-origin framing.
Can anyone suggest me what went wrong and how can I fix the same.
Try to break down your requested URL to the minimum. Maybe there is one GET that conflicts with other configs.

Javascript library (tabSlideOut) hosted on GoogleCode returning 403 error

One of the Javascript files we use in a website is reporting a 403 error when we try to request it from googlecode.com.
http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js
Failed to load resource: the server responded with a status of 403 (Forbidden)
This has previously been working without any problems for many months.
The problem is inconsistent in that it seems to work in my office but if I log on to an external machine it returns the 403. This may be down to caching so I'm not focusing too much on that.
Does anybody have any ideas how this might have happened? It's quite worrying that code hosted externally can suddenly be inaccessible!
It seems working at my end as well.
You may track the URL requested using firebug.
or
Please provide the URL of webpage in which you are accessing JS file because sometimes cross site scripting is the reason.
Thanks,
Krishan
Alan, I had to find another source for the .js file. I downloaded it from the page below and referenced it from within my site. The file I found is under the Android section of code.google.com, but it appears to be working fine:
http://code.google.com/p/androidoc/downloads/detail?name=jquery.tabSlideOut.v1.3.js&can=2&q=
Vince

Categories

Resources