I am having an issue with chrome on https connection related to MouseEvent isTrusted property.
I have an HTML like
<div id="facebook_share">
<a href="#">
<img src="facebook.png" alt="facebook">
</a>
</div>
Now I am opening a popup with facebook url using following javascript
socialSharePopup = function (link, title) {
window.open(link, title, 'width=400,height=380');
};
documentUrl = document.URL;
documentMetaDesc = getMetadata("description");
facebookLink = "https://www.facebook.com/sharer/sharer.php?u=" + documentUrl;
facebookLinkEle = document.getElementById("facebook_share");
if (facebookLinkEle !== null) {
facebookLinkEle.onclick = function (event) {
//event.isTrusted is false on chrome on https
socialSharePopup(facebookLink, 'Facebook');
if (event) { //If Condition used for IE8
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
}
Now the issue I am facing is, on chrome when this page is opened on https connection then a popup blocker is opened first time and popup opens when clicked second time without making any changes. I find this behavior weird.
When the same site is opened on http connection then it working fine and no popup is blocked.
Same result happens when website is opened on https with untrusted connection (on local with no certificate)
Upon debugging I find that MouseEvent.isTrusted (event.isTrusted) property is false in case of popup is blocked on https
What is the relation between isTrusted and https connection ? Why its false only on https ? And why only first time ?
Its working fine on Firefox and IE
One more observation is that when user clicks happens on div#facebook_share it works fine (event.isTrusted is true) but when click happens on <a> tag its false.
Removing <a> tag is not an option as HTML is dynamically generated
How can this issue be resolved ?
Related
Vue component has a photo block and the "edit" button.
<template>
<div>
<tui-image-editor ref="editor" > </tui-image-editor>
<div class="">
<img :src="img">
<button #click="edit()">Edit</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
img: "cdn.domain.shop/eaa49b02e350627622904290a83599d6.png",
};
},
methods: {
edit() {
this.$refs.editor.invoke("loadImageFromURL", this.img, "Editable image");
},
},
};
</script>
As a photo editor, I use TUI image editor. In the click handler, I pass the url to the editor by loadImageFromURL function
when I click the "edit" button in Chrome in Windows I get an error
Access to image at
'cdn.domain.shop/eaa49b02e350627622904290a83599d6.png' from origin
'example.org' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
But when I do the same thing in Chrome in Ubuntu, everything works fine.
What am I doing wrong?
just add random string to url
this.$refs.editor.invoke("loadImageFromURL",this.img+'?'+Math.random(), "Editable image");
the error was due to caching in the browser
After that you have to make sure that every URL you request from Chrome and Safari uses http:// instead of https://. HTTPS retrieval will not work in these browsers at all.
some allows both http and https requests I solved it with a small regular expression that replaced our https URL string with http.
What's the quick solution ?
Add the attribute crossorigin="anonymous" in the <img> tag that displays the image before opening it in the editor.
ie: <img src="targetUri" crossorigin="anonymous" />
Explain the issue and solution
The main issue is related to caching and how the browser send the Origin header.
First you have to know that by default the browser does not send the Origin header when you load an image with the <img> tag that does not have the crossorigin="anonymous" attribute.
More info
What's happening is that the browser tries to load the image from the <img> tag before the image editor is opened, and the puts it into its cache.
So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the Origin header. Without this header, that cached response does not contain all the allow-control-* headers necessary to pass the CORS check, that why you get the error.
You can check this, by opening Chrome's inspector with "disable cache" checked. It should work.
The previous posts that suggested to include a parameter ?t=<random_number> had the effect to bypass the browser cache, but this solution is not possible when using pre-signed urls.
So adding crossorigin="anonymous" in the img tag should solve the problem.
I have a working Facebook-Login procedure using the PHP SDK. Now Facebook is requiring me to update my login flow since I apparently "violate the Facebook Platform Policies". According to them my "Login button doesn't properly reference Facebook." They suggest that "To fix this issue, you should always use our official SDK for Login." I suspect (but don't know for sure) this is because the login is not opened in a popup but rather in a new window using the PHP SDK getLoginUrl() method. Thus, I'm trying to update my Facebook Login flow.
In trying to combine the Javascript SDK (to render the official button and popup) with the PHP SDK (to handle the responses) I'm using the following approach (Source: https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript)
<html>
<body>
<p>Log In with the JavaScript SDK</p>
<script>
logInWithFacebook = function() {
FB.login(function(response) {
if (response.authResponse) {
alert('You are logged in & cookie set!');
// Now you can redirect the user or do an AJAX request to
// a PHP script that grabs the signed request from the cookie.
} else {
alert('User cancelled login or did not fully authorize.');
}
});
return false;
};
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
cookie: true, // This is important, it's not enabled by default
version: 'v3.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
When clicking the Login-Button a popup will show, as expected, to log me in. But...
...before I even enter my FB credentials the code alerts 'User cancelled login or did not fully authorize'.
...after entering my credentials the popup remains open with a blank white page.
...when I click the button while already being logged in to Facebook I will only see a blank white page in the popup.
...there's no redirect (which I suppose has to be handled in the if (response.authResponse) part)
Why is google reCaptcha2 (gReCaptcha) not showing after a page refresh, but showing if page is reopened by the link?
See this video for explanation: http://take.ms/I2a9Z
Page url: https://orlov.io/signup
Page first open: captcha exists.
Navigate by link: captcha exists.
Open new browser tab: captcha exists.
Refreshing page by refresh icon, ctrl+R, ctrl+F5: captcha NOT exists.
I added body unload event to prevent browser cache, it did not help.
Browsers for testing:
Firefix 39.0
Chome: 44.0.2403.125 m
Opera: 30.0
In all browsers I get the same result. So does this mean there's an error on my side?
I think it has to do with the browser and the speed of your network. You are calling ReCaptcha with a callback, but you call it before you define the callback. Depending on your network speed or browser quirks, it might execute before the rest of the script has loaded.
Line 330:
<script src="//www.google.com/recaptcha/api.js?onload=renderReCaptchaCallback&render=explicit&hl=en-US" async defer></script>
Line 351:
<script type="text/javascript">if (typeof (renderReCaptchaCallback) === "undefined") {
var reCaptchaWidgets = {};
var renderReCaptchaCallback = function() {
jQuery.each(reCaptchaWidgets, function(widgetId, widgetOptions) {
grecaptcha.render(document.getElementById(widgetId), widgetOptions);
});
};
}</script>
So I would move the definition of renderReCaptchaCallback to the top of the page so it is defined well before trying to load it.
I'm adding Google+ sign in button to my site using the server-side flow.
Here is how I render the sign in button:
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=renderGPlus';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
function renderGPlus() {
gapi.signin.render('customGPlusBtn', {
'callback': 'gPlusSignInCallback',
'clientid': '<my_client_id>',
'redirecturi': 'postmessage',
'accesstype': 'offline',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/BuyActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
}
</script>
When the button is loaded, it immediately checks to see if the user has authorized my application (immediate mode). If the user has previously authorized my application, a notification bar will pop up at the bottom of the page with the message "Welcome back, you've already connected with this app via Google+ Sign-In as .....".
Is there anyway to stop this message from popping up?
Just recently the newly accepted answer on this page for hiding the "Google Sign-in Welcome back pop up"
window.___gcfg = { isSignedOut: true };
does not work again.
AIM: "Hide or Suppress the Google+ Sign In Welcome Back message" on all browsers.
Please if you have been using `
window.___gcfg = { isSignedOut: true };
to suppress the warning. After serious experimentation I discovered this.
I will recommend you use this iframe versions to suppress any kind of Google API pop up window on your web page..
Iframe 1: iframe[src^="https://apis.google.com"] {display: none;} This Hides all pop up windows from Google APIs on your web page.
Iframe 2: iframe[src^="https://apis.google.com/u/0/_/sharebox"] {display: none;} This Hides all Google's Interactive Share Dialog pop up on your web page.
Iframe 3: iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {display: none;} This Hides all "Google's Welcome Back Message" pop up window on your web page.
Iframe 4: iframe[src^="https://apis.google.com/u/0/_/+1/"] {display: none;} This Hides all "Google's +1 Button" on your web page.
So for this particular question do this in the Head tag of your HTML Page
<style> `iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast` </style>
Have tested it and it works perfectly well.
First, the message only appears the first time that a user is signing in as recognized by Google for a particular browser session. In other words, the user will only see the message if they have closed their browser windows and have started a new browser session.
You should be authorizing the user any time that you are seeing the authorization result successfully returning and updating the user to an authorized state. As such, the user is getting automatically signed in whenever this message appears.
Because the message that appears is there to inform your users that they have automatically been signed in, you probably should not be suppressing this message unless you are doing it intentionally for a user whose session you are explicitly managing.
However, if you have implemented explicit sign-out and are managing the user's signed-in state, the following code change to the plusone.js synchronous include will suppress the toast message.
<script src="https://apis.google.com/js/plusone.js">
isSignedOut: true
</script>
Another note, you no longer need to manage the user's state to sign the user out. The new method gapi.auth.signOut will sign the user out. You can see a demo of signout here.
If you are doing an asynchronous include, the following global configuration flags will suppress the message:
window.___gcfg = { isSignedOut: true };
UPDATE:
As pointed out by Chimdi2000 this solution does not work in Chrome. You can add the following CSS to hide the generated iframe:
iframe[src^="https://apis.google.com"] {
display: none;
}
As his answer is far more complete than mine and addresses additional issues, please check it out.
The accepted answer is the right way to do it, but if for some other reason you just want to hide the generated iframe, you can do it with CSS:
iframe[src^="https://apis.google.com"] {
display: none;
}
Chimdi2000's last style code must be:
<style>
iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {
display: none;
}
</style>
and runs perfect.
EDIT :
Coding below also hides the login button.
<style>
iframe[src^="https://apis.google.com"] {
display: none;
}
</style>
I'm setting up a rails app and trying to implement login via Facebook JS SDK. Missing Omniauth already... :(
Anyway, what happens is that the dialog pops up, the user provides the login info, but then it redirects to https://www.facebook.com/connect/window_comm.php?_id=some-string&_relation=opener&auth_token=some-big-string, a blank screen. The pop-up doesn't close.
If I close it manually, though, and then refresh my page, I can see the login happened.
A curious thing is that on the first login, when permissions are asked for, everything works as expected, with the pop-up closing after permissions are granted or denied.
Tested on Chrome, FF, Safari and Opera. Consistent behaviour.
If I debug the blank redirect page on Chrome, there are two errors:
1) Unsafe JavaScript attempt to access frame with URL http://something from frame with URL https://something. Domains, protocols and ports must match. (note http x https...)
2) window_comm.php:7Uncaught TypeError: Cannot call method '_recv' of undefined
Here's the relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',
status : true,
channelURL : 'http://localhost:3000/channel.html',
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js"
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" perms="offline_access"></div>
Thanks a lot for any light on this... Driving me nuts! =(
Edit: Can it be a bug on Facebook, since it is redirecting from http to https?
This answers Q.1) only. Facebook new requirements:-
switching to Oauth2.0 to fetch token_access
using SSL (ie: https://) to authenticate (hence the cross domain issues)
Also, I'd generally start with the code below to figure out the possible user state during the login process. That means clicking on anything and everything during testing phase.
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});