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.
Related
I have an application with a front-end in Angular served by an S3 bucket, and a server in Express js.
To avoid clickjacking I am trying to take all possible actions so: "frame-buster" techniques for the client side and anti-clickjacking header for the server.
For the latter I have tried all the solutions indicated online. That is, I set the "X-Frame-Options" to "DENY" as I do not need any iframes in my application and set the "frame-ancestors" directive with the following code:
const app = express();
const helmet = require("helmet");
app.use(helmet.frameguard({ action: "DENY" }));
app.use(
helmet.contentSecurityPolicy({
directives: {
frameSrc: ["none"],
frameAncestors: ["none"],
},
})
);
I then used this html file to test my application:
<!DOCTYPE html>
<html>
<head>
<title>Iframe test</title>
</head>
<body>
<input type="text" id="inputSite" style="width:400px"/>
<input type="button" value="Open"
onclick="document.getElementById('iframe').src=document.getElementById('inputSite').value"
/>
<br/>
<iframe id="iframe" style="width:100%; height:800px;" ></iframe>
</body>
</html>
And these are the first http requests sent by the app:
[1]: https://i.stack.imgur.com/kaAOJ.png
[2]: https://i.stack.imgur.com/I12Rj.png
[3]: https://i.stack.imgur.com/p6HTQ.png
Does anyone know what this behaviour is due to and how I can solve it?
Thank you very much, have a nice day
I'm trying to learn ajax and I don't know back end language yet so I'm using firebase from google and I am running my code through localhost:8000 using python 2.7. I'm trying to GET/POST to this server:
https://ajax-practice-1f1b9.firebaseio.com/
If you can't access it, my JSON looks like this:
[
{
"id": 1,
"name" : "Will",
"drink": "American with creme"
},
{
"id": 2,
"name": "Donat",
"drink": "Vanilla Macchiato"
}
]
here's my HTML and javascript
$(function() {
$.ajax({
type: 'GET',
url: 'https://ajax-practice-1f1b9.firebaseio.com',
success: function(data) {
console.log(data);
}
});
});
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX jQuery course</title>
<!-- latest bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1>JQuery Ajax Tutorial</h1>
<h2>Coffee Order</h2>
<ulid="orders"></ul>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add-order">Add</button>
<!-- <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I get this error on the console:
Failed to load https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/: Redirect from 'https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/' to 'https://accounts.google.com/ServiceLogin?passive=1209600&osid=1&continue=https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/&followup=https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I did something similar using axios and ReactJs a while back and it worked without problems.
The URL https://ajax-practice-1f1b9.firebaseio.com will try to load the database in the Firebase Database console. You are probably trying to get the data through Firebase's REST API, which requires that the URL ends in .json.
So to get the JSON for that location, use https://ajax-practice-1f1b9.firebaseio.com/.json.
I'm trying to learn ajax and I don't know back end language yet so I'm using firebase from google and I am running my code through localhost:8000 using python 2.7. I'm trying to GET/POST to this server:
https://ajax-practice-1f1b9.firebaseio.com/
If you can't access it, my JSON looks like this:
[
{
"id": 1,
"name" : "Will",
"drink": "American with creme"
},
{
"id": 2,
"name": "Donat",
"drink": "Vanilla Macchiato"
}
]
here's my HTML and javascript
$(function() {
$.ajax({
type: 'GET',
url: 'https://ajax-practice-1f1b9.firebaseio.com',
success: function(data) {
console.log(data);
}
});
});
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX jQuery course</title>
<!-- latest bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1>JQuery Ajax Tutorial</h1>
<h2>Coffee Order</h2>
<ulid="orders"></ul>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add-order">Add</button>
<!-- <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I get this error on the console:
Failed to load https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/: Redirect from 'https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/' to 'https://accounts.google.com/ServiceLogin?passive=1209600&osid=1&continue=https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/&followup=https://console.firebase.google.com/project/ajax-practice-1f1b9/database/data/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I did something similar using axios and ReactJs a while back and it worked without problems.
The URL https://ajax-practice-1f1b9.firebaseio.com will try to load the database in the Firebase Database console. You are probably trying to get the data through Firebase's REST API, which requires that the URL ends in .json.
So to get the JSON for that location, use https://ajax-practice-1f1b9.firebaseio.com/.json.
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
it's days I'm trying to figure out how to make a chrome extension I'm building working...with AngularJS.
Problem is that I cannot successfully access remote resources; as long as I didn't use angular, my way to communicate between the main html and the sandbox was with a pub/sub javascript I found on the web pkg.js and in this way I could call external urls in the main.js and pass retrieved data back to subscribed javascripts.
I have heavily simplified my code so that you can better understand the architecture. Here are some test resources that works perfectly apart from the fact...that angular does not work :/
My manifest has the following relevant parts:
{
...
"background": {
"scripts": ["new/ext/background.js"],
"persistent": false
},
"permissions": [
"tabs",
"http://*.mysite.com/*"
],
"sandbox": {
"pages": [ "new/testmain.html" ]
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
My background.js is very simple: it just creates a tab and calls an html which will host the angular code:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create({'url': chrome.extension.getURL('/new/main.html')}, function (tab) { });
});
The main.html is, too, pretty easy: just some script includes and the iframe:
<!doctype html>
<html>
<head>
<title>Testing angular</title>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<!-- custom scripts -->
<script type="text/javascript" src="/lib/pkg.js"></script>
</head>
<body style="height: 100%">
<h1>Iframe below</h1>
<iframe id="iframe" src="testmain.html" width="100%" height="100%" frameborder="none"></iframe>
<script type="text/javascript" src="testmain.js"></script>
</body>
</html>
The testmain.js just subscribes to an event and, in case receives it, it publishes dummy data:
iframe = document.getElementById("iframe");
$.pkg.init(iframe.contentWindow);
$.pkg.listen("items", function () {
console.log("[testmain.js] received items message");
items = [
{ name:"foo", age: 12 },
{ name:"bar", age: 11 },
{ name:"mickey", age: 15},
{ name: "donald", age: 27}
];
$.pkg.send("response", [items]);
console.log("[testmain.js] sent response");
});
Now let's come to testmain.html:
<!DOCTYPE html>
<html data-ng-app="App" data-ng-csp>
<head>
<title></title>
</head>
<body ng-controller="TodoCtrl">
<div ng-repeat="item in testitems">
<ul>
<li>{{item.name}}</li>
</ul>
</div>
<script type='text/javascript' src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script src="/lib/pkg.js"></script>
<script src="app/testapp.js"></script>
</body>
</html>
And, finally, here is the testapp.js:
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope) {
//test
$.pkg.init(window.top);
$.pkg.send("items");
console.log("[testapp.js] sent message items");
$.pkg.listen("response", function(res){
console.log("[testapp.js] received " + res.length + " items");
$scope.testitems = res;
for (i = 0; i < $scope.testitems.length; i++) {
console.log("[testapp.js] testitem: " + $scope.testitems[i].name);
}
});
});
The controller just inits the communication with destination = html containing the iframe. It then sends a message requesting for data which is then sent back (listens).
If I try from the console to run any manual command to get the $scope variable, no success at all:
document.getElementById('iframe')
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb". The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb". The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
Sandbox access violation: Blocked a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb" from accessing a frame at "chrome-extension://jcnppfndabbcgbdcnjncnoddmhmkmmbb". The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
<iframe id="iframe" src="testmain.html" width="100%" height="100%" frameborder="none"></iframe>
This is what happens in the console:
[testapp.js] sent message items testapp.js:8
[testmain.js] received items message testmain.js:5
[testmain.js] sent response testmain.js:13
[testapp.js] received 4 items testapp.js:10
[testapp.js] testitem: pippo testapp.js:13
[testapp.js] testitem: pluto testapp.js:13
[testapp.js] testitem: paperino testapp.js:13
[testapp.js] testitem: minnie testapp.js:13
as you may notice, communication DO occur, $scope.testitems variable is set correctly. BUT nothing is rendered on the iframe :(
Can anyone help me figure out how to come out of all of this?
Btw, I was in a some way forced to do so - the first version which was on plnkr gladly used the $http inside the controller, but this appears to be prohibited in chrome extensions...
I also tried to use amplifyjs but didn't come to out to make the communication work between an iframe and its container.
Thanks a lot!