How to use SSO for PWA? - single-sign-on

Is it possible to use SSO for PWAs for standalone display?
I can login to my app through email but if I try twitter/fb/google SSO, it opens to a new browser since they are out of the scope. This makes it pretty useless...
Is the only solution to just wrap the app?

The short answer is, SSO-inside-an-installed-PWA is broken on Chrome for Desktop as of Chrome 70 (November 2018).
The good news is, the W3C web.manifest standard has changed, and will no longer require browsers to open out-of-scope navigation in a separate window. This will fix the case of installed PWAs with single-sign-on authentication. This will be fixed in Chrome 71 on the desktop (due December 2018), and is already fixed on Chrome for Android.
Here's the update to the W3C web.manifest spec that details the change. In short, the spec says browsers must not block out-of-scope navigation inside an installed PWA. Instead, the spec encourages browsers to show some prominent UI (perhaps a bar at the top) notifying the user that the navigation is out-of-scope.
"Unlike previous versions of this specification, user agents are no
longer required or allowed to block off-scope navigations, or open
them in a new top-level browsing context. This practice broke a lot of
sites that navigate to a URL on another origin..."

Related

How to search through all the ajax responses in network tab in Chrome?

How to search through all the ajax responses in network tab in Chrome?
I want to do this is because it is difficult for a JavaScript developer to get to know which information is coming from which service call, especially if you are new to the project and business logic is not clear. Also, opening each service in a network tab and searching in responses of so many service calls is difficult and time consuming.
This has now been implemented on the Network tab. Whenever a search criteria is added, Chrome will offer searching through all headers and bodies.
More from offical doc,
Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.
This is similar to another question this morning to search json responses. The solution is the same, star this issue this issue. Starring is triggered via the star icon in the far left area of the blue title are just under search.
Starring issues let's the developers know what people need. The more stars something has, the more likely it is to get worked on sooner.
Currently this functionality is not provided and extensions are unable to add this type of functionality since the network panel isn't extensible in this way.
In Firefox you can save all the responses as a HAR file and then search through the file in a text editor (Chrome truncates the responses).
Inspector of Microsoft Edge browser offer such feature. Useful when you need to search through traffic made by an HTTPS web site that Fiddler cannot inspect (like Facebook web site).
There doesn't seem to be a way to do this in Chrome or Firefox. My solution has been to use Fiddler, which does support it.
Edit: I believe this was working for all resources at the time of writing, but please see comments because people say it is not/no-longer working as expected.
As of Chrome version 91, if you want to search through all resources (not just AJAX/fetched resources), then you need to open DevTools and then press Ctrl+Shift+F to open a search box. If you just type into the "filter" text input then it only searches through the URLs, rather than also searching the contents.

Accurate browser detection/redirect possible using JavaScript?

Please forgive me if this answer is somewhere else on this site or online. If it is, I sure haven't found it in the past several days of searching.
What I am hoping to find is an "accurate" method of detecting a browser and redirecting to a simple, static page if not a recent browser.
The samples I have found until now often have not provided an accurate representation of the actual browser being used. For instance:
When testing with Navigator 9, I'll get a message that I'm using Firefox 2
When testing with Maxthon 3, it reports I'm using IE 9.
My site displays correctly in all the current browsers I've been testing it with. But I wish I could have a basic static page for those .01% who still are using an old browser for whatever reason. They could still get some basic information from my site, as well as encouraged to update to a more current browser.
If anyone has any useful suggestions, I'd greatly appreciate them.
Thanks so much.
Cheers,
David
Browser detection is never perfect, for a variery of reasons. If you are using jQuery, you should look into jQuery.browser.
I'd try to detect the browser on the server side and do an HTTP redirect if the browser is something non-standard. Most decent frameworks have functionality to detect the browser from the user agent string. Again, this is not perfect, mainly because of the data browsers report. Also, if Maxthon reports it's IE, that's because it is based on IE and therefore the layout engine should be the same.
So you either
support a small number of browsers and cater for their quirks, sending all other browsers to a basic page (this sucks for future versions of browsers because they might be standards-compliant but they will still display your very basic page), or
you have a standards-compliant page for all browsers and then you define alternatives for the ones that give you problems.
I'd go for the second option. It usually all boils down to one version for all browsers, and a number of hacks for various versions of IE. Also, remember to avoid padding in your CSS and use margins instead.
In the end, you probably shouldn't be testing for browsers and version numbers, but supported features. Try using Modernizr.
The $.browser property is deprecated in jQuery 1.3. On jQuery support site, they strongly recommend to use the detection feature (JQuery.support) instead of the jQuery.browser property.
Actually, this has been answered already in another question, please check here How can you detect the version of a browser?

Browser Helper Object (BHO) for Firefox, Chrome and Safari

I have a working Browser Helper Object (BHO) which is essentially an ATL based COM component. When the component is registered as a BHO in the Registry, the internet explorer calls the SetSite() method passing an object with an interface of IWebBrowser and it also exposes a set of events that can subscribed to - such as OnDocumentComplete, which gives us access to the InnerHTML.
I'm looking for something in the same lines for non IE browsers Firefox, Chrome and Safari. I know firefox extensions is where I should start
Is it possible to achieve the same using a cross browser SDK like NPAPI ? (Because each browser has its own SDK and extension development platform like cocoa, Pepper API etc. and in addtion most of them support NPAPI.)
How can I subscribe for events so that a SetSite() sort of function could be called by the browser when the user navigates to a different site ?
The answer to your first question is simple: no, it is not possible to do this with npapi. See http://npapi.com/extensions for more information about the difference between a Plugin (NPAPI) and an Extension. If there are things you can't do with the extension that you need to do (for example, that require C++ code to work) you could put those things in a NPAPI plugin and use it from your extension. If you decide to go that route I recommend looking at FireBreath.
As to the second, it will differ based on which browser you're writing the extension for; yes, it will need to be different for each browser. A quick google search for "firefox extension event page load" yielded a useful-looking doc.

Adding to the browser user agent string?

I have a plug-in that handles its own url schema (something like mystuf:// ). If a user clicks on such a link when the plug-in isn't installed (s)he gets an ugly error. So I extended my installer to write into the Registry (for Internet Explorer) and the user.js (for Firefox) to ADD a custom string to the user agent string. These additions survive a browser upgrade nicely (Microsoft uses this technique to indicate the presence of the dotNet Framework).
Now I need to extend this to Apple Safari and Google Chrome on all supported platforms.
To be clear: I'm not looking how to REPLACE the user agent string, but how to amend it with additional information.
Any hint?
I faced a similar problem and I implemented this in the same way as apple do for iTunes as described in this SO question. Finding information on how to create the Firefox plugin was more tricky, but the answer to my question was a great help. The Firefox (or mozilla) plugin will be used by all mozilla based browsers (Firefox, Chrome, Safari) and you will therefore be able to use the same javascript to detect the firefox plugin in all of these browsers and therefore determine whether your plugin/custom protocol/application is installed.
As Google Chrome supports the Netscape Plugin API ( http://en.wikipedia.org/wiki/NPAPI ), the Firefox way might be a good starting point also there.

Web Browser Plugin that Allows user to view Message Traffic

What is the name of the IE plug in that someone can download (I think from Microsoft) that lets a developer (well, anyone who gets the plug-in, actually) to view the message traffic that goes on behind the scenes from the browser to the server? I saw this one in action but I forget its name. And I think, for the FireFox broswer, you can simply turn it on somehow without getting a plug in.
It cuts the browser window in half horizonally and the bottom half is also divided vertically and you can see the GET and POST messages as well as the complete header information that is sent to the server from the browser across the internet.
HttpWatch is a great plugin for IE, but it's not free. Microsoft also released a free tool called VRTA which works for all browsers, but isn't a plugin.
For firefox it's called Live HTTP Headers. Another option of course is WireShark.
Fiddler is from Microsoft.
http://fiddler2.com/fiddler2/