google api - Chrome uncaught error 'Protocols must match' on G+ signin -

i've added g+ login button on website, keep seeing issue. in cases comes first time , if try connect after refreshing page, works.

here's error:

uncaught securityerror: blocked frame origin .com" accessing frame origin "https://accounts.google.com". frame requesting access has protocol of "http", frame being accessed has protocol of "https". protocols must match.

i saw post google + signin button blocked frame solution isn't relevant me.

first, want emphasize should using https when handling user credentials. if can, get ssl certificate , serve content on https. using https, can prevent mitm attacks , user information leaks.

that aside, there number of potential sources triggering warning:

1. if using sign-in button page serving http instead of more secure https, communication sign-in servers gets blocked. if sign-in works , doesn't, may cause.

2. if authorized javascript origin protocol (http / https) doesn't match, google authorization server reject client (http://yoursite.com when meant https://yoursite.com)

3. if authorized javascript origin not match (e.g. put .com in authorized origin, when meant yoursite.com) oauth server reject frame.

listing authorized origins (obfuscated security) google developer console , site might determine what's going on in case.

a few things can change see if helps:

• try changing cookie policy either 'single_host_origin' or 'http://yoursite.com'.
• try cleaning authorized origins in the developer console include http:// domain.
• try accessing site incognito tab, if works, browser cookies may in bad state site.
• try using chrome network diagnostics see if specific requests failing.
• try replacing includes use explicit protocol includes referencing relative protocol (e.g. replace <script src="https://foo.bar/include.js" /> <script src="//foo.bar/include.js" />)