When I click the box to confirm I am not a robot, the blue spinner starts spinning but never stops. Eventually the error "Error: Permission denied to access property" appears in the browser console, followed by a (seemingly) random 10 -15 character string, e.g. "rne4xiajwyh".
My code:
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'my_site_key'
});
};
</script>
<form action="#" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
I'm struggling to fix this as I can't find any solutions online, and am unsure how to debug it. Any help would be much appreciated.
Thanks
EDIT: Error message in chrome:
Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
at Dp.f.Ub (https://www.gstatic.com/recaptcha/api2/r20170213115309/recaptcha__pl.js:349:353)
at Dp.vb (https://www.gstatic.com/recaptcha/api2/r20170213115309/recaptcha__pl.js:345:59)
<head>
...
<META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="http://www.example.org">
...
</head>
Error: Permission denied to access property “document”
It looks like you have to allow cross domain requests:
If you run apache (it might also be pasted in the .htaccess):
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin https://www.gstatic.com
</IfModule>
Or with php:
header("Access-Control-Allow-Origin: https://www.gstatic.com");
Or with nginx (server part):
add_header Access-Control-Allow-Origin https://www.gstatic.com; # < this is the needed header
Related
I have the following pages:
www.aaa.com/a.html
<input onClick=parent.miFunction() />
www.bbb.com/b.html
<script>
miFunction(){
alert("sss")
}
</script>
<iframe src="www.aaa.com/a.html"> </iframe>
The problem happend when somebody presses the button in www.aaa.com/a.html. The console logs the following error:
live:1 Uncaught DOMException: Blocked a frame with origin "www.aaa.com" from accessing a cross-origin frame.
at HTMLButtonElement.onclick (www.aaa.com/a.html:1:8)
Thank you!
I am trying to test an index from my local machine. I created a simple HTML page with a query box that sends the query to ES using the elasticsearch.js client. Both the index and the browser are on my desktop, so there shouldn't be a cross origin problem, but I keep getting an error that states:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/portal/book/_search?q=title%3Ahistoire. This can be fixed by moving the resource to the same domain or enabling CORS.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/. This can be fixed by moving the resource to the same domain or enabling CORS.
I tried enabling CORS, but get the same error. Here are the index's settings:
{
"portal": {
"settings": {
"index": {
"creation_date": "1421788614558",
"uuid": "jg-iHjnSTDGHODY0_x4Ysw",
"number_of_replicas": "1",
"http": {
"cors": {
"enabled": "true",
"allow-origin": "/(http://)?localhost(:[0-9]+)?/"
}
},
"number_of_shards": "5",
"version": {
"created": "1040299"
}
}
}
}
}
index.html
<!DOCTYPE html >
<html ng-app="portal">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/elasticsearch/elasticsearch.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="SearchCtrl">
<div class="container-fluid">
<div class="row-fluid">
<span class="span3">
<input class="input-block-level" ng-model="queryTerm" type="text">
</span>
<button ng-click="search()" class="btn" type="button">Search</button>
</div>
<div class="row-fluid">
Found {{ results.hits.total }}
<div class="span4">
<li ng-repeat="doc in results.hits.hits">
{{ doc._source.title }}
</li>
</div>
</div>
</div>
</body>
</html>
app.js
angular.module('portal', [
'controllers',
]);
var client = new elasticsearch.Client({
host: 'http://localhost:9200',
apiVersion: '1.3',
});
controller.js
angular.module('controllers', []).controller('SearchCtrl',
function($scope) {
$scope.search = function(query) {
$scope.results = client.search({
index: 'portal',
type: 'book',
q: 'title:' + $scope.queryTerm
}, function (error, response) {console.log('could not execute query!')}
);
};
}
);
Add following line to your config yml file
http.cors.enabled : true
http.cors.allow-origin: "*"
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers: X-Requested-With,X-Auth-Token,Content-Type,Content-Length
http.cors.allow-credentials: true
and kill elastic search java process on unix based system like is demonstrated on this topic response https://stackoverflow.com/a/41644614/11079315
I don't know why you are getting a cross domain error to begin with. Are you opening your front end as file://.... ? Totally random guess and not sure it matters. If you are and want to run your UI through a web server, you can open a terminal, cd into that dir and run 'python -m SimpleHTTPServer 7000'. Now your UI is running on localhost:7000.
For CORS settings, see http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/modules-http.html and, if you are using Chrome, http://www.williamjohnbert.com/2013/06/allow-cors-with-localhost-in-chrome/ might help.
In your config you should at least set 'http.cors.enabled: true' and 'http.cors.allow-credentials: true'. The other defaults should be sensible. You may also want to modify the 'http.cors.max-age' setting in case old settings are cached.
Use the js console, net tab in your browser to see what headers you are getting back.
I'm doing a site that fetches the stock property from a site and show it on my site.
But i'm having issue in displaying the it.
Here's the code :
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<iframe id="frame3" src="http://www.stockpart.net" sandbox="allow-forms allow-scripts allow-same-origin " style="visibility : hidden "></iframe>
<script>
$(document).ready ( function(){
$('#frame3').contents().find('.addClassClose').show();
});
</script>
I'm getting the following errors :
AD BLOCK NOT DETECTED
pop.js:1 rt():in true false tabunder 2
pop.js:1 rt():adv.bind http://serve.popads.net/servePopunder.php?cid=242978
pop.js:1 Uncaught SecurityError: Blocked a frame with origin "http://stockpart.net" from accessing a frame with origin "http://www.example.com". Protocols, domains, and ports must match.
Anyway is there anyway i can fetch information with the other site class/id using jQuery within an iframe?
I found the answer on the post posted by Patrick Evans with some modifications.
<?php
$homepage = file_get_contents('http://stockpart.net');
echo $homepage;
?>
Then put the iframe on the main page to get the stock information
This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 8 years ago.
I am a novice to PHP, trying to learn.
I have my php file present in www folder in the WAMP server.
<?php
echo 'Hi';
?>
This can be run if I go http://127.0.0.1/testRequestParameter.php from my Browser, it prints Hi
So now I created an HTML page(not present in the same directory)
<html>
<head>
<script src="jsLibrary/jquery-1.11.1.min.js" ></script>
</head>
<body>
<script type="text/javascript">
function getTestDataFromAjax()
{
var url = 'http://127.0.0.1/testRequestParameter.php';
$.ajax({
url: url,
success: function(data) {
alert(data);
},
async:false
});
}
</script>
<input type="submit" name="Button" onclick="javascript:getTestDataFromAjax(); return false;" />
</body>
</html>
And when I try to call that php through AJAX, the response is blank.
May be it I am missing something, any help will be appreciated.
Finding1: In my firebug it is showing, Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/testRequestParameter.php. This can be fixed by moving the resource to the same domain or enabling CORS.
Any setting which I need to change?
Scenario
I tested your script using EasyPHP: I created into http://localhost/script/test/ the file content.php
<?php
echo 'Hi!';
?>
Then, I added to my desktop index.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getTestDataFromAjax()
{
var url = 'http://localhost/script/test/content.php';
$.ajax({
url: url,
success: function(data) {
alert(data);
},
async:false
});
}
</script>
<input type="submit" name="Button" onclick="javascript:getTestDataFromAjax(); return false;" />
</body>
</html>
Then, I launched index.php and clicked on the button, which returned an error when clicked:
XMLHttpRequest cannot load http://localhost/script/test/content.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Solution
So, I edited my content.php like this:
<?php
header("access-control-allow-origin: *");
echo 'Hi!';
?>
And it's now working
Using JavaScript, I want to retrieve the content of the script files. These script files remain in local(in web page).
For example.
In web page, there is a script,
<script src="tool.js"></script>
Latter, I want to get the content of tool.js and process the retrieved result (like dump its content).
I have tried to use jQuery.getScript. However, it tells me that Origin null is not allowed by Access-Control-Allow-Origin.
try an ajax like the following
$.ajax('/tool.js', {
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function() {
console.log("call failed");
}
});
You need to configure your Access-Control-Allow-Origin:
Access-Control-Allow-Origin: *
This lets you use any resource to obtain assets from an external domain. Do this first and either Mahan's or Lars's solution will work.
More info:
Access-Control-Allow-Origin Multiple Origin Domains?
try using jquery.load() and put its contents on an element and use .html()
<html>
</head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
//setup ajax to work locally
$.ajaxSetup({
crossDomain: false,
isLocal :true
});
$("#a").load('jquery.js', function() {
alert($("#a").html());
});
});
</script>
</head>
<body>
<span id="a" style="display:none;"></span>
</body>
</html>
Browser Check:
the code above works and tested in FF, Safari, Opera and IE
but if you keep on having problem with Origin null is not allowed by Access-Control-Allow-Origin then having a web server installed is needed as said here; Origin null is not allowed by Access-Control-Allow-Origin
Reference:
http://api.jquery.com/load/
code for your disposal : http://jsfiddle.net/PeaH3/1/