After upgrading my browser to Chrome 66 I'm having problems creating any API requests to a server which initially requires NTLM authentication. I am wondering if anyone has any explanation as to why. I presume it's something to do with the added ad blocking technology or security added to Chrome, or maybe it's a Chrome bug.
I've created an basic example below using Fetch. What happens is the user visits the site, Chrome redirects users to the API to authenticate (instead of remaining on the same site, like with previous versions of Chrome), when the user authenticates the page goes blank and Chrome seems to disable the keyboard (I can't press cmd + w to close the tab). When I refresh this page the API response starts showing in the browser. After the user has authenticated, they can go back to the initial page that is creating the API request and it works fine.
Does something need to be added to the headers to make this work?
Please don't just suggest using an alternative authentication method as a solution.
<html>
<head>
<script type="text/javascript">
fetch('https://fakeapiurl.com/api', {
credentials: 'include'
})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
</script>
</head>
<body>
</body>
</html>
This has been reported as a bug in Chrome 66, as you suspected. I linked to your post and added my own comments there as well.
https://bugs.chromium.org/p/chromium/issues/detail?id=843861
Related
I've got a website that uses JQuery to grab information from an API located at: https://api.lootbox.eu/. The website I'm making has a cert that's been created and installed with Let's Encrypts tools. (I followed a tutorial on DigitalOcean to set it up)
Now, when I click a button to make the API call and update the website contents, Google Chrome then deems the cert "Not Secure" (shown in the address bar).
Here's my code.
//when the page has fully loaded
$(document).ready(function(){
function parseResponse(data)
{
//parsing JSON...
//lets avoid the "data.data"
response = data.data;
//set the user's general profile details
$("#user_avatar").attr("src", response.avatar);
$("#comp_rank_img").attr("src", response.competitive.rank_img);
$("#comp_rank").html(response.competitive.rank);
$("#qp_level").html(response.level);
$("#qp_playtime").html(response.playtime.quick);
$("#comp_playtime").html(response.playtime.competitive);
$("#qp_wins").html(response.games.quick.wins);
$("#comp_total_games").html(response.games.competitive.played);
$("#comp_wins").html(response.games.competitive.wins);
$("#comp_losses").html(response.games.competitive.lost);
}
//goes to the Overwatch API and grabs the JSON data for processing.
function processAjax()
{
$.ajax({
url: "https://api.lootbox.eu/pc/us/JuicyBidet-1292/profile"
}).then( function(response){
parseResponse(response);
});
}
//set up the button event listener
$("#submit").click(function(e){
//prevent the button from reloading the page
e.preventDefault();
//run the ajax grabber/processor
processAjax();
});
});
(I need to learn how to format code properly in SO questions...).
I don't get any other errors in my Chrome console (other than "favicon" 404ing - which is unrelated).
I've also tried the website in Microsoft Edge and I get the following in their Console:
SCRIPT7002: XMLHttpRequest: Network Error 0x800c0019, Security certificate required to access this resource is invalid.
I'm thinking either the problem is with my code, or now that I've checked, the API website's cert is invalid in both Chrome and Edge.
Any help would be appreciated. Thanks.
(I'm aware the code is scrappy, I'm learning)
I get this warning "This server could not prove that it is api.lootbox.eu; its security certificate expired 6 days ago"
This could happen because of one among following reasons.
1.Certificate is not issued by the third party site.
2.The third party site certificate is not updated.
3.The third party and browser connection is not secure.
The insecure error is because if a site is loaded over https the browser expects all subsequent calls made by the page will be secure, but in your case you are calling a URL http://api.lootbox.eu/pc/us/JuicyBidet-1292/profile which uses http:// and is insecure thus making your website insecure.
Solution
Use https url's everywhere in your pages.
I am seeing strange behaviour on Firefox when using the fetch API. I don't know if I am doing something wrong, or if I have missed some documentation and what I am trying to do is not allowed.
If I host the page below on localhost, Firefox rejects the fetch and gives TypeError: NetworkError when attempting to fetch resource. I don't see any fetch requests in either the dev tools, or Wireshark. There doesn't seem to be any further debugging available to diagnose.
By "hosting on localhost", I mean hosted by a local web server (nginx in this case), rather than from the file system. The address bar shows "http://localhost/fetch_localhost_error.html" for example.
Hosting the same page at http://jsbin.com/yowebiyigi/edit?html,output or any other endpoint gives the expected output - the text appears in the div, and I see the fetch request being made in dev tools.
Chrome works correctly in both scenarios which implies both the localhost and remote server is configured correctly for CORS etc (but FF never seems to query the remote anyway).
I have tried both 48 and Nightly (51), both on Windows 7. Unfortunately I don't have access to any other OS right now.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output"></div>
<div id="error"></div>
<script>
var result = fetch('http://www.randomtext.me/api/')
result.then(
function(response){
return response.json()
})
.then(
function (response) {
document.getElementById("output").innerHTML = response.text_out;
})
.catch(
function(error){
document.getElementById("error").innerHTML = error;
});
</script>
</body>
</html>
This is pretty frustrating as I can't develop fetch-based solutions locally. Can anyone shine any light on what is going on?
It was the damn AdBlock in my case. 3 hours wasted...
Hope someone will find this earlier.
Turns out that I had a configuration issue.
network.http.referer.XOriginPolicy
Should be set to 0 otherwise fetch will fail. I had it set to 1 for reasons I can't remember.
The issue for me was that the APIs I was fetching locally (in my dev environment) had invalid certificates. To solve this, I hit the APIs directly with Firefox and added security exceptions for them.
Also double check that you are querying the correct end point. Just realized my port number was off by 1 character which is what waster
Really struggling with facebook at the moment
I am trying to auth a user using openfb and facebook on an ios app being built with cordova (ionic). I have tried all the solutions I could find online.
My configuration is standard, and an almost copy and past of the openfb example. Without a callback url and with the following callback urls () I am getting the image you see on this facebook Security Warning while user has enabled secure login - iPhone
When I specify the callback url of http://localhost/oauthcallback.html. I get a Facebook mobile looking page with title, Error and message "Given URL is not permitted by the application configuration.: One of more of the given URLs is not allowed by the App's settings. It must watch the Website URL or canvas URL, or the domain must be a subdomain of one of the App's domains.
Note: works perfectly on web!
Can someone eplse point me in the direction to set this up once and for all on both Facebook and in openfb?
Please help!!!! :)
user1132726,
I struggled with that for days as well, looked over lots of forums, tried everything. Then I turned away to Javascript only.
We must have the right Javascript libraries in the right order. Some you can download, some you won't find easily.
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="js/cdv-plugin-fb-connect.js"></script>
<script src="js/openfb.js"></script>
Then you use regular Javascript logic to select your elements and use openfb API like:
openFB.login(
function(response) {
if (response.status === 'connected') {
alert('Facebook login succeeded, got access token: ' + response.authResponse.token);
// DO YOUR LOGIC HERE, I use perception: $.FacebookPerception.submit(response.authResponse.token);
} else {
alert('Facebook login failed: ' + response.error);
}
}, { scope:'email,public_profile,user_likes,user_friends'});
You must as well register your application at Facebook using Developers Console: http://developers.facebook.com . I used the website configuration with my main url: http://www.texugo.com.br/
I don't think you need other configurations. I tested only on Android. I don't know if you need to configure your App for Android at Facebook Console. I think it is not really used but haven't tested yet.
IMPORTANT: you need version 0.4 for openfb.js
Then you run Apache Cordova and deploy it to your mobile.
Further steps:
When you call Facebook it opens on a popop that Cordova applies
InAppBrowser, but I want to hide that ugly header that looks weird.
Integrate with Google+, LinkedIn and Twitter
Create OpenSocialAuth plugin
OBSERVATION: this is only working with Android, it does not work in web browsers. Gotta check it as well.
Hope it helps. Anything question me. I'm pretty sure I missed something.
See you.
We're having a really odd problem. Basically the Facebook Connect button we put up on our local testing site worked fine until yesterday, now whenever we click on it,
it seems to go the xd_receiver.htm page which just shows a blank page rather than the app login and throws an error on this javascript file:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js
The error is 403 forbidden, is this facebook blocking us? If so why could it be?
This is in our javascript tags:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
function OnRequestPermission() {
var myPermissions = "publish_stream";
FB.Connect.showPermissionDialog(myPermissions, function(perms) {
window.location.reload()
if (!perms) {
// handles if the user rejects the request for permissions.
// This is a good place to log off from Facebook connect
} else {
// finish up here if the user has accepted permission request
};
});
}
FB.init("OUR_ID", "xd_receiver.htm");
This is in our HTML code:
<fb:login-button onlogin="OnRequestPermission();"></fb:login-button>
It all worked fine with the permissions etc. till yesterday and brought up the login page before but now just shows a blank page with 403 on the XdCommReceiver.js file. No changes were made to our app. It's stopping us from progressing with our company's app and any help would be appreciated. Thanks!
The old featureloader.js SDK is deprecated - see https://developers.facebook.com/docs/oauth2-https-migration/ for more information - I'm surprised it was working as recently as last week - it was due to be shut off in October as far as I know
I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.