Javascript window.opener.postMessage Cross Origin with multiple sub domains - javascript

I'm trying to allow multiple subdomains when doing :
window.opener.postMessage(...);
This works but this is not safe as all possible domains are allowed and I don't want this :
window.opener.postMessage('MyMSG', '*');
This works for a single domain :
window.opener.postMessage('MyMSG', 'https://example.com');
But what if I want to allow this : *.example.com ?
Of course this:
window.opener.postMessage('MyMSG', '*.example.com');
window.opener.postMessage('MyMSG', 'https://*.example.com');
window.opener.postMessage('MyMSG', 'https://(.*)example.com');
does not works
What is the right way to do that? Is that even possible?
Thank you

The targetOrigin expects * or an exact uri, ie no subdomain wildcards.
If you want to post to multiple targets than you will need a separate postMessage() call for each. To make this easier you can just put all the domains into a list and iterate over the list instead of hard-coding each call.
var someData = {};
var subdomains = ["one","two","three"];
for(var subdomain of subdomains){
let target = "http://"+subdomain+".example.com"
window.postMessage(someData,target);
}
But this come with maintenance cost of keeping the list updated
Now depending on which end your code is at you can also use certain methods to get an exact uri at runtime. Note examples use URL to parse out just the protocol and host to get a proper value to pass to postMessage.
If you are on the end that opened a window, or the parent of iframe, you can just grab the src,href, or whatever property used to indicate the url for the window, iframe, etc.
//if using for instance window.open()
//you already know the url as it has to be passed to the function
var target = window.open("http://example.com/some/path");
//so in this case you would first save the url to a variable and use that variable for both
var url = new URL("http://example.com/some/path");
var targetDomain = url.protocol + "//" + url.host;
var target = window.open(url.href);
target.postMessage("message",targetDomain);
//if using an iframe just grab the src property and parse the domain from that
var url = new URL(iframeElement.src);
var targetDomain = url.protocol+"//"+url.host;
iframeElement.contentWindow.postMessage("message",targetDomain);
Now if you are on the other side, ie in the iframe or the opened window you can use document.referrer with the exception when opening a non-secure url from a secure page. Meaning document.referrer won't be set when you open a http:// url when your page is using https://
var url = new URL( document.referrer );
var target = url.protocol+"//"+url.host;
//opened window
window.opener.postMessage("message",target);
//iframe
window.parent.postMessage("message",target);

Related

How can I make a page that look for URL and create a text that refer to the URL?

So it's kind of a dumb question but I'm really wondering how I can make this :
user type www.mydomaine.com/something
page display : something
and it does with anything he type after the domain name
I've no idea how I could do that. I know I can get an info from an URL with jQuery but how can i remove the thing like index.html in the url? My guess would be with the htaccess?
Also, there won't be any other page but this with some design, how can I make sure someone doesn't go anywhere else but on the page that display what he wrote after the domain name?
I hope that's clear, thanks for reading and your answers !
Pierre
When creating an anchor tag and adding an href (or making a URL) I needed the URL to have a protocol (http or https), so I made a validation to add it, and then you can access the parameters of the URL easier.
Also, if you want to remove the / from the pathname you can use a .replace('/', '') when using parser.pathname
For removing index.html from the URL, you can split the path and get only the first element, or the ones you need f.e. parser.pathname.split('/')[0]
var myUrl = "www.mydomaine.com/something"
if (!myUrl.startsWith('http')) myUrl = 'http://' + myUrl;
var parser = document.createElement('a');
parser.href = myUrl;
console.log(parser.pathname);
// Other option
var theUrl = new URL(myUrl);
console.log(theUrl.pathname);
I used this as a reference.

Why is window.location.href appending url again

In my code, I'm assigning the following:
window.location.href = "www.example.com/test";
But when the page actually loads, the browser URL is www.example.com/test/www.example.com/test. I'm not appending anything to the URL, and I'm not sure how its appending the URL again.
I think you're missing the "http" or "https" part. Have you tried the following?
window.location.href = "https://www.example.com/test";
or
window.location.href = "http://www.example.com/test";
Because you forgot the protocol. If you omit the protocol, window.location.href thinks you are trying to access a folder with the name of www.example.com, relative to the page you are currently on.
window.location.href="http://www.example.com/test/" will ensure that you access the external website www.example.com.
Hope this helps! :)
Check the way you are constructing the url, sometimes we miss the host, or enter the incorrect path
A safe way to change the URl is by making changes in the exisiting URL
first get the existing URL by
let exisitingURl = window.location.href;
now manipulate this url, for eg
exisitingURL = exisitingURL.replace('/auth', '/gateway');
now go to the url by
window.location.href = existingURL;

Getting the URL from the address bar

I have an iframe on mynewwebsite.com showing content from mywebsite.com
alert(window.location.hostname);
always shows mywebsite.com, is there any way I could get the URL from the user's address bar without modifying anything on mynewwebsite.com?
I want to check the domain and load stylesheets accordingly.
Try something like this
var url = (window.location != window.parent.location) ? document.referrer: document.location;
I think window object refers to the current window -- the iframe's window object because you're calling it from the iframe.
Try
window.parent.location.hostname
But since they are two different domain names you will encounter a cross-site-scripting security (aka XSS) limitation. You have to configure your servers to allow XSS between the two domains.
Maybe this will help:
alert(window.parent.location.hostname);
alert(window.top.location.hostname);
It works in Chrome like a charm.
var URL = window.location.href;
Try
var myIframe = document.getElementById('yourIframeId');
alert(myIframe.contentWindow.location.hostname);

Get The Current Domain Name With Javascript (Not the path, etc.)

I plan on buying two domain names for the same site. Depending on which domain is used I plan on providing slightly different data on the page. Is there a way for me to detect the actual domain name that the page is loading from so that I know what to change my content to?
I've looked around for stuff like this but most of it doesn't work the way I want it to.
For instance when using
document.write(document.location)
on JSFiddle it returns
http://fiddle.jshell.net/_display/
i.e. the actual path or whatever that is.
How about:
window.location.hostname
The location object actually has a number of attributes referring to different parts of the URL
Let's suppose you have this url path:
http://localhost:4200/landing?query=1#2
So, you can serve yourself by the location values, as follow:
window.location.hash: "#2"
​
window.location.host: "localhost:4200"
​
window.location.hostname: "localhost"
​
window.location.href: "http://localhost:4200/landing?query=1#2"
​
window.location.origin: "http://localhost:4200"
​
window.location.pathname: "/landing"
​
window.location.port: "4200"
​
window.location.protocol: "http:"
window.location.search: "?query=1"
Now we can conclude you're looking for:
window.location.hostname
If you are not interested in the host name (for example www.beta.example.com) but in the domain name (for example example.com), this works for valid host names:
function getDomainName(hostName)
{
return hostName.substring(hostName.lastIndexOf(".", hostName.lastIndexOf(".") - 1) + 1);
}
function getDomain(url, subdomain) {
subdomain = subdomain || false;
url = url.replace(/(https?:\/\/)?(www.)?/i, '');
if (!subdomain) {
url = url.split('.');
url = url.slice(url.length - 2).join('.');
}
if (url.indexOf('/') !== -1) {
return url.split('/')[0];
}
return url;
}
Examples
getDomain('http://www.example.com'); // example.com
getDomain('www.example.com'); // example.com
getDomain('http://blog.example.com', true); // blog.example.com
getDomain(location.href); // ..
Previous version was getting full domain (including subdomain). Now it determines the right domain depending on preference. So that when a 2nd argument is provided as true it will include the subdomain, otherwise it returns only the 'main domain'
If you wish a full domain origin, you can use this:
document.location.origin
And if you wish to get only the domain, use can you just this:
document.location.hostname
But you have other options, take a look at the properties in:
document.location
You can get it from location object in Javascript easily:
For example URL of this page is:
http://www.stackoverflow.com/questions/11401897/get-the-current-domain-name-with-javascript-not-the-path-etc
Then we can get the exact domain with following properties of location object:
location.host = "www.stackoverflow.com"
location.protocol= "http:"
you can make the full domain with:
location.protocol + "//" + location.host
Which in this example returns http://www.stackoverflow.com
I addition of this we can get full URL and also the path with other properties of location object:
location.href= "http://www.stackoverflow.com/questions/11401897/get-the-current-domain-name-with-javascript-not-the-path-etc"
location.pathname= "questions/11401897/get-the-current-domain-name-with-javascript-not-the-path-etc"
window.location.hostname is a good start. But it includes sub-domains, which you probably want to remove. E.g. if the hostname is www.example.com, you probably want just the example.com bit.
There are, as ever, corner cases that make this fiddly, e.g. bbc.co.uk. The following regex works well for me:
let hostname = window.location.hostname;
// remove any subdomains, e.g. www.example.com -> example.com
let domain = hostname.match(/^(?:.*?\.)?([a-zA-Z0-9\-_]{3,}\.(?:\w{2,8}|\w{2,4}\.\w{2,4}))$/)[1];
console.log("domain: ", domain);
Since this question asks for domain name, not host name, a correct answer should be
window.location.hostname.split('.').slice(-2).join('.')
This works for host names like www.example.com too.
If you are only interested in the domain name and want to ignore the subdomain then you need to parse it out of host and hostname.
The following code does this:
var firstDot = window.location.hostname.indexOf('.');
var tld = ".net";
var isSubdomain = firstDot < window.location.hostname.indexOf(tld);
var domain;
if (isSubdomain) {
domain = window.location.hostname.substring(firstDot == -1 ? 0 : firstDot + 1);
}
else {
domain = window.location.hostname;
}
http://jsfiddle.net/5U366/4/
Use
document.write(document.location.hostname)​
window.location has a bunch of properties. See here for a list of them.
I figure it ought to be as simple as this:
url.split("/")[2]
If you want to get domain name in JavaScript, just use the following code:
var domain_name = document.location.hostname;
alert(domain_name);
If you need to web page URL path so you can access web URL path use this example:
var url = document.URL;
alert(url);
What about this function?
window.location.hostname.match(/\w*\.\w*$/gi)[0]
This will match only the domain name regardless if its a subdomain or a main domain
for my case the best match is window.location.origin
Combining a few answers from the above, the following works really well for me for destroying Cookies:
/**
* Utility method to obtain the domain URI:
*/
fetchDomainURI() {
if (window.location.port.length > 0) {
return window.location.hostname;
}
return `.${window.location.hostname.match(/\w*\.\w*$/gi)[0]}`;
}
Works for IP addresses with ports, e.g., 0.0.0.0:8000 etc, as well as complex domains like app.staging.example.com returning .example.com => allows for cross-domain Cookie setting and destroying.
I'm new to JavaScript, but cant you just use: document.domain ?
Example:
<p id="ourdomain"></p>
<script>
var domainstring = document.domain;
document.getElementById("ourdomain").innerHTML = (domainstring);
</script>
Output:
domain.com
or
www.domain.com
Depending on what you use on your website.
Even if the question is about the domain name, the accepted solution includes the subdomain (eg. you get blog.example.com calling location.hostname).
For future reference I suggest a one-liner to extract only the domain (eg. https://blog.example.com/index.html -> example.com) as Micheal.
location.hostname.split('.').filter(( _, i) => i < 2).join('.')
Beware! It can break when the TLD is composed of two parts (eg. .co.uk). If that's your case change 2 with 3 in the code above.
you can use this to do away with the port number.
var hostname = window.location.host;
var urlWithoutPort = `https://${hostname}`;
console.log(urlWithoutPort);
https://publicsuffix.org/list/
(https://github.com/publicsuffix/list/blob/master/public_suffix_list.dat)
is needed to correctly parse out all domains without suffixes, working with dots as in the answers above will never completely be correct. Feel free to run the above codes samples against the public suffixes dat file to realize this.
You can roll your own code based on this or use a package like https://www.npmjs.com/package/tldts
getDomainWithoutSuffix('google.com'); // returns `google`
getDomainWithoutSuffix('fr.google.com'); // returns `google`
getDomainWithoutSuffix('fr.google.google'); // returns `google`
getDomainWithoutSuffix('foo.google.co.uk'); // returns `google`
getDomainWithoutSuffix('t.co'); // returns `t`
getDomainWithoutSuffix('fr.t.co'); // returns `t`
getDomainWithoutSuffix('https://user:password#example.co.uk:8080/some/path?and&query#hash'); // returns `example`

Rewriting a URL if it 404's

first timer here so be nice :3.
I am attempting to write a jQuery function that rewrites Amazon URL's to include affiliate tags, similar to what StackExchange does but with a twist.
The main differences is that I am attempting to the user to their closest Amazon Store - e.g. amazon.de - for german visitors. Due to Amazon's ASIN's differing in some countries I first want to check the new link, if it 404's I obviously don't want to direct my visitor there [1]
Here is my code that selects links to amazon.com, grabs the ASIN number and writes a shortlink to the product including the affiliate tag.
var tld_table = {'GB' : ".co.uk",'DE' : ".de",'CN' : ".cn",'AU' : ".ca",'IT' : ".it",'FR' : ".fr",'CA' : ".ca",'JP' : ".jp",};
var country = $.cookie("CountryCode");
//$.cookie by http://plugins.jquery.com/files/jquery.cookie.js.txt
var tld = tld_table[country] || '.com';
var regex = RegExp("http://www.amazon.com/([\\w-]+/)?(dp|gp/product)/(\\w+/)?(\\w{10})");
$('a[href*="amazon.com"]').each(function(){
var url = $(this).attr('href');
m = url.match(regex);
if (m) { //if ASIN found
var ASIN = m[4];
var shorturl = "http://www.amazon"+tld+"/dp/" + ASIN + "?tag="+ affTag[tld];
//http test for 404
//if 404 do not rewrite
//else $(this).attr('href',shorturl);
}
});
This works fine and will re-write the URL's but when I introduce ajax into the equation the script fails to rewrite any URL's.
EDIT
$('a[href*="amazon.com"]').each(function(){
var url = $(this).attr('href');
m = url.match(regex);
if (m) { //if ASIN found http://www.amazon.com/dp/B003DZ1Y8Q/?tag=derp
var ASIN = m[4];
var ajaxCall = $.get('ASIN.php?ASIN='+ASIN+'&tld='+tld+'&tag='+affTags[tld], function(data) {
var newlink = data;
console.log('New Link: '+newlink)
$(this).attr('href',newlink); //does not rewrite
})
ajaxCall.success(function() {
if(newlink != '404'){
$(this).attr('href',newlink);//does not rewrite
}
})
}
});
Above is the code I am attempting to use currently, ASIN.php builds & requests the new link, opens it using php's cURL and returns either a new link or '404'.
I think $(this) is failing to reference the link correctly, but I have no idea why.
The error says it all: is not allowed by Access-Control-Allow-Origin
It basically means that your javascript is not allowed to retrieve any URL outside of your domain. You can fix this by rewriting your ajax request to a local PHP script that checks the url.
It has something to do with http://en.wikipedia.org/wiki/Same_origin_policy
you can also use apache mod_proxy
ProxyPass /mirror/foo/ http://foo.com/
Then you can call the url /mirror/foo/ on your domain and it will pass the request to the forwarding remote url.
This is a common way of overcoming cross-domain browser restrictions.
http://httpd.apache.org/docs/1.3/mod/mod_proxy.html#proxypass

Categories