I need to deal with a website that is just a page with a big frame that loads all the website content. I can't change this.
<html>
<!-- this page lives under mydomain.com -->
<head>
<title>My Beautiful Website</title>
</head>
<frameset rows="100%" border="0" frameborder="0">
<!-- website actual content is loaded from a subdir of a completely different domain -->
<frame src="http://mydifferentdomain.com/subdir" name="my-ugly-frame">
</frameset>
</html>
I need to make the referrer and query string informations of mydomain.com, available to the javascript code that runs inside the frame, so I can understand how people reach this website.
Is there a way to circumvent cross domain restrictions?
Thanks.
Is there a way to circumvent cross domain restrictions?
No. The data has to be passed explicitly.
The frameset page could include the data in the query string of the URI used to load the embedded page … but I'm guessing that this is domain hosting for the DNS server deprived and that that isn't an option.
Related
I've seen websites like YouTube and Gmail load fast. I know that Gmail is a Single Page App but YouTube is not, Is there a way to make a website that is not a SPA that can load this fast?
NOTE: I am using a static site
Here prefetching is done like this:
<link rel="prefetch" href="/your/webpage/link.html">
Place the above in the header of your page for each page you want to prefetch.
Your question is not clearly. You are must be focus what is your problem? Or what is your concern? Etc... Because to talking about page load faster, it is not mean SPA is faster to other technology. Its depending by your technical, system, application, networks, database, etc... A tons issue to reference to performance of the pages. Maybe security is impact to performance, hard disk of sever to slow to serve the service, workloads of framework, etc...
This post is pretty old now. I understand you need to use "hashtag urls" instead of direct ones. Direct ones can be shown as the address with history.pushState.
MDN:
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Example of a SPA App
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if (document.location.href == 'https://example.com/#page'){
history.pushState('', '', "https://example.com/page")
document.querySelector("body").
}
// use 301 redirects to make sure the /page url (without hashtag) goes to the one with a hashtag.
</script>
</head>
<body>
</body>
</html>
At first I didn't have any SSL certificate in my site because hosting providers didn't allow it.
So, I've transferred my domain to CloudFlare & got a SSL certificate for my site.
For a SSL certificate the contents in the site should be like <img src="**https**://www.example.com/image.png (not <img src="http://www.example.com/image.png">), otherwise it will show an issue about Mixed-Content..
So, by following the rules, I did the same thing.. But at the bottom some third-party ads were placed owned by hosting providers which contains http:// connection. So as a result I got an untrusted certificate error in the Browsers.
Hosting providers doesn't allow to edit or remove those items by paying or something else.
But CloudFlare already has a system to change all <script src="http://www.example.com/script.js"></script> into <script src="https://www.example.com/script.js"></script> automatically. But my problem is, it can't change <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png">.
Is it possible to modify <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png"> using JavaScript?? And will it be resolved if I use JavaScript??
Try using String.replace on the document HTML.
Edit: Upon more research, you might want to try using:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Instead of a JavaScript solution
document.documentElement.innerHTML = document.documentElement.innerHTML.replace("http://", "https://");
console.log(document.documentElement.innerHTML);
<html>
<head></head>
<body>
</body>
</html>
<img src="http://somethingsomething">
I am having two JSP files in my main application whereas one is MAIN.jsp and another one is CSS & JS import.jsp file.
MAIN.jsp is the main page of main application.The import.jsp file will import the CSS and JS of partner application in MAIN.jsp file which is used for support the few functionality with main application as partner.
But all the application (Main and Partner) are deployed in same server. So basically the host name of both the application will not change but context root alone will get change.
i have used jsp import tag to import the import.jsp in MAIN.jsp like mentioned below code.
MAIN.jsp
<html>
<head>
<c:import url="resourceImport/import.jsp">
</head>
<body>
</body>
</html>
import.jsp
<html>
<head>
<link url="http://hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="http://hostName/DifferentContext/sample.js" > </script>
</head>
<body>
</body>
</html>
Currently i have hard coded the partner HTTP URL in import.jsp for load all the resource in MAIN.jsp file. But moving forward we are planing to run the application in HTTP and HTTPS environment.
So how can i make it dynamic way of getting protocol in import.jsp file. I have tried following methods to get the protocol dynamically but its not working.
Method 1:
Removing Protocol and make it relative URL
<head>
<link url="//hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//hostName/DifferentContext/sample.js" > </script>
</head>
Method 2
Removing Protocol and Host name and make it relative URL
<head>
<link url="//DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//DifferentContext/sample.js" > </script>
</head>
So could you please anyone help me to get resolve this issue.
If there is anything that makes it worth to use https (and these days there is), I'd opt for less hassle and just go https everywhere.
No more worries, no accidental information leak and protocol change. Easier maintenance and no later update will inadvertently bring back a wrong protocol link.
Check HSTS as an option to force compliant browsers to not bother with any http connection attempt in the future.
That being said, relative links are another way to stay in the same protocol and probably beneficial: You rarely want to hard code domain names into your applications - Depending on the programming style that you're using in your app, you might want to use page-relative links (../DifferentContext/example.css) or server-relative (/DifferentContext/example.css). Protocol relative is fine as well, but hardcodes the domain name.
Yet another option is to make that location completely configurable. This way you can decide later (provided that you've changed all occurrences to the configured value): ${config.theOtherAppBaseUrl}/example.css. With this, you can try out all the different options yourself and within 10 minutes. And change your mind later, when you come to the conclusion that it's worth to go https everywhere.
(Note: You have an issue in your question's code: The last link refers to //DifferentContext...., which would assume that DifferentContext is a hostname - this is a protocol relative URL)
I know this is a duplicate question however my requirements are slightly different,
In a previous question this was tackled by setting:
document.domain = "yourdomain.com";
on both pages.
However... I have a www.example.com domain and I have a mail.example.com
the mail.example.com is a subdomain I have no access to, it is automatically generated by my shared hosting and its where i access my emails. However I want an iframe with mail.example.com as the source on one of my pages.
e.g.
// www.example.com/mail.php
<html>
<head>...</head>
<body>
...
<? include("header.php"); ?>
...
<iframe src="mail.example.com"></iframe>
...
</body>
</html>
This works as expected but certain styles are applied to the iframe, so i want to use javascript to remove all the styles, then add my own.
But because i dont have access to mail.example.com, i cant set document.domain = "example.com"; in the sub domain.
Is there another way round this?
EDIT
I didn't make it very clear what I had already tried.
This is my exact iframe code in my mail.php page on the www.example.com domain:
<iframe id="mail" src="http://mail.a3mediauk.co.uk/mail2/source/index.php" height="800" width="960"></iframe>
This is the javascript code thats at the very top of the head element in the mail.php page:
document.domain = "http://mail.a3mediauk.co.uk";
And this is the jquery code im trying to use to remove the style:
$(function(){
$("iframe#mail").load(function(){
$("iframe#mail body").removeAttr("bgcolor");
});
});
if its any help, the document.domain throws this error in the chrome console:
Uncaught Error: SECURITY_ERR: DOM Exception 18
You probably forgot the http://
An iFrame is client-sided (HTML) so you have to enter the absolute path because it is a different domain. What you have written would redirect to http://yourdomain.com/mail.yourdomain.com.
As far as the same origin policy is concerned, the URLs have to match exactly. It doesn't matter if one is a subdomain of the other; the strings are different, so you're violating the policy.
I don't see a good solution. If the page was simple (no or only simple JavaScript, no links, etc), you can try to fetch the mail page with JavaScript into a String, strip the header (i.e. convert the body into a div) and then add that to your main page. But of course, this would break all links, the referrer, and cause lots of other problems like, say, what happens if a new version of the mail interface is installed?
Another solution would be to install a proxy service which makes everything from mail.domain.com available as your.domain.com/mail. If you run Apache on your domain, a simple rewrite rule using the "Proxy Throughput" feature should do the trick.
Previously, Google's Friend Connect required users to upload a couple of files to their websites to enable cross domain communication and Facebook Connect still requires you to upload a single file to enabled it.
Now, Friend Connect doesn't require any file upload... I was wondering how they were able to accomplish this.
Reference:
http://www.techcrunch.com/2009/10/02/easy-does-it-google-friend-connect-one-ups-facebook-connects-install-wizard/
There are multiple methods of communicating between documents on different domains, amongst these HTML5 postMessage, NIX, FIM(hash/fragment), frameElement and by using the window.name property.
These are available on different browsers and in different versions, but collectively they allow you to do reliable XDM (cross domain messaging).
One project that have done this earlier is Apache Shindig, which probably pioneered quite a few of these, and more recently, the project easyXDM has come, unifying all of these approaches with a common API, making it easy to create complex applications using XDM and RPC.
You can read in depth about the various methods of transporting the data in this article at Script Junkie.
Now, to answer your question directly, earlier on it was quite common to believe that there was only postMessage, the FIM (Fragment Identifier Messaging) available, and for the latter to work efficiently, one often had to upload a special file to your domain. As more methods have been discovered, this has by many been deprecated as a technique, and hence; no more need for the file.
Just for the record; I'm the author of both the Script Junkie article, and the easyXDM library (that is what Twitter, Disqus and quite a few more are using by the way).
<edit>It's difficult to remember/verify now, but I believe my answer here was probably incorrect. Sean Kinsey's answer above should be the definitive answer to this question. If you're reading this, please upvote his answer and ignore mine.</edit>
The Google Friend Connect widget works like most ads/gadgets do, using a copy/pasted snippet of HTML to reference a JavaScript include on the host's server which then creates an iframe containing the desired content. By opening the iframe with your site ID in the URL, Google's server is able to generate the appropriate HTML document to represent a Friend Connect gadget for your particular site/settings.
There isn't any cross-site communication happening beyond that initial step of creating an iframe with the appropriate URL target. Everything inside the gadget's dynamically generated iframe is more like the user visited a separate page on Google's server, but what would have been displayed is then embedded/isolated in a block on your page instead.
I'm not sure how it works in this particular instance but cross-domain messaging can be accomplished either by the postMessage() API or by changing the hash part of the URL and monitoring that.
The hash change method works because both the enclosing and the enclosed pages have access to the enclosed page's URL.
Of course, hopefully the postMessage() API call becomes more standard over time.
JSON allows cross-domain javascript.
Due to browser security restrictions,
most "Ajax" requests are subject to
the same origin policy; the request
can not successfully retrieve data
from a different domain, subdomain,
or protocol.
Script and JSONP
requests are not subject to the same
origin policy restrictions.
There is no other method than using the somewindow.postMessage(); for communication between cross-domain iframes.
Before somewindow.postMessage() you had to upload file in order to ensure that you can establish communication between iframes.
example:
<html>
<!-- this is main domain www.example.com -->
<head>
</head>
<body>
<iframe src="http://www.exampleotherdomain.com/">
<script>
function sendMsg(a) {
var f = document.createElement('iframe'),
k = document.getElementById('ifr');
f.setAttribute('src', 'http://www.example.com/xdreciver.html#myValueisSent');
k.appendChild(f);
k.removeChild(f);
}
</script>
<div id="ifr"></div>
</iframe>
</body>
</html>
now the http://www.example.com/xdreciver.html html content :
<html>
<!-- this is http://www.example.com/xdreciver.html -->
<head>
<script>
function getMsg() {
return window.location.hash;
}
</script>
</head>
<body onload="var msg = getMsg(); alert(msg);">
</body>
</html>
As for using the .postMessage(); its enough to use top.postMessage('my message to other domain document, which is also the main document', 'http://www.theotherdomain.com');