Facebook login sdk is blocked by Microsoft Edge tracking prevention - javascript

I'm using facebook login javascript sdk for social login functionality and it is blocked on Microsoft Edge browser, is there any way to make it work?
I tried to load the script using proxy but it's still blocked.
I also noticed some browsers like firefox and chrome also blocked facebook sdk before, but still, I'm wondering if there is any way to bypass this rather than waiting for an update from Microsoft to fix this or manually add the sdk as an exception to the Tracking prevention.
Any help is very appreciated.
Cheers!

Related

PostHog | Brave Browser Event Tracking Issue

we have implemented Posthog with React and tested the implementation, which is working fine on Chrome and Firefox. But when we are testing it on Brave/Microsoft Edge Browsers it is not working.
We have done some research on this, which says these browsers have default ad blocker feature enabled and I need to manually disable ad blocking.
For resolving Brave browser tracking issue, we have created self hosted cloud front distribution and pass cloud front url in api_host parameter inside posthog.init function but it's not working and I am getting authentication issue. Could you please guide me for the same ?
I have used posthog-js in my react app for tracking events. Everything is working properly on chrome browser but my custom events are not getting triggered on brave browser.
Here is console logs error, please have a look to attached screenshot
The errors in the screenshot are the Brave browser doing its thing and blocking third-party scripts. You can check this using "shields" https://support.brave.com/hc/en-us/articles/360022806212-How-do-I-use-Shields-while-browsing-
I'd recommend you set up a reverse proxy so that traffic to PostHog travels to your own domain. So you would have something like https://my-own-domain.com/e
see https://posthog.com/docs/integrate/proxy
(as in the comment thread above. full disclosure I'm an engineer at PostHog)

Javascript Not Working on Android Default Browser

I am working on a web site that is served via a Mikrotik Router.
It's a site to provision internet for users up to 100m away.
When you connect to our Wifi, a sign in page is supposed to pop up where you enter your credentials to authenticate and use our internet.
For some weird reasons whenever the user tries to sign in, for android users the Android OS keeps on presenting their default browser to sign in on the Network. Unfortunately, it appears that the Javascript is not running on the native default Browser that popped.
I am not using any ES6+ features so I'm currently lost at what could be wrong.
When I previewed the Site on Google Chrome/Opera Mini and Phoenix Browser, the javascript is working very well.
I added this tag before the closing tag of my head element:
<noscript>
<div>
We're sorry but our site <strong>requires</strong> JavaScript to work.We recommend you use Google Chrome.
</div>
</noscript>
to be displayed if Javascript is disabled, but it is not even displaying.
I tried inspecting with Google Chrome devices inspection but it seems Google Chrome devices inspection only works with Google Chrome Mobile Browser(I might be wrong).
Any insight to fix this would be really appreciated.
Thank you.
I think you need to set setDomStorageEnabled(true)
for the webview settings.
You can read more about webview here:
http://tutorials.jenkov.com/android/android-web-apps-using-android-webview.html

Single Sign On (Silent Login) using iframe and postMessage while ITP (Safari)

Short:
I need help in SSO in Safari, I'm using iFrame and postMessage logic which is working fine in Chrome and Firefox (PC, Mac, Android and iOS) but the catch is in Safari. I tried Storage Access APIs and placed those in iFrame's onLoading event to check access. But the localStorage which I was used to store JWT is not persistent in the iFrame. I'm using Angular 11.
Scenario:
I'm developing few applications which uses same auth site for sso, which was working as expected as I said in short description. But when it comes to Intelligent Tracking Prevention enabled browsers as of now Safari, It blocks the iFrame by considering it as 3rd Party Trackers which is very insane since the iFrame's origin (Domain) is same with Sub-domain used in service sites.
I tried to check the access by using storage access API i.e hasStorageAccess() in window onLoad method in the iFrame's script. If has no access, I called requestStorageAccess(). I'm here not using user gesture and using button click from service site because I'm using angular for frontend framework but in order to request using button in iFrame.(Since, The policy specifies to get access works only after user interaction which is another headache for devs)
I need help to overcome this issue and fix the SSO with ITP. Any guidance is useful and I'll keep updated.
Google is working fine with their sso and services such as YouTube and Mail doesn't need login on every visit. Any idea on how they achieved.
The reason could be that Safari has the option "Prevent cross-site tracking" enabled by default and that can interfere with the SSO login and display of an embedded iframe (because it blocks some cookies).
Solution
Disable (uncheck) the option for "Prevent cross-site tracking" in the Safari configuration menu.
Tip: To achieve a better user experience, using Javascript you can detect when a user is using Safari and show him an HTML message explaining that he needs to disable that option in order to continue or use another browser like Chrome or Firefox.

How to use OAuth with Facebook in a Safari App Extension

My question is similar to How to use OAuth with Github in a Safari extension, however, the answer there explains how to use oauth with the older safari extension API. I am trying to use OAuth with the new Safari App Extension API (https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/SafariAppExtension_PG/).
The new API allows the writing of native code, in addition to providing the ability to inject content scripts. Where should I perform the authentication? I also developed a chrome extension, and Google provides an API for retrieving OAuth tokens (https://developer.chrome.com/apps/identity) -- however I do not see anything similar for Safari App Extensions.
Any help is greatly appreciated!
I am currently working on Safari App Extension similar to your needs and the logic, certs (if you use them) persistence, access and refresh tokens all of them goes to the native code. From the SFSafariExtensionHandler you can control the active window/tab and all the pages in the tab, also receive callbacks from the pages.
For the OAuth use any native lib. that solves most of your needs for the logic. I am using this one from AeroGear.
Some adaptation will be needed for the page controlling.

Google+ Sign in from Javascript - Invalid Parameter value for origin

I've been going through the steps to add a Google+ Sign-in to my web application as found in https://developers.google.com/+/web/signin/
When used in a 'typical' web site, the 'client side' flow works just fine. Now, I'm trying to integrate this Google+ sign inside PhoneGap. Since PhoneGap runs the web page as a file:// URL, the origin that gets sent in the request is file://. In every other PhoneGap I've written, this hasn't been a problem.
However, when I click the Google+ sign in button from my page in PhoneGap, the origin being sent as file:// causes the following error message:
Error: invalid_request
Invalid parameter value for origin: Missing authority: file://
I went to the Google API console and tried to assign file:// as an authorized Javascript origin. But, of course, it doesn't allow file:// to be entered as an origin.
So I'm wondering if anyone has any insight in how to do this kind of web-style (Javascript) Google+ sign in from within PhoneGap (or from a local web page where there is no server - just a page being run as a file://). I really don't want to have to do the sign-in in native code and then integrate the token back over into the 'PhoneGap' realm since that kind of defeats the purpose of writing the app once for multiple platforms.
My understanding is that you cannot use the standard client-side flow with Cordova/PhoneGap because file:// is not a valid origin.
However, you can use the In-App Browser plugin along with window.open, which will allow to initiate a "standard" client-side flow from within the application. You then listen to events on the opened window to deal with the responses.
The plugin works cross-platform so you won't have to maintain multiple native implementations.
The ng-cordova-oauth library implements this for AngularJS.
For more details about the implementation, see this tutorial for details, as well as the Google OAuth documentation.
For file://, the thing works differently.. try this as your origin: http://localhost:4567
or try this tutorial: here

Categories

Resources