Use multiple canvas URLs in one Facebook app - javascript

I am trying to host my web app on different domains. But I will receive errors like:
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
However it seems I can only set one canvas URL and secure canvas URL in my Facebook settings page. Is it possible to host my web app on different domains? Thank you very much!

If you can host a single php file (although it doesn't contain php at all, only javascript) on a SSL host you can do it. I wrote a blog post on how I did it using 2 app sharing the same canvas url.
A SSL host is mandatory for this to work. Also shared certificates work.
Short story long in the index.php file you need to:
var urlString=document.referrer;
var pageNameN = "?p="; //this is specific to the first application
var pageNameZ = "?url=";// this is specific to the second application
var indexN = urlString.indexOf(pageNameN);// and get its index.
var indexZ = urlString.indexOf(pageNameZ);// and get its index.
if(indexN != -1){
var resN = urlString.substring(indexN);
location.href = "https://FIRST_APPLICATION_URL/"+resN; }
else {
if(indexZ != -1){
var resZ = urlString.substring(indexZ);
location.href = "https://SECOND_APPLICATION_URL"+resZ; }
}
You catch the request and than split it depending on the requesting url.
In the post you also find the index.php file I used in my case you can download, too.

Related

How to protect image URL from unauthenticated access in angular

In my angular app, it has no,of image urls, how can protect those url from unauthorized access? for example the url can be copied and paste in to any browser(without authentication) or send anywhere.
so it makes any one can accessible. but I require to protect, as well i need to provide the access until the user logged in. is there any specific approach for angular or in general?
needs the advice. thanks in advance.
One way to overcome this is pass the token in your image url and validate the token from the backend. If its successful return the image.
www.samplesite.com/myImageUrl?token=123
The image tag will look something like this.
< img src="https://www.samplesite.com/myImageUrl?token=123" alt="sample">
For unauthorized access, you can change your server settings to only serve static resources from a specific domain, block all other domain requests.
For images after login, you will have to do that by code and that would be a lot of work. Since, you will have to add a boolean to check if user has logged-in or not.
Option 1:
You can display the image as blob, like this:
var location = 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';
fetch(location).then(response => response.blob()).then(blob => {
var url = URL.createObjectURL(blob);
var image = document.createElement('img');
image.src = url;
document.body.appendChild(image);
// your url will look like this:
// blob:https://example.com/f347bbac-af35-40a8-ac2b-daf639faf2db
// this url cannot be used on another domain
console.log(url);
});
Option 2:
Move all of the images to the place that cannot be accessed directly. After signing in, whenever you need to display an image, just make a request to server. Then, server will return a file for the request.
Your_project
|_ wwwroot (public)
|_ Your image folder (private)
|__ folder01
|____ image01.png
|____ image02.png
Reference: Returning a file to View/Download in ASP.NET MVC

How to find out which parent URL called my script?

I have created a page for a web banner under http://example.com/banner, I'm sending this link to publisher websites and pay them to run it.
However, some publishers run, some are not and I'd like to find which parent URL'S called for this page or where did the click come from. Generally, they are putting this URL in an iframe to serve it.
(Many pages doesn't pass referral parameter.)
I've tried different approaches with JS and PHP but as you might guess I'm getting http://example.com/banner as the parent URL.
Is there a way to know the parent URL from a different domain with PHP, JS or any other piece of code? I have a list of publishers but I also need to know which websites running the banner except for those sites.
To make it more clear here is a schema:
MY PAGE WITH BANNER > MY PUBLISHER WEBSITE > USER VISITING THE
PUBLISHER
I don't want to get IP of the user visiting my publisher's website or my page's
URL. I want to see URL of my publisher's website which is in between.
Since this is my web server I can read access logs, error logs etc. without issues.
I'm open to any suggestions.
Thanks!
You could try this, host a javascript file on your server.
Then they would place the script anywhere they want to put the banner:
<script src="//yoursite.com/banner.js"></script>
You could use params in that URL to then serve custom js.
Then fundamentally the code would look something like the following which injects the banner into the DOM where ever the script is placed. You get the sites URL from window.location.href and then send it as a param when requesting the image. (You could also use cookies etc)
<script>
// inject an anchoring element
document.write('<div class="banner_ad"></div>');
// find it
var parentDiv = document.getElementsByClassName("banner_ad");
// create the img/banner, notice the site param
var banner = document.createElement("img");
banner.src = 'http://via.placeholder.com/350x150?site=' + encodeURI(window.location.href);
// loop over the parent elements of each anchoring element
for (var i = 0, len = parentDiv.length; i < len; i++) {
// create the link
var link = document.createElement('a');
link.appendChild(banner);
link.setAttribute('title', 'Ads by Foobar');
link.setAttribute('href', 'http://example.com');
// inject the link and img
parentDiv[i].parentNode.appendChild(link);
}
</script>
Then server-side, look for the $_GET['site'] param.
It's not foolproof, nothing is.

Angularjs not recognising URL [duplicate]

I have created a JS file that I place in some webpages other than mine.
So mine is domain-1.com and I place this to domain-2.com and domain-3.com
This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.
I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.
How to do this?
I only provide them with a JS external link. It is ok If I place an iframe also.
The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.
The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.
You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.
Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;
function storeItem(key, value) {
var message = {key: key, value: value};
storageScriptWindow.postMessage(message, target);
}
// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {
storeItem("foo", "bar");
};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html';
</script>
Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.
At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.
If you don't need to interact with the main window, you can move the script that reads values into the iframe.
If you do need to get the value on the main window, use postMessage again to send values back.
The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).
Cross Domain Local Storage looks good and easy to use
localStorage-tools is another library for this task
For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

how to log the domain of javascript file from that file?

I have a javascript which outputs the domain name in console. This javascript is used in web pages hosted in different domains. The console should display the domain javascript is loaded from instead of the domain web pages are hosted. How do i get that without using jquery?
You will have to extract that from the URL of the script.
Example:
var url = "http://google.com/script.js";
var match = url.match(/\/\/(.*)\//);
if (match) {
console.log(match[1]); // This is the domain name
}
Javascript will lose the context of the original script location once it is fetched.

How to create localStorage for the same domain with www. at the same time or at the next visit?

I have created a JS file that I place in some webpages other than mine.
So mine is domain-1.com and I place this to domain-2.com and domain-3.com
This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.
I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.
How to do this?
I only provide them with a JS external link. It is ok If I place an iframe also.
The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.
The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.
You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.
Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;
function storeItem(key, value) {
var message = {key: key, value: value};
storageScriptWindow.postMessage(message, target);
}
// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {
storeItem("foo", "bar");
};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html';
</script>
Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.
At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.
If you don't need to interact with the main window, you can move the script that reads values into the iframe.
If you do need to get the value on the main window, use postMessage again to send values back.
The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).
Cross Domain Local Storage looks good and easy to use
localStorage-tools is another library for this task
For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

Categories

Resources