Google reCAPTCHA v2 invalid domain for site key - validation

I am currently trying to add reCAPTCHA on the client side and I have followed the documentation accordingly from both Google and reCAPTCHA's website. However, for some reason I keep getting this error message:
I've placed my script tag in the head and my reCAPTCHA div just before the closing form tag.
<!-- Google reCAPTCHA API -->
<script src='https://www.google.com/recaptcha/api.js' async defer> </script>
<form action="URL: https://www.google.com/recaptcha/api/siteverify" method="POST"> -->
<!-- reCAPTCHA Widget Appears Here -->
<div class="g-recaptcha" data-theme="darklight" data-sitekey="my_public_sitekey"></div> -->
</form>
Please let me know if you need to see more of my code. From what I've read in other forums people had to disable domain name validation, however, that causes issues with verification.
Any help is much appreciated. Thanks!

After hours and days of research I've finally found a solution. This error is actually a reCAPTCHA issue that still has not been fixed. You can work around their protocol issues and disable domain check in advance settings. However, that can potentially mess up the validation process.
Initially I was testing this locally file:///users/file-path-to-my-file. Finally last night I found out you cannot use reCAPTCHA this way. I ended up testing my site publicly and now it works just fine. Hope this helps someone!

You have to replace my_public_sitekey with your site key which provided by Google
finally, your cod should be like this
<div class="g-recaptcha" data-theme="darklight" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
if you are testing your site in localhost, you should get a reCaptcha key for localhost.

Disable this option in settings:
Verify the Android package name of reCAPTCHA solutions.
This solved my problem.

Related

Google Recaptcha doesn't work on localhost

Google Recaptcha is not working on localhost. I have used the admin console to create a key just for localhost and I have even disabled domain validation under advanced settings. I still get an error indicating that localhost is not on the list of supported domains. Code is below
in the head tag of HTML
<script src='https://www.google.com/recaptcha/api.js'></script>
In the body tag of HTML
<div class='form-group'>
<div class="g-recaptcha"
datasitekey="6Leefj0UAAAAAAb8CMhdkGZxmVVhKGxMGkUPqB6z"></div>
</div>
The above site key doesn't have domain validation enabled (I have disabled it out of desperation). So anyone should be able to replicate this error using it. How do I get Google Recaptcha to work?

Images disappearing when served over https

I just signed up for a cloudflare account and began forcing everything to https just to see how it worked, and to my surprise, all my images refused to work over https. now this is something I don't understand because the assets are all linked via:
HTML:
<img src="./images/image.jpg" />
CSS:
background-image: url(../images/image.jpg);
So I figured, I would change it up to use absolute urls with // instead of relative paths:
HTML:
<img src="//example.com/images/image.jpg" />
CSS:
background-image: url(//example.com/images/image.jpg);
this did not work either. so I decided to hard link to https:
HTML:
<img src="https://example.com/images/image.jpg" />
CSS:
background-image: url(https://example.com/images/image.jpg);
and again, not working. what happens is the images all buffer and as soon as they are fully downloaded and displayed,they disappear abruptly.
All of the images are available over https or http so I do not understand the issue here. Would appreciate a little insight into this and whether its a cloudflare specific issue or an issue with how I'm writing my code. Can anyone confirm that relative paths should call assets via whatever protocol is currently in use? ive not seen any issue with it in the past.
Thanks in advance
Odd problem.
Would appreciate a little insight into this and whether its a
cloudflare specific issue
In general, there should be no problem to do what you are asking, there's no CloudFlare issue
or an issue with how I'm writing my code.
Both of your code examples look good to me, the first perhaps preferable because it will work with both HTTP and HTTPS
<img src="//example.com/images/image.jpg" />
Have you
ruled out browser issues by testing with another browser?
cleared the CF cache?
tested with CF set to development mode?
ruled out any app related issues by testing https image loading on a plain HTML page?
tried changing the CF SSL Level (Flexible, Full, Strict)?
if still no joy, can you post a URL?
Good luck!
As it turns out this was a Cloud Flare issue. They have a feature called Rocket Loader, which compresses all your js files into one long minified JS file which was apparently causing one of my scripts to break, only when served over https. It has been raised as a bug with Cloud Flare support (as it is odd that it works over http but not https). This particular issue was with sss.js (Super Simple Slider) the solution supplied by Cloud Flare Support was to change my script tag for sss.js from:
<script type="text/javascript" src="js/sss.js"></script>
and adding data-cfasync="false" to the tag:
<script type="text/javascript" data-cfasync="false" src="js/sss.js"></script>
Apparently this extra bit of code makes Cloud Flare's Auto-Minifier and Rocket Loader ignore that particular file.

Google analytics doesn't work on my heroku app

I run a python web app on heroku platform,
using heroku sub domain like: example.herokuapp.com
and I add google analytics js code to my page:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'herokuapp.com');
ga('send', 'pageview');
I have insert this script over 12 hours, but when I enter my ga account admin panel, it tell me:
The Google Analytics tracking code has not been detected on your
website's home page. For Analytics to function, you or your web
administrator must add the code to each page of your website.
however, I still can see some PV on the report panel
Does the ga work or not? How can I solve this problem? If I use a top level domain could solve this problem?
Two things regarding your ga.create() call:
1) The third parameter ("herokuapp.com" in your case) is supposed to be a Javascript object, not a plain string. Did you actually mean {'cookieDomain': 'herokuapp.com'}?
2) If you did... then it should be example.herokuapp.com -- you can't set a cookie on all of herokuapp.com.
I've found that the new universal analytics is actually a little slow to kick in within the interface. The old Google analytics used to be like this and could take a day to work.
I have set up universal analytics on 6 sites now, I could see the calls being made to google but it took a day for data to show.
Have you used any debugging tools available.
For Firefox httpfox is a great tool, once installed select start and filter by 'collect' this will display analytics calls if they are working.
In chrome there are 2 good extensions, tag assistant and ga debug both by Google. Both of these can help identify implementation issues.
Hope this helps
John
Credit: https://towardsdatascience.com/advancing-to-professional-dashboard-with-python-using-dash-and-plotly-1e8e5aa4c668#cf77
Try this
import dash
app = dash.Dash(__name__)
app.index_string = """<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131327483-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131327483-1');
</script>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>"""

Generate Pinterest Share Button That Specifies URL

I am trying to create a "pinterest share" button, but am running into a snag.
Currently, I have the pinterest button (generated from their Widget Builder) appearing in a Lightbox. (For certain reasons, it must appear this way.)
The issue is the Lightbox code has direct linking on it, so the code for the lightbox window is something like: www.domain.com/#/social/4
Pinterest is picking up that URL (which has no images since it's just the lightbox) instead of the URL for the main page (www.domain.com).
Does anyone know how I can specify the exact URL to share via the pinterest button?
I have read some posts that said doing this would work:
<img src="//assets.pinterest.com/images/PinExt.png" alt="Pin it" / > <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
However, specifying the URL does not seem to work at all. It appears to be totally ignored and has no impact.
Any ideas?
Thanks in advance!
You can use a standard link and specify all the data in the parameters:
<a href="http://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
Source: http://developers.pinterest.com/pin_it/
You can try using structured meta data and Rich Pins.

iframe and Remarketing Code Madness

So I have nearly finished working on an a eCommerce platform with Magento and we are now running Remarketing campaigns via Google's Ad Display Network.
Now...
If you look here: http://img211.imageshack.us/img211/8859/52447256.jpg
I had placed the remarketing tag underneath my footer links and it has caused those links to be shifted on the bottom and in the center where as before it was flush and tidy on the right hand side in line with the newsletter opt-in form.
What's causing this is the iframe width. If I set '300' to '0' then its back to how it should be and perfectly in line.
Now the problem...
I placed this remarketing tag in magento and the code does not provide any iframe html code. I checked the footer by going to:
\MY WEBSITE\html\app\design\frontend\base\default\template\page\html\footer.phtml
What did I find? Barely anything lol. So now I am confused as to where this iframe was created and how to solve it. Any ideas would highly be appreciated!
Steve.
I ran into same problem just yesterday while working in a shitty Comarch Aurum CMS and was looking for a safe solution which wouldn't get me banned:
Google remarketing tag - iframe height issue
so if anyone else has this problem, the most common solution is to insert the conversion.js script tag into a hidden div:
<div style="display: none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> </script>
</div>
src:
keanrichmond.com/google-remarketing-messing-with-my-design.html

Resources