Detect if page was opened from app - javascript

This applies both to Android and iOS. My web page may be sometimes opened by an app (you go to the app, and click a link there which opens the page).
I want to know if the page was accessed through an app or if the user got to it, let's say, by typing the address on the browser.
If accessed through an app, I don't need to know which app it was.
The only thing I know of is document.referrer, but it seems to return "" when the page has been opened by the app. Unfortunately using "" as an indicator is not possible, as other ways of getting to the page may also show "" (for example typing the address). The history object does not seem to contain the info I'm looking for either.
I am using a Zendesk Help Center, so I only have access to the javascript of the page in order to detect this. I can't make changes on the server-side of my page.
Alternatively, I may be able to talk to the people in charge of the app so that they include something when the app opens the browser which would allow me to access that info on the browser, but I am not sure what that could be. Any ideas?
Thank you!

It seems to me like your best bet would be to have specific links for your site that will let you know that the link came from the app.
Like so: http://www.yoursite.com/?openedFromApp
You will use those links inside the app that will be directing users to your website.
That way, if you were using PHP as your server-side language you'd be able to check if the openedFromApp URL parameter was set like so:
<?php
if(isset($_GET['openedFromApp'])) {
echo "The website was opened by an app";
}
else { echo "The website was opened normally"; }
?>
If you want to check if the openedFromApp URL parameter is set using Javascript you'd have to create your own function for accessing URL parameters as Javascript does not have a built-in way of accessing them.
But this link could help you access the URL parameters with Javascript: https://stackoverflow.com/questions/...

Related

Force Auto Open Dialog in Chrome

FileRun has a beautiful File-Explorer Google-Drive styled. You can testdrive it here FileRunDemoSite
When I download a File I get to choose if I want to open the file directly in a Office Application.
When I click on Office, google prompts me with a Chrome Open File Dialog. The File opens directly from the location instead of being savend in /downloads/ folder.
How can I achieve this behavior? All existing answers on SA state that this is not possible, so this might be interesting to others as well. Not even google has implemented this. Is there a cross-browser solution?
Onedrive does it as well:
Credit to Thomas2D to get me on the right track. How it basically works is:
If you develop an application you can register a new protocol with the operation-system. http:// will be handled by your default browser. applicationX:// will be handled by applicationX, ms-word:// will be handled by word. If you click on a link the browser/operating-system looks up which application should handle the protocol an pass the request on to this application.
For Office documents the URI is a bit more complex ms-excel:ofv|u|http://contoso/Q4/budget.xls. You can open it readonly/ for edit / as a template. Check out this document for a detailed description of all the options: Office URI Schemes
For other applications check the URI Schemes with that application.
How to use it on a website:
It is not advisable to set a link to an application in a Dom element href attribute. You have no way of checking if the application is installed or not.
If you use Javascript you can check if the request times out / fails and use http:// instead.
. Set the protocol in a href: window.location.href = encodeURI('ms-excel:ofe|u|http://example.com/excel.xlsx') or by setting the the location.protocol, https://www.w3schools.com/jsref/prop_loc_protocol.asp
There is a jQuery Plugin to do that :jquery.applink.js
I personally think that this is accomplished by starting application via specific url.
I know that this works on iOS for launching application. In iOS it was done by something (simillar to mailto:example#example.com)
<script type="text/javascript" charset="utf-8">
window.location = "myapplication://myparams";
</script>
EDIT: I finally get it, you have to use application url scheme. For example, if you want to open your Excel file via browser, you have to use this JS code.
window.location.href = encodeURI('ms-excel:ofe|u|http://example.com/excel.xlsx');

Remove target attribute in iframe link

I have an iframe on one of my pages that shows content on an external site (vendor product). All works well except a few links that have target="_main" in them. These links open in a new tab. What I need to do is strip the target attribute from all links within the iframe so all links stay within the iframe rather than opening a new window or tab.
It seems like there should be a simple javascript solution to this.
If I can't get this to work in an iframe then I will be forced to re-create all the content on my site which would be very painful..... to say the least.
Any help???
You need access to the external site's codebase in order to dynamically fix this. What you want to do in the external site's codebase is to check if the sites is within an iframe. If it is within an iframe then run a function to remove all target attributes on links.
// vendors product page
if ( self !== top ){
$('a').removeAttr('target');
} // else do nothing
self !== top is the same as saying if my site isn't the top most window then return true.
Not directly that I am aware of.
However, if you have access to a scripting language (like PHP or ASP) on your site you can read your vendors' page directly from your server, do a find & replace on it & then render that onto your site; either in an iframe or however else you want.
Edit
There are many ways to do this, depending on how much control you have over you PHP config. Have a look at these resources & see if you can figure out what to do. If not I would suggest you start a new question specifically focused on what it is you are struggling with.
http://php.net/manual/en/function.file-get-contents.php With this method you have to be aware of the tip on the page:
A URL can be used as a filename with this function if the fopen wrappers have been enabled. See fopen() for more details on how to specify the filename. See the Supported Protocols and Wrappers for links to information about what abilities the various wrappers have, notes on their usage, and information on any predefined variables they may provide.
http://php.net/manual/en/function.fsockopen.php Again, be aware of the warning & notes.
http://php.net/manual/en/book.curl.php
I personally have written a class that uses fsockopen because it is the most flexible for my needs but usually file_get_contents does the trick because it is the simplest to set up out of the 3 options, if you have the right wrappers configured & you don't need to start working with SSL or funny protocols. I stay away from CURL because you have to install a library in order for it to work. I prefer my code to be portable for standard installs.
Some useful links that might help:
PHP readfile from external server
Possible Example
$vendorUrl = isset( $_REQUEST['vendor'] ) ? $_REQUEST['vendor'] : 'www.default-vendor.com';
$iframeContents = file_get_contents("http://$vendorUrl", false);
exit str_replace( 'target="_main"', '', $iframeContents );
Then you just have point your iframe at whatever page you save this script in on your server & include ?vender=www.vendor-url.com as the query string.
How about giving your own iframe the name _main?
<iframe name="_main" ...
The other links should then open in that iframe too.
Regards, Max

Javascript redirection / domain specify

I found an nice script while searching and inspecting the elements of some websites.
This is what I have found:
<script type="text/javascript">
//redirect browser to fullscreen preview
if (/^http:\/\/codecanyon\.net/.test(document.referrer))
window.top.location.href = 'http://www.gravitysign.com/backslider/';
</script>
So if I understood from this script it tells jquery if the website is opened over codecanyon redirect them to specifed website for preview.
Now... I was wondering if there is possibility to make something like this.
If we specify an website for example http://google.com and we input that into javascript... And then if that website is uploaded to any other domain, other then google.com ... It will redirect to specified site (google) ?
So to clear things out a little bit let me make an example.
If I made a website for "an-website.com" and then someone take their website and upload it to "another-website.com", it will automatically redirect all visitors from another-website.com to an-website.com.
Hope I was clear enough and hope that this is possible. Cheers!
You can of course redirect any user accessing your site from a domain not matching yours but using javascript. This should work just fine:
if (window.location.hostname !== 'yourdomain.com'){
window.top.location.href = 'http://yourdomain.com';
}
You can also use match, if you host your site on a subdomain, etc.
Keep in mind that any person with write access to the file on the server will be able to remove this "copy protection". Copy protecting client side content is impossible, as you need to serve the content in a way a browser understands, effectively making the content available to anyone.
If you are looking for solution for single domain protection, here you can see my
Redirect Website if its not specified domain in script - Protection using Javascript
I am looking for solution for multiple domain.

Creating a tweet button without opening a new window

I'm looking to add a "tweet this" button to a site. Simple enough, right? The catch is that the site is meant to run on an embedded platform that doesn't particularly handle popup windows, so I'm trying to do everything inside the page.
I'm able to successfully create my tweet button, attach an onClick handler to it, and construct a proper twitter.com/share URL for the relevant content. All works fine when I open that URL in a new window with window.open. However, if I try to open the URL in an iframe, nothing loads inside the frame. Even loading http://twitter.com into the iframe fails in the same way. However, loading Google or any other website seems to work just fine.
Any thoughts on what I'm missing here? Thanks! --zach
Edit:
Yep, they are detecting the iframe on load and blanking the page:
if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location;
setTimeout(function(){ document.body.innerHTML='';},1);
window.self.onload=function(evt){document.body.innerHTML='';};
}
Any reasonable way to get around this, or am I stuck writing my own auth pipeline through oauth? I don't need anything from their API, just letting users tweet to their own accounts.
Twitter (like Stack Overflow) is probably using some Javascript to ensure they're not being presented in an iFrame:
if(top!=self){
//hates you
}
I ran into something similar recently, and ended up re-doing part of my app without the iFrame element.
Go and get a developper account on twitter and things are made easy for you :)
Can you simply redirect the the twitter share URL? I'm guessing they want to be careful about opening the window in iframe's to prevent malicious sites from tweeting in a user's account without giving the user a chance to first confirm their intent to send this tweet.
You said window.open worked fine for popping up the url in a new window but have you tried popping it into the parent frame?
twtWindow=window.open([url],'_parent',[specs])
#yuval Unfortunately for you, the twitter url goes to a page that has the X-FRAME-OPTIONS:SAMEORIGIN header set in the response. It's not a Javascript check. The browser will simply refuse to render the page after seeing the header. This is done to prevent a clickjacking attack, usually done to steal a user's password.
So your only other option is really to redirect your current page with window.location.href=url.

How to get url of embedding page for a javascript widget

(Rewording the question as there were very few views otherwise).
I want to build a widget that others can include on their website, and the widget itself will be hosted on my website. I am aware of just one method to build widgets that can be embedded on other websites: The website that wants to embedd the widget sources a javascript from my site, which does "document.write" on the page. Something like:
<script language="javascript" src="http://www.my-website-that-will-host-the-widget.com/javascript-emitter.php?id=1234&width=200&bordercolor=000000&bg=ffffff&textcolor=000000"></script>
Now, I want to make a particular widget accessible from only particular domains. For this, I want to know the URL of the page that is embedding my widget reliably . No-one should be able to spoof it. For example, if I have an explicit variable in the embedding code, people can change it.
How do I do it? (I also want that there minimal code to write for the person who is embedding my widget).
regards,
JP
Explanation 1:
Lets say I want to do this: If widget is accessed from 1.com, display A, else display B. How do I do it reliably. Thing is, "A" is something that should not be visible in the code unless the widget is accessed from 1.com. (Thus, if it is embedded in 2.com, I don't want to output if(location.href == 1.com) write(A) else write (B)
Note 1:
(As an aside, if someone feels my method is not good/efficient and can suggest better methods/tutorials, etc., that would be great help. Most google queries give you sites that explain how to build/obtain widget for "your site".... and usually point to websites that allow you to build widgets hosted with them, I want to understand how to build widgets that can be embedded by other websites from my site)
In javascript on the client-side, you can use location.href to get the url of the current page:
var url = location.href;
If you do not want to output any javascript at all for a forbidden domain, in your php you can check the HTTP_REFERER header with the global variable $HTTP_REFERER. In your javascript-emitter.php script try this:
<?php
echo $HTTP_REFERER;
?>
However be warned that this is not always to be trusted: it is up to the client (the browser) to send the correct REFERER header. And of course if someone really wanted to include your widget on their site, they could easily request your javascript server-side spoofing the REFERER header - that is set it to something that's on your whitelist - before forwarding it to the client.
In short there's no way you can easily and absolutely block blacklisted sites from using your widget.

Categories