Have discovered an issue that when a user hits refresh in IE, Google recaptcha (invisible or v2) will sit and spin indefinitely. From monitoring traffic it appears to not ever make the API calls out to Google for recaptcha when someone clicks the checkbox.
Steps to reproduce with recaptchaV2:
On initial load, click recaptcha checkbox
Expected: green checkmark
Actual: green checkmark
Click refresh or f5
Click recaptcha checkbox
Expected: green checkmark
Actual: spins
Notes:
If dev tools are open, in step 3 the actual is the expected green checkmark
If ctrl + f5 is used in step 2, in step 3 the actual is the expected green checkmark
No console errors occur
Tried calling grecaptcha.reset() with no luck
Below is the code I used to isolate the problem. I used npm install http-server –g and http-server to serve the file.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<script src="https://www.google.com/recaptcha/api.js?onload=onload&render=explicit" async defer></script>
</head>
<body>
<div id="gr123"></div>
<script>
window.hasLoaded = false;
window.onload = function() {
var elem = document.getElementById("gr123");
if(!window.hasLoaded) {
window.hasLoaded = true;
grecaptcha.render(elem, {
"sitekey": "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
"size": 'normal'
});
grecaptcha.reset();
}
}
</script>
</body>
</html>
Related
EDIT: I have found the solution. Since others may make the same mistake, I will put the answer at the bottom.
I am using Visual Studio Code. I am new to it.
I have Debugger For Chrome and Debugger For Edge installed.
I have Live Server installed.
I have launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://127.0.0.1:5500/a.html",
"webRoot": "${workspaceFolder}"
}
]
}
I have my basic html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
</body>
<script>
function myfunc(){
alert("clicked");
}
</script>
</html>
I have my breakpoint on the line alert("clicked");.
I click the Debugging icon on the left with the spider, and then click the green button to launch.
Now the weird bit:
The program launches and breaks immediately on the alert line, even though the button has not been pressed.
I continue.
But then when I click the button and expect the break point to be met. It is not. The alert occurs without breaking at all.
Anyone know what I am doing wrong?
Solution:
It does not like the <script> outside the body. If you change the html file to have the <script> inside the body, then it works fine.
Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
<script>
function myfunc(){
alert("clicked");
}
</script>
</body>
</html>
I found out what was going wrong.
It does not like the outside the body. If you change the html file to have the inside the body, then it works fine.
Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myfunc()">Click</button>
<script>
function myfunc(){
alert("clicked");
}
</script>
</body>
</html>
I have a cordova project in Visual Studio. I need server data which I get by making ajax GET requests. I have fixed CORS issues by adding the meta tag
<meta http-equiv="Content-Security-Policy" .../>
and my back-end server also responds to CORS requests because I added this line to my web.config:
<add name="Access-Control-Allow-Origin" value="*" />
My setup WORKS in simulation and on devices for both iOS and Android.
Now I need to do my first Windows app. When I change to build for Windows 10, in debug mode the app never gets any data from the server.
This is my observations:
The server does not receive any request from the app.
When I press F12 and look at the Network Tab, the request is marked with status 200, although the request is not registered at the server.
If I start Fiddler, the app starts to receive data, meaning data is returned to every request.
This screenshot is of the Developer Tools. I press a Refresh button in the app. First 2 entries are made without Fiddler running. Next I start Fiddler and now data is returned. I noticed the "(From Cache)" in the "Received" column, but clicking the "clear cache" button (in dev. tools) does not remove the problem.
Are there any special settings that I might not have set for Windows in Cordova?
Edit: Here is some simple source that fails in the same maner. To Reproduce, create a blank Cordova project in Visual Studio, add jQuery, and deploy.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: * gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>WinApp</title>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function ajaxReq() {
$.ajax({
type: 'GET',
url: 'http://192.168.1.79/',
dataType: 'json',
success: function (msg, status, jqXHR) {
alert('it worked')
return true;
},
error: function (jqXHR, exception) {
alert('it failed')
return false;
},
timeout: 30000
});
}
</script>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<button onclick="ajaxReq(); return false;">click me</button>
</body>
</html>
The posted code works if running as a browser simulation for iOS and Android. It fails on Local Machine for Windows builds (x86 & x64).
I am working with serving a simple polymer element from a Tomcat server. The element works fine in Chrome but fails in the recent version of Firefox 49.0.2.
I have attached the content the two elements and the problem seems to happen because the WebComponentsReady event is fired repeatedly over and over again in Firefox but in Chrome only four times.
Furthermore by including a include on the paper-slider element in the simple-element below causes Firefox to go into a loop where it keeps reloading the files over and over again ?!
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
What is going on?
simple-element-demo.html (below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Demo of simple element">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./simple-element.html"></link>
</head>
<body>
<div>Hello! I am going to demo simple-element. See below me.</div>
<simple-element></simple-element>
</body>
<script>
document.addEventListener('WebComponentsReady', function(e) {
console.log('WebComponentsReady', e);
debugger;
});
</script>
</html>
simple-element.html below
<!doctype html>
<html>
<head>
<title>Simple Element</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>
<body>
<dom-module id="simple-element">
<template>
<div class="container flex-horizontal">
Hi There! I am Simple Element.
</div>
</template>
<script>
Polymer({
is: 'simple-element',
properties: {
prop1: {
type: String,
notify: true
},
},
created: function() {
console.log('Simple is created');
},
ready: function() {
console.log('Simple is ready');
}
});
</script>
</dom-module>
</body>
</html>
I was able to fix the problem by including webcomponents-lite.js only once in the main file: simple-element-demo.html.
I removed the line below from the simple-element.html and now it works just fine in all browsers.
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
I have been struggling to submit a simple get request to google places api
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx
I keep on getting an error:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8…ius=500&types=food&name=cruise&key=xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '8100' is therefore not allowed access.
I looked this up online and it has something to do with CORS but I havent been able to figure anything out. If someone could point me in the right direction that would be great.
thanks
I was able to call that url restfully using ionic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="components/lib/ionic/css/ionic.css" rel="stylesheet" />
<script src="components/lib/ionic/js/ionic.bundle.js"></script>
<script src="components/lib/ionic/js/angular/angular-resource.js"></script>
<script type="text/javascript">
angular.module('myApp',
[
'ionic',
'ngResource'
])
.factory('GetData', function ($resource)
{
return {
getg: function ()
{
return $resource('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx', null).get();
}
}
})
.controller('SomeController', function (GetData)
{
GetData.getg().$promise.then(
function (answer)
{
console.log(answer);
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="SomeController"></body>
</html>
What worked for me was to install this addon:
cordova-plugin-whitelist
Console:
cordova plugin add cordova-plugin-whitelist
I just created a new project using the visual studio cordova starter template. However I am unable to get the javascript document ready function to be called when running from the windows phone 7 emulator. When running from a browser it is called fine.
onDeviceReady()... gets logged to the console, but $(document).ready(...) does not.
Can anyone see any obvious reason for this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css"/>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
</head>
<body>
<div id="home" data-role="page">
</div>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
$(document).ready(function () {
console.log("doc ready");
});
</script>
</body>
</html>
document.ready is most likely being called before the PhoneGap code has initialized the console which you are logging to. The WP7 browser does not have its own console, the console is implemented by the PhoneGap framework.