Is it possible to getting verification sms code from browser(javascript) application ( autoincrement || auto filling)?
There are article that on ios 12 safari appeared the function auto filling sms verification code (2fa). But i can't find description(html5 or javascript) how does this work?
UPD
it's work well in safari:
<input type="tel" id="single-factor-code-text-field" autocomplete="one-time-code">
I was find apple documentation for this feature
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element
I did not try it yet. But i thing it works only with secret key from clipboard. When you you tap to sms with code, ios suggest you copy code to clipboard.
It seems that the iOS autofill for 2FA is a bit of a mystery. Apple haven't documented a particular way to ensure this works. I had a search around to try to see if there was a specific HTML attribute you could use to ensure the device tries to fill in with the code, but I couldn't find anything.
As far as I can tell, Safari runs some heuristics on your page and on incoming SMS messages and if a code is found in the SMS and the page appears to have an input for a code then it offers the autofill. If you are looking to ensure this works on your site, I recommend inspecting the HTML of another site that you have seen it work on and use similar names for the input field.
On iOS versions previous to 10, I was able to send information from the JavaScript/HTML loaded into a UIWebView back to my application by creating an iFrame on the document or setting document.location.href to a custom URL which the web view would tried to load:
<html>
<body><input id="clickMe" type="button" value="clickme" onclick="changeWindow();" /></body>
<script type="text/javascript">
function changeWindow() {
//create temp frame
iFrame = this.createIFrame('onStatusChange://eyJ1c2VyTmFtZSI6IkpBTCIsLCJwcm92aWRlciI6IkVtYWlsIn0=');
//remove the frame now
iFrame.parentNode.removeChild(iFrame);
}
function createIFrame(src) {
var rootElm = document.documentElement;
var newFrameElm = document.createElement('IFRAME');
newFrameElm.setAttribute('src', src);
rootElm.appendChild(newFrameElm);
return newFrameElm;
}
</script>
</html>
Then on the client, I would just listen for the UIWebViewDelegate callback webView:shouldStartLoadWithRequest:navigationType:, and check to see if the request.URL.scheme was equal to my custom scheme (in this case onStatusChange).
This is a popular way of communicating between the JavaScript and an iOS app, as seen in popular questions such as How to invoke Objective C method from Javascript and send back data to Javascript in iOS?.
This works on any app built with Xcode 7 (Objective-C or Swift) on iOS 9 and 10 devices. I'm running into an issue where the delegate method is not called on any applications built with Xcode 8. It's as if the web view isn't even trying to load the URL, which in turn is not triggering the delegate callback.
Were there any changes to UIWebView or WebKit from Xcode 7 to 8 or iOS 9 to 10 which would cause this not to work? What's really puzzling to me is that a production app I have built with Objective-C in Xcode 7 targeting iOS 8 works on an iOS 10 device, but a debug build built with Xcode 8 of the exact same codebase does not work.
Ok, long story short we use a special URL scheme onStatusChange:// to send Base64 encoded data from the web view back to our iOS application. I believe UIWebView on iOS 10 chokes when trying to load a URL that ends in one or more equals sign characters, and loads about:blank instead of the actual URL.
Since this works perfectly on iOS 9, I'm assuming this is a defect with iOS 10 and have opened rdar://29035522. A full reproducible example of the issue is available in the body of that radar.
I am reading through the Base-N encoding RFC to determine if it is acceptable to remove the padding = characters at the end of my data string, or if they need to be removed from the web and added on the client before decoding the data.
The solution I ended up implementing was percent-escaping the Base64 encoded data, and unescaping it on the client. Not the most elegant solution, but probably the best for safety.
Thats because iOS now blocks http requests by default. You have to reenable it in your info.plist.
https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33
I've built myself a pretty handy chrome extension for trello that allows me to copy a list in plaintext to the clipboard, which for some reason isn't already a thing. It's going great and I want to hand it out to my teammates because we communicate through slack and text messages, but organize on trello.
It just hit me that a couple of my teammates use trello primarily on their phones, and the ability to text a list to a non-member would be WAAAAAAY more handy than having to open up a laptop to do it.
I'm definitely aware that chrome mobile won't allow extensions in the foreseeable future and my team doesn't want to shell out for trello business class just for a simple 'power up'. Until then, is there any way to add functionality/inject javascript to a web app on mobile?
You could write a bookmarklet using the javascript: protocol. That's what I do for fairly simple stuff in mobile Safari. You just click the bookmarklet while you're on the page in question to execute some JavaScript. For example:
var script = document.getElementById('script');
var loader = document.getElementById('loader');
function update(){
loader.textContent = (
encodeURIComponent(`!function(){var d,s=(d=document).createElement('script');s.src="${encodeURI(decodeURI(script.value))}";d.head.appendChild(s)}()`)
);
}
script.addEventListener('update', update);
update();
input {
width: 200px;
}
textarea {
width: 100%;
height: 50px;
}
Hello World
<br/>
<input id="script" value="https://pastebin.com/raw/gxCbGimA"/>
<br/>
Run Script
<br/>
<textarea id="loader"></textarea>
For the record, these are the scripts:
alert("Hello World");
!function(){
var d,s=(d=document).createElement('script');
s.src=d.getElementById('script').value;
d.head.appendChild(s)
}()
You can save links like that as a mobile bookmarklet to execute whenever they are clicked.
answer is: no, you cant inject or modify pages in mobile.
currently your only option is to make an app for android and another one for iOS. The task is easier than you think of you use Cordova to write a javascript app.
source: Im the maker of the Plus for Trello extension (and Android app :)
Firefox for Android supports extensions, and there are at least a few extensions available that enable user script functionality, e.g. USI.
In our web application we need to find out if a Custom URL Protocol Handler is registered or not in windows 10 machine using javascript with Windows 10 EDGE Browser.
If the Custom URL Protocol Handler is not registered in the windows 10 machine we will ask the user to download our desktop standalone app.
If registered we will start our desktop standalone app using the registered Custom URL Protocol Handler.
Since EDGE is a new browser the solutions provided by other users in the internet are not working.
Links I referred that are not working for me in EDGE browser:
https://gist.github.com/keyvanfatehi/f2f521c654bab106fdf9
Please help me out,
Thank you
Maybe this workaround helps:
Whenever you navigate to an unkown protocol with MS Edge, Windows asks the user about the app to handle this protocol. You could just navigate to your protocol and display a message with some information about what to do if the tool does not open. Something like this (sorry for the German screenshot):
<div id="toolBox">
<p id="toolBoxText"></p>
<input type="button" id="toolButton" onclick="openTool()" value="Start tool" />
</div>
<script type="text/javascript">
function openTool(){
window.location = 'myprotocol://command/';
document.getElementById("toolButton").value = "Try again";
document.getElementById("toolBoxText").innerHTML = "Thank you for using our tool. If the tool did not open successfully, please first download and install the tool <a href='download/'>here</a> and then try again."
}
</script>
I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.
for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.
It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.
I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp
I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser
I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code
In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .