I want access client gmail contacts using gmail api. but it give error like "Uncaught SecurityError: Blocked a frame with origin "http://" from accessing a frame with origin "https://accounts.google.com". The frame requesting access has a protocol of http", the frame being accessed .
my code
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>
function auth() {
var config = {
'client_id': 'ID',
'scope': 'https://www.google.com/m8/feeds'
};
gapi.auth.authorize(config, function() {
fetch(gapi.auth.getToken());
});
}
function fetch(token) {
$.ajax({
url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json',
dataType: 'jsonp',
data: token
}).done(function(data) {
console.log(JSON.stringify(data));
});
}
</script>
</head>
<body>
<button onclick="auth();">GET CONTACTS FEED</button>
</body>
Related
I have the following code, where according to the country I will redirect to a certain page.
This code works correctly for me in http but if I load the html page usinghttps it does not do anything.
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
jQuery.ajax( {
url: '//api.ipstack.com/181.64.157.39?access_key=xxxx',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// If the visitor is browsing from Canada.
if (location.country_code === 'CA') {
// Redirect him to the Canadian store.
//window.top.location.href = 'http://google.com.pe';
document.location.href = 'http://google.ca';
}
}
} );
</script>
</head>
<body>
<h2>Hello</h2>
</body>
</html>
Why does this happen, how do I make it work in both?
Your code is not working in HTTPS because your ipstack Plan API not support HTTPS. So if you using HTTPS to request, you will return error :
{"success":false,"error":{"code":105,"type":"https_access_restricted","info":"Access Restricted - Your current Subscription Plan does not support HTTPS Encryption."}}
So you should edit your AJAX request to force using HTTP instead :
<script>
jQuery.ajax( {
url: 'http://api.ipstack.com/181.64.157.39?access_key=xxxx',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// If the visitor is browsing from Canada.
if (location.country_code === 'CA') {
// Redirect him to the Canadian store.
//window.top.location.href = 'http://google.com.pe';
document.location.href = 'http://google.ca';
}
}
} );
</script>
I was playing around with the WordPress Rest API, and I was downloading this plugin called WP OAuth Server (by Justin Greer), and I have built my own OAuth connection.
I have one problem: I get Error 400, and it says: The grant type was not specified in the request.
Here is my code so far:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css" type="text/css">
</head>
<body>
<div id="result"></div>
<!--<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>-->
<script type="text/javascript" src="assets/js/app.js"></script>
</body>
</html>
JavaScript:
/**
* OAUTH 2 LOGIN
*/
+function () {
var $CLIENT_CODE = 'fc8uhbwlo4niqhngrjsdl3tbp3cndpidfs61w77g';
var $CLIENT_ID = 'llsfdwZzO7qVHBzM4nhfcq1jFW2L8O';
var $CLIENT_SECRET = 'auaCKn8JWXQmSyYrl3PDi23klIhotp';
var $AUTHORIZATION_ENDPOINT = 'http://domain.dev/oauth/authorize';
var $TOKEN_ENDPOINT = 'http://domain.dev/oauth/token';
$.ajax({
url: $AUTHORIZATION_ENDPOINT + '?client_id=' + $CLIENT_ID + '&client_secret=' + $CLIENT_SECRET + '&response_type=code',
}).done(function (url) {
$('#result').html(url);
fetchSomething();
}).fail(function (errorThrown) {
console.log("Error" > errorThrown.responseText);
})
function fetchSomething() {
$.ajax({
type: 'POST',
url: $TOKEN_ENDPOINT + '?grant_type=authorization_code&code=' + $CLIENT_CODE,
}).done(function (success) {
console.log(success);
}).fail(function (error) {
console.log(error);
});
}
}();
CodePen
This was my solution
$.ajax({
url: 'http://' + domain + '?oauth=token',
type: 'POST',
data: {
grant_type: grantType,
code: code,
client_id: clientID,
client_secret: clientSecret,
redirect_uri: redirect
}
}).done(function (token) {
console.log(token);
}).fail(function (fail) {
console.log(fail.responseJSON.error);
});
I am trying to try the microsoft emotion api. I am running a simple python web server with CORS enabled. Below is my server python file with which I start the server:
python-server.py
#! /usr/bin/env python2
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer
class CORSRequestHandler (SimpleHTTPRequestHandler):
def end_headers (self):
self.send_header('Access-Control-Allow-Origin', '*')
SimpleHTTPRequestHandler.end_headers(self)
if __name__ == '__main__':
BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)
I have an index.html file in which I am sending the http request:
index.html
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",JSON.stringify({"my-key"}));
},
type: "POST",
// Request body
data: JSON.stringify({"url": "http://tinyurl.com/2g9mqh"}),
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>
After about 30 seconds I get the connection refused response. The http request code was taken from the emotion api's page I linked earlier. I wonder whether I need a real server or is there a mistake in the code? Thanks.
The JSON needs to be sent out as a string. So change your body specification to:
data: "{\"url\": \"http://...\"}"
Please use the code below(replace your-key), just save it as a .html and open it in the browser it shut work(without any server). If it works then try it in your python server.
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","your-key");
},
type: "POST",
// Request body
data: {"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"},
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Face API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$.ajax({
url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
beforeSend: function(xhrObj) {
// Request headers
xhrObj.setRequestHeader("Content-Type", "application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",
"");
},
type: "POST",
// Request body
data: JSON.stringify({
"url": "http://i1.mirror.co.uk/incoming/article6395000.ece/ALTERNATES/s1200/MAIN-David-Beckham-next-James-Bond.jpg"
}),
})
.done(function(data) {
console.log(data);
})
.fail(function(e) {
console.log(e);
});
});
</script>
</body>
</html>
I am able to POST the message to the yammer, but the messages are getting posted to the default network and I need to post in a different network.
Here is my current test code:
<html>
<head>
<title>A Yammer App</title>
<script src="https://assets.yammer.com/platform/yam.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
yam.config({appId: "######"});
</script>
</head>
<body>
<button onclick='post()'>Yammer Update!</button>
<script>
function post() {
yam.getLoginStatus( function(response) {
if (response.authResponse) {
postdata();
} else {
yam.login( postdata);
}
});
}
function postdata()
{
yam.request(
{ url: "https://www.yammer.com/api/v1/messages.json"
, method: "POST"
, data: { "body" : "Message Throug app","group_id":"3156478"}
, success: function (msg) { alert("Post was Successful!: " + msg); }
, error: function (msg) { alert("Post was Unsuccessful..." + msg); }
}
);
}
</script>
</body>
</html>
Add the below function in your yam.request before sending it .
beforeSend: function (req) {
//send the access_token in the HTTP header
req.headers.Authorization = "Bearer #########SSA";
}
The bearer will the autorization token for that network you are targetting.
Hi here is an odd problem. I am trying to serve the below index.htm file with django. When you click the button, the page (not the server) does a cross-domain request. If I load the index file direct in a browser it works. However, if I serve it with django, I get "An error occurred trying to load the resource" in the same browser (Safari). I am using (YQL) this method for cross domain requests: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="/static/jquery-1.10.0.min.js"></script>
<script type='text/javascript' src="/static/jquery.xdomainajax.js"></script>
<script>
function myFunction()
{
$.ajax({
url: 'http://www.google.com',
type: 'GET',
success: function(res) {
var headline = $(res.responseText).text();
document.getElementById("demo").innerHTML=res;
},
beforeSend : function(xhr, settings) {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Cache-Control", "no-cache");
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
}
}
});
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
</script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Add the following code in your ajax function:
beforeSend : function(xhr, settings) {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Cache-Control", "no-cache");
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
}
},
And also this function in your script:
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
:D