How to check if inside Facebook Canvas - javascript

Facebook application, how to check if inside Facebook canvas / standalone using PHP?
This question is an exact duplicate of above question, but the solution for above methods doesn't seem to work now, any updates? and regarding the HTTP_REFERRER header, i found some problems inside Firefox. Any other hacks?

Being passed a valid signed_request might be one way to test this...
Only your application with its APP_SECRET will be able to decode that signed_request so it is un-likely that someone would be able to spoof a valid signed_request; If they are able to do that - then they have pretty much bypassed Facebook security.
If they managed to do that, then maybe they deserve to be able to use your application outside of Facebook ;)

I just do this ($this <--- is a facebook sdk object):
$this->signedRequest = $this->getSignedRequest();
if(!$this->signedRequest){
show_404();
}

Try this:
public static function referrerIsFacebookCanvasApp() {
if (stripos($_SERVER['HTTP_REFERER'], "apps.facebook.com") === false || strpos($_SERVER['HTTP_REFERER'], "facebook.com/l.php?u=") !== false) {
return false;
}
return true;
}

Related

How to use JavaScript or/and PHP, to detect a website/page being stolen/cloned and then redirect reader back to my website

I found hundreds of cloned versions of my website.
Whoever is doing that are using some code that clones my web pages, changes my website name mydomain.com to clone1.com, clone2.com, clone3.com etc and this makes it impossible to use a simple JS or PHP to check if the header URL is = to mysite.com then redirect.
It also does not work using the .htaccess
For this reason I have created this code:
<script type="text/javascript">
if (window.location.href== "http://clone1.com/cat1/{{{ $title->id }}}-{{ (Str::slug($title->title)) }}/cat2/{{ $se->n }}/cat3/{{ $episode->ep_n }}")
{
window.location.href = 'http://google.com/';
}
</script>
This script completes its purpose but is too long and is also very restrictive because it must contain the exact URL.
I'm looking to do this:
<script type="text/javascript">
if (window.location.href== "http://
//contains this part in its URL
clone1.com , clone2.com , clone3.com , clone4....
}}")
{
window.location.href = 'http://google.com/';
}
</script>
How can I create a global JS (JavaScript), that would detect if the current page is not on my domain and then redirect the reader to my domain and the same page?
Many thanks
1. Best Solution - Early Detection
Depending on your main traffic source, it is possible to detect who is scrapping you and block them based on their IP, Headers, number of page views and other data, using PHP & HTACCESS.
I really like this answer on the StackOverflow, that discusses almost all the options available for early detection.
How to detect fake users ( crawlers ) and cURL
2. Plugins & Extensions for Open Source Content Management Systems
Wordpress
If using Wordpress CMS, you can try some plugins, like WordFence, that can detect and block fake Google Crawlers, block based on the number of page views etc.
Other CMS
If you can't find a similar solution for your CMS of choice, consider to ask a community for a help with creating the solution like that, as I believe many people could benefit from it.
3. Solution for already stolen content with JavaScript
Sometimes the easiest road to hide something in JS, is to actually HIDE something by OBFUSCATING and by hiding in multiple important files. For example, obfuscate some important file on your website without which the website just wouldn't work properly.
For example, put an obfuscated version of the code below somewhere in JS file in the header, Obfuscate this code using any free services online or download your own library on Github:
Non-Obfuscated:
w='mysite.com'; // Current URL e.g. 'mysite.com/category1/page2/'
function check_origin(){
var check = 587;
if(window.location.hostname != w){
window.location.href = w;
}
return check;
}
var check = check_origin();
Obfuscated example:
var _0x303e=["\x6D\x79\x73\x69\x74\x65\x2E\x63\x6F\x6D","\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x72\x65\x66"];w= _0x303e[0];function check_origin(){var check=587;if(window[_0x303e[2]][_0x303e[1]]!= w){window[_0x303e[2]][_0x303e[3]]= w};return check}var check=check_origin()
Now put an additional code in some Footer JS File, to verify the code above wasn't modified in any way:
Non-Obfuscated example:
if(w!=='mysite.com'||check == false || typeof check == 'undefined' || check !== 587 ){
window.location.href = 'mysite.com';
}
Obfuscated:
var _0x92bb=["\x6D\x79\x73\x69\x74\x65\x2E\x63\x6F\x6D","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E"];if(w!== _0x92bb[0]|| check== false|| typeof check== _0x92bb[1]|| check!== 587){window[_0x92bb[3]][_0x92bb[2]]= _0x92bb[0]}
I have used free online service from Google's search results for the term "Free Online JS Obfuscator:
https://javascriptobfuscator.com/Javascript-Obfuscator.aspx
4. Fight thieves with available methods e.g. Request a Ban from Search Engines – The Digital Millennium Copyright Act of 1998
Here is a blog-post that describes what to do when someone is stealing your content.
https://lorelle.wordpress.com/2006/04/10/what-do-you-do-when-someone-steals-your-content/
You can investigate who is doing that and report them to their partners, search engines, advertisers - to disrupt their business.
Depending on their country of origin and yours, it is maybe even possible to sue them and win.
why not check if hostname is your ?
if(window.location.hostname != 'mysite.com'){
window.location.href = 'http://google.com/';
}

Using mobile data causes unexpected results

we are currently working on an application that works fine with wifi and has an offline version and once they have finished the user can upload the results to the online database. The issue were experiencing is that so of the ids are not matching up when using mobile data (3G/4G). Has anyone else experienced this similar problem using HTTPClient, below is an example of my httpclient, am i missing something that will help prevent this or any other suggestions?
I know NETWORK_ENABLED will still perform the sync as mobile data is under the NETWORK_ENABLED, but is there a way to see if connection is lost?
this.sendToServer = function(params, httpParams) {
if (Alloy.Globals.NETWORK_ENABLED){
var xhr = Ti.Network.createHTTPClient(params);
xhr.validatesSecureCertificate = false;
xhr.open('POST', this.url, true);
xhr.send(httpParams);
} else {
params.onload();
}
};
The only thing I can recommend is this module here: https://github.com/benbahrenburg/Pinger
But I've never used it. Checking the example .js file, seems to only ping www.apple.com and give you a "yes" or "no".
Could be quite useful actually =)

online offline check using javascript [duplicate]

This question already has answers here:
Detect the Internet connection is offline?
(22 answers)
Closed 8 years ago.
How do you check if there is an internet connection using jQuery? That way I could have some conditionals saying "use the google cached version of JQuery during production, use either that or a local version during development, depending on the internet connection".
The best option for your specific case might be:
Right before your close </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
This is probably the easiest way given that your issue is centered around jQuery.
If you wanted a more robust solution you could try:
var online = navigator.onLine;
Read more about the W3C's spec on offline web apps, however be aware that this will work best in modern web browsers, doing so with older web browsers may not work as expected, or at all.
Alternatively, an XHR request to your own server isn't that bad of a method for testing your connectivity. Considering one of the other answers state that there are too many points of failure for an XHR, if your XHR is flawed when establishing it's connection then it'll also be flawed during routine use anyhow. If your site is unreachable for any reason, then your other services running on the same servers will likely be unreachable also. That decision is up to you.
I wouldn't recommend making an XHR request to someone else's service, even google.com for that matter. Make the request to your server, or not at all.
What does it mean to be "online"?
There seems to be some confusion around what being "online" means. Consider that the internet is a bunch of networks, however sometimes you're on a VPN, without access to the internet "at-large" or the world wide web. Often companies have their own networks which have limited connectivity to other external networks, therefore you could be considered "online". Being online only entails that you are connected to a network, not the availability nor reachability of the services you are trying to connect to.
To determine if a host is reachable from your network, you could do this:
function hostReachable() {
// Handle IE and more capable browsers
var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
// Open new request as a HEAD to the root hostname with a random param to bust the cache
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
// Issue request and handle response
try {
xhr.send();
return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
} catch (error) {
return false;
}
}
You can also find the Gist for that here: https://gist.github.com/jpsilvashy/5725579
Details on local implementation
Some people have commented, "I'm always being returned false". That's because you're probably testing it out on your local server. Whatever server you're making the request to, you'll need to be able to respond to the HEAD request, that of course can be changed to a GET if you want.
Ok, maybe a bit late in the game but what about checking with an online image?
I mean, the OP needs to know if he needs to grab the Google CMD or the local JQ copy, but that doesn't mean the browser can't read Javascript no matter what, right?
<script>
function doConnectFunction() {
// Grab the GOOGLE CMD
}
function doNotConnectFunction() {
// Grab the LOCAL JQ
}
var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image coming from cache
</script>
Just my 2 cents
5 years later-version:
Today, there are JS libraries for you, if you don't want to get into the nitty gritty of the different methods described on this page.
On of these is https://github.com/hubspot/offline. It checks for the connectivity of a pre-defined URI, by default your favicon. It automatically detects when the user's connectivity has been reestablished and provides neat events like up and down, which you can bind to in order to update your UI.
You can mimic the Ping command.
Use Ajax to request a timestamp to your own server, define a timer using setTimeout to 5 seconds, if theres no response it try again.
If there's no response in 4 attempts, you can suppose that internet is down.
So you can check using this routine in regular intervals like 1 or 3 minutes.
That seems a good and clean solution for me.
You can try by sending XHR Requests a few times, and then if you get errors it means there's a problem with the internet connection.
I wrote a jQuery plugin for doing this. By default it checks the current URL (because that's already loaded once from the Web) or you can specify a URL to use as an argument. Always doing a request to Google isn't the best idea because it's blocked in different countries at different times. Also you might be at the mercy of what the connection across a particular ocean/weather front/political climate might be like that day.
http://tomriley.net/blog/archives/111
i have a solution who work here to check if internet connection exist :
$.ajax({
url: "http://www.google.com",
context: document.body,
error: function(jqXHR, exception) {
alert('Offline')
},
success: function() {
alert('Online')
}
})
Sending XHR requests is bad because it could fail if that particular server is down. Instead, use googles API library to load their cached version(s) of jQuery.
You can use googles API to perform a callback after loading jQuery, and this will check if jQuery was loaded successfully. Something like the code below should work:
<script type="text/javascript">
google.load("jquery");
// Call this function when the page has been loaded
function test_connection() {
if($){
//jQuery WAS loaded.
} else {
//jQuery failed to load. Grab the local copy.
}
}
google.setOnLoadCallback(test_connection);
</script>
The google API documentation can be found here.
A much simpler solution:
<script language="javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
and later in the code:
var online;
// check whether this function works (online only)
try {
var x = google.maps.MapTypeId.TERRAIN;
online = true;
} catch (e) {
online = false;
}
console.log(online);
When not online the google script will not be loaded thus resulting in an error where an exception will be thrown.

localStorage setItem doesn't work on ipad

In my hydbrid app (Phonegap), I am trying to write to localStorage in a very standard way :
window.localStorage.setItem("proDB", JSON.stringify(data));
or
window.localStorage["proDB"] = JSON.stringify(data);
But it doesn't work on Safari on iPad 2 (iOS 7.1).
It doesn't work and the whole app stops.
Here's the userAgent of this ipad :
Can you help me ?
Thanks
Please check whether you have Private Browsing enabled in Safari. In Safari Private Browsing mode, you get a quota of zero. Hence, all calls to localStorage.setItem will throw a quota exceeded error. Personally I think this is a huge mistake by Safari (as so many sites break), but it is what it is so we have to find a way around it. We can do this by:
Detecting whether we have a functional localStorage
Falling back to some replacement if not.
Read on if you want the details :)
1: Detecting a functional local storage
I am currently using this code to detect whether local storage is available, and fall back to a shim if not:
var DB;
try {
var x = '_localstorage_test_' + Date.now();
localStorage.setItem(x, x);
var y = localStorage.getItem(x);
localStorage.removeItem(x);
if (x !== y) {throw new Error();} // check we get back what we stored
DB = localStorage; // all fine
}
catch(e) {
// no localstorage available, use shim
DB = new MemoryStorage('my-app');
}
EDIT: Since writing this I have packaged up the feature detecting code. If you are using NPM you can install storage-available like so:
npm install --save storage-available
then you can use it in your code like this:
if (require('storage-available')('localStorage')) {
// Yay!
}
else {
// Awwww.....
}
2. Fall back to a shim
The easiest way to deal with the issue once we have detected the problem is to fall back to some other object that does not throw errors on every write.
memorystorage is a little library I wrote that follows the Web Storage API but just stores everything in memory. Because it uses the same API, you can use it as a drop-in replacement for localStorage and everything will function fine (though no data will survive page reload). It's Open Source so use as you please.
Background info
For more information on MemoryStorage and this issue in general, read my blog post on this topic: Introducing MemoryStorage.
I have set local storage key values through below logic using swift2.2
let jsStaring = "localStorage.setItem('Key', 'value')"
self.webView.stringByEvaluatingJavaScriptFromString(jsStaring)
Your first setItem example is correct. I don't believe that you can do the second option (localStorage["someKey"] = "someValue") though. Stick with the first one.
You mention hybrid - is it a PhoneGap or some other framework? Where in the app are you calling localStorage.setItem? If PhoneGap, be sure that everything has loaded via onDeviceReady first before trying to access localStorage:
<script type="text/javascript">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
window.localStorage.setItem("key", "value");
}
</script>
Also, if the app freezes/stops working, in my experience it's because somewhere in the code you are accessing an object that is undefined. Perhaps try some debugging by checking if localStorage is undefined and logging it? Are you 100% sure that the "setItem" line is where it fails? Console.log is your friend, prove it! :)
if (localStorage === undefined) {
console.log("oops, localStorage not initialized yet.");
}
else {
window.localStorage.setItem("proDB", JSON.stringify(data));
console.log("localStorage available.");
}

Platform-Independent JS->Native Bridge?

I'm currently working on an app that aggressively uses webviews on both iOS and Android to render content, with native chrome surrounding it. I want to be able to control this chrome via javascript methods.
Android Webview has addJavascriptInterface which allows this to happen, but iOS does not have this facility. I've already checked out the SO answer at iOS JavaScript bridge, and this has usefuleinformation, but It's iOS-only; optimally the same underlying web code could power the callbacks on both Andorid and iOS devices.
I'm wondering if something like PhoneGap or Appcelerator provides a way to do this simply; however I don't need their core product (providing a native experience via underlying html/css/js) and I dont even know if what I need is included in their package.
Thanks for any info!
I would say that the best way would be to do it yourself, combining those two examples:
function nativeDoStuff() {
if (androidbridge != null {
androidbridge.doStuff();
}
else {
//construct url
window.location = "myiphonescheme://dostuff";
}
come to think of it, if you're feeling ambitious you could code up a quick javascript object to do it for you:
function NativeAppBridge () {
function runMethod(methodName, params) {
if (androidbridge != null {
// If the android bridge and the method you're trying to call exists,
// we'll just call the method directly:
if (androidbridge[methodName] != null) {
androidbridge[methodName].apply(this, params);
}
}
else {
// building the url is more complicated; best I can think
// of is something like this:
var url = "myiphonescheme://" + methodName;
if (params.length > 0) {
url += "?"
var i = 0;
for (param in params) {
url += "param" + i + "=" + param;
++i;
if (i < params.length) {
url += "&";
}
}
}
}
}
}
Using it would then be as simple as:
var bridge = new NativeAppBridge();
function onClick() {
bridge.runMethod("doStuff", null);
}
Be aware that I coded this off the top of my head and don't have time to test, at the moment - but I think it should work well enough, provided I didn't make any major mistakes
You can try the XWebView project if you plan to use WKWebView
You can use phonegap plugins to do it. They provide an excelent way to communicate between their webview and your native layer.
Here you can see how to create one!
And my personal opinion on the subject: I've been using phonegap for a while and if you are on webviews, I strongly suggest you to rethink the way you're doing stuff and move to a mobile web platform. You probably can save a lot of time.
The way I see it, the great disadvantage on using this is you are creating a webpage instead of a mobile app. You cant use native components and your app gets less responsive. As you are already on webviews, I believe you can only find benefits on these platforms.

Categories

Resources