Develop Reference

IOS safari or Chrome read / write file via USB

Does IOS Safari / Chrome browser allows accessing file from USB device / Stick connected via USB (Lighting to USB adapter)? I did a quick google and seems like uploading (write) is not possible but maybe read is possible?
According to this https://caniuse.com/#feat=filesystem
Seems like IOS Safari does not support file system / file writer api
But it supports File api
https://caniuse.com/#search=file%20api
Any comments would be highly appreciated.

In iOS, File API connected to 'Files' application which provides connection to several cloud services and access permission to internal shared storage.
Currently, 'Files' application doesn't support file access to external devices.
If you want to access to external devices with File API, you must use 3rd party application which supports 'Files' application as a pipe.

How to sign the document with a certificate's private key from the browser (CAPICOM alternative)?

So, till Windows 7 there was a Microsoft ActiveX component: CAPICOM, which one could call from Javascript and then show the contents of the certificate storage on the client's machine. The client then could choose the appropriate certificate and sign some document with the certificate's private key.
That's how the access to the certificate storage looked in Javascript:
var MyStore = new ActiveXObject("CAPICOM.Store");
var oCertificates = new ActiveXObject("CAPICOM.Certificates");
// attempt to open the personal certificate store
MyStore.Open(CAPICOM_CURRENT_USER_STORE, "My", CAPICOM_STORE_OPEN_READ_ONLY);
What’s the alternative to using CAPICOM nowadays? I want the client to be able to sign some piece of text with his private key in the browser and then send the signed text with the public key to the server. Is it still possible?
Maybe I could use Java or Silverlight instead of pure JavaScript? What about PKI.js and similar?

In general, currently is not possible due to lack of support of browsers to Java or silverlight.
Chrome has dropped support to NPAPI plugins. Firefox has announced it will discontinue it in 2017, Edge has no support. Microsoft has deprecated Silverlight and Oracle has also announced the deprecation of the Java browser plug-in. Only old versions of IE could be used.
Javascript cryptographic libraries such as PKI.js, forge or the built-in WebCryptographyApi can be used to perform digital signatures, but they do not have access to the Operative System KeyStore, so you can not access to the installed certificates
Alternatives (Not very encouraging):
Use WebCryptographyApi loading certificates in browser (not for smartcards)
Launch a local application installed on your device and invoke via protocol, using an embedded http server or with chrome messaging api
Wait patiently to Key Discovery Api which will provide with access to the OS keystore to WebCrypto

In fact I've created a .NET ActiveX object and used X509Certificate2UI class and others from the same namespace to show information about the certificates and to sign some data.
Pros: no need to use CAPICOM.
Cons: it's still an ActiveX component and so it's available in Internet Explorer only.
But that was ok for my client so I took this path.

Digital signature with Javascript

So I'm stuck with this problem:
IE Edge no longer allow applets, activeX, etc. ,
and I have this applet that is used for digital signature,
the idea is to extract the private key from the KEY file in the client side, in that way the private key never leaves the client's computer, that is a requirement for security, it can't be avoid :(
I'm looking for APIs or frameworks, but I can't found a way to solve this,
with jsrsasign the examples uses a PEM file but my users have .CER + .KEY + password, in java I can do it, but I need to do it in javascript or in something on the client side.
and, reading the Web Cryptography API and some examples I found, they generate NEW private and public keys to sign BUT they never READ an existing CERTIFICATE
does anybody have this problem or know a framework I could use?
please heeeelp!

So the answer was to use JSRSASIGN (http://kjur.github.io/jsrsasign/) in the examples posted in github it uses PEM files, I build an example to use CER+ KEY + PASSWORD >> https://github.com/alfredomova/firmaJs-with-jsrsasign-example,
for that specific example i used sparkMD5(https://github.com/satazor/SparkMD5) to calculate the file's hash.

Modern browsers no more supports ActiveX, applets. WebCrypto API generates and uses keys dynamically but does not have capability to access Certificates from Certificate Store.
The accepted answer provided by Alfredo M, who has also asked question, points to JavaScript to handle cryptography in browser which does not talk about accessing local Certificate Store. Recently Certificates are not being generated/issued as pfx (or PEM) files but on Cryptographic device like USB Token or smart card.
Thus we need to use Browser Extensions for modern browsers where application running behind the Browser can access Certificate Store and sign the hash. One such browser extension is provided free by my Company. You just need couple of lines of JavaScript code to call methods provided by any Browser Extension to achieve Digital Signing from modern Browser. If you just want to sign files or eReturns, you don't need any server side component. If you want to sign pdf, you may need pdf component on server side.

You don't necessarily need to force your web app to work in Edge since it no longer support the legacy technologies that your web app is using.
"Use Enterprise Mode with Microsoft Edge to open Internet Explorer 11
for your business’s sites that require IE’s proprietary technologies."
Include your site on the Enterprise Mode Site List so it will open in IE11 automatically:
Once Edge detects that your web app is using propietary technologies, it will tell you to open your site in IE11.
The steps and the details can be found in this blog post by the Microsoft Edge team and check the user experience section of the blog so you'll get the idea of the UX it will bring to your users once implemented:
http://blogs.windows.com/msedgedev/2015/08/26/how-microsoft-edge-and-internet-explorer-11-on-windows-10-work-better-together-in-the-enterprise/

Can a website (HTML5,JavaScript) access a mobile device's (android/iPhone) contact list, SDCard files

Can a website (HTML5,JavaScript) access a mobile device's (android/iPhone)
contact list, SDCard files?
A website as in one opened in a browser not a phonegap application/webapp.

There was an attempt at the W3C to create a browser API to access contacts from the browser.
This is often mentioned as one of the new HTML5 APIs.
However the attempt never became a real specification and never got implemented by any browser vendors. Now it is officially discontinued:
http://www.w3.org/TR/contacts-api/

You can't access the mobile device file system through a website, it would be a major security problem. You might be able to steal all user files if you can access them through the browser. Hope this helps.

At this point in time there is no way to access the internal APIs from Android, iOS and Windows Phone via a simple website. This also precludes you from accessing aspects such as the contact list because these are all only accessible via API calls.
Solutions that allow you to code phone apps or web apps in JavaScript or HTML5 and still grant access to APIs do so by utilizing a wrapper with calls back to the native code. But you can't call native code from an external source such as a website.

Chrome has since shipped their own version of a "Contact Picker" HTML5 API in Chrome 80: https://web.dev/contact-picker.
Chrome only: it is not a W3C Standard nor is it on the W3C Standards Track.
selectRecipientsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(['name', 'email'], {multiple: true});
if (!contacts.length) {
// No contacts were selected in the picker.
return;
}
// Use the names and e-mail addresses in |contacts| to populate the
// recipients field in the website’s UI.
populateRecipients(contacts);
});

Am not so sure if the author of this question will still be interested in a solution but I use this on my apps, its really a handy way of access native api from html5 apps. http://bridgeit.mobi/bridgeit.html#features
BridgeIt enables any web application to access a wide range of mobile device capabilities using a simple JavaScript API.
Using this tool is as easy as 1, 2, 3…
Include the BridgeIt JavaScript in your page
<script type="text/javascript" src="http://api.bridgeit.mobi/bridgeit/bridgeit.js"></script>
Attach a BridgeIt call to some action element on your page, and provide a callback to handle returned values from BridgeIt. For instance, a button to retrieve a contact from the address book...
bridgeit.fetchContact('element_ID', callback_Function);
Access the page from your mobile browser. If the BridgeIt utility app is not already installed, you will be prompted to do so. Once the BridgeIt utility app is installed, your application can access all of BridgeIt's native features.
Example code can be found here https://github.com/bridgeit/bridgeit.js/wiki/Contact-List-Tutorial

https://developers.google.com/people/
You can't access Contacts by website stored on phone, but you can do it server side using People API. If user stored everything on the cloud - you win. Perhaps this is only way to provide native-like experience on your website

You can access address book using Autofill feature of safari browser in iOS devices (but settings > safari > autofill > contact info must be turn on). And the name field in must be "name, email, phone, tel, etc" to get autofill works properly. It works only in Safari but not in other browsers.

Using pure HTML
<input type="file">
you can access files from mobile device,but you cant access contact.

Is there a way to distinguish that my Javascript is running in a trident-based application vs. Internet Explorer?

I've got a third party script that runs in many places on the web. I'd like to be able to tell when I'm running in an app vs. a browser. The user agent doesn't always help. Chrome provides the chrome object which has some different properties depending on the environment. Anyone know of anything similar for IE?
This is for a product similar to google analytics which can be implemented or wind up in many environments, and I'm trying to distinguish them better.

Check for window.external. If window.external is null then the web page is loaded into a Web Component, otherwise it is loaded via browser.
window.external enable you to communicate with [ComVisible(true)] instances which are enabled by default in the browsers. As long as your apps are not decorated with [ComVisible(true)], you can distinguish between app and browser page consumption.
Read more about window.external on http://msdn.microsoft.com/en-us/library/ie/ms535246%28v=vs.85%29.aspx

The way Google Analytics checks for browser and device is the HTTP User-Agent header. It lets you check for browser, browser version, OS, OS version, and sometimes device:
http://jonathanstark.com/blog/windows-phone-8-user-agent-string
http://msdn.microsoft.com/en-us/library/ms537503(v=vs.85).aspx
You can parse this string in Javascript as well:
Getting the User Agent with JavaScript