We Keep Coding

Redirect from file based on referrer using JavaScript

Versions of this question have been posted numerous times, but none of the solutions I've found on this site have worked so far. I'm trying to redirect away from files, not web pages. I actually need to know if this is even possible, since I learned that PHP is incapable of doing this. Here's an answer from a previous question I asked:
The web server will first check if it exists and if it does, it will serve the file immediately. It does not go through any PHP code. Therefore you cannot write any PHP code that will intercept this request and block it.
We have a folder on our site with a path of /downloads/, containing files we don't want just anyone to download.
I want to put a script in our main JavaScript file that says:
If file is is /downloads/
If user comes from referrer allowed_domain.com, allow access to files in /downloads/
Else redirect to homepage or 404
My attempt (didn't work)
if (top.location.pathname === '/downloads/private.zip') {
if (document.referrer !== "http://www.allowed_domain.com") {
document.location.path = "/downloads/private.zip";
}
else {
document.location.path = "/404";
}
}
Constraints
I cannot use .htaccess. Our hosting provider is running Nginx, not Apache. I've tried using Nginx config code, but I have to send it to them to implement, and it didn't work and they won't help me.
And yes, I know that this is a super, super insecure solution for restricting access. My company is working on a more formal solution, but until then, I need to implement something temporary to deter users who lack the computer knowledge or motivation to get around the redirect, and this is pretty much my last option.

This problem is not solvable in JavaScript, even in the very limited and insecure way that you are proposing. The problem is that a request to /downloads/private.zip directly returns the contents of that file - it doesn't load any HTML page, so the browser will never see or execute that JavaScript code.
A way to solve this would be to have a PHP file that handles any request to that directory, checks whether the user has permission to see those files, and then returns the requested file or a 404. But for that you need some form of configuration, and you've already told us you can't do that either.
A third solution, one that is very silly but would work (for unsavvy users) in this very constrained situation would be to replace all links to the forbidden resources with a snippet of JavaScript that directs the user either to the file or a 404 page. However, from your question it seems very likely that you're trying to prevent access from users coming from sites outside of your control, in which case this won't work either.
Bottom line: This is not a solvable problem if you don't have the ability to configure your web server.

Javascript detect which host it was loaded from

I have a Javascript library I'm working on. It can be self-hosted or run from another server. The script makes a number of AJAX calls and the preferred method is making POST requests to the same host as the including page. To allow for cross-domain calls it also supports JSONP, but this limits the amount of data that can be sent (~2K to safely accommodate most modern browsers' URL length limits).
Obviously the user including the script knows where they're getting it from and could manually select JSONP as needed, but in the interest of simplifying things, I'd like to detect, within the script itself, whether the script was loaded from the same host as the page including it or not.
I'm able to grab the script element with jQuery but doing a $('script').attr('src') is only returning a relative path (e.g. "/js/my-script.js" not "http://hostname.com/js/my-script.js") even when it's being loaded from a different host.
Is this possible and if so, how would I go about it?
Thanks in advance.

Don't use JSONP, use CORS headers.
But if you really want to do JS check, use var t = $('script')[0].outerHTML.
Effect on my page:
[20:43:34.865] "<script src="http://www.google-analytics.com/ga.js" async="" type="text/javascript"></script>"

Checking location.host should do the trick.

The page at https://xyz.com/test/checkout ran insecure content from http://xyz.com/test/checkout/css/styles.css

In chrome My SSL related page got blank on other browser it works fine.
It gives the error message
"The page at https://xyz.com/test/checkout ran insecure content from http://xyz.com/test/checkout/css/styles.css"
In my website some pages are on SSL,I have only one masterpage which is used in both type of pages(http and https),I want to use my css and js which will work on both conditions.

Check any resources in the CSS file (like images and background images).
If they link to the HTTP domain see if you can rewrite them to be a relative path, so the HTTP/HTTPS switching is automatic.

It is safe (and permitted) to include CSS that is served over HTTPS in a web-page that is served over regular HTTP; so, one option is to use https://xyz.com/test/checkout/css/styles.css in all cases.
Another option, since the path seems to be the same for both versions, is to use //xyz.com/test/checkout/css/styles.css (not specifying the protocol); then the same protocol will be used for the CSS as is used for the HTML.

There are probably links in your CSS file that relate to a non-secure location.
I would suggest checking that file so you can make any updates.
Alternatively, on your server you could do a URL rewrite so anything that comes through on HTTP is re-written to HTTPS.

Using a protocol-independent absolute path is what you can leverage:
http://blog.httpwatch.com/2010/02/10/using-protocol-relative-urls-to-switch-between-http-and-https/

Location of image resources

I have a plugin that runs off my customer's websites. The plugin is at http://mycompany.com/Tool.js, and needs to pull in some images. The problem is that the javascript seems to try to pull images from the customer's site, rather than from my own site. Here is the JS:
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(/Resource/Button.png);
In the above JS, the retrieval URL is CUSTOMER.com/Resource/Button.png (the site where the plugin runs), rather than my sites mycompany.com/Resource/Button.png.
Note that I cannot use absolute paths, as they become a pain between environments (test/prod) and also because my image retrieval must use http/https based on the client environment (otherwise you can errors if http is used on an https site).

Just replace it with
background-image:url(http://mycompany.com/Resource/Button.png);

Instead of using Javascript or anything you can actually just use // before the URL in the stylesheet and it will use http or https depending on how the client came to the site. You can do the same on the HTML page when you link the stylesheet to the page. So your HTML page will be:
<link href="//mycompany.com/stylesheet" />
And in your stylesheet you can have
background-image:url(//mycompany.com/Resource/Button.png);
edit
I forgot to mention that you can do the same when attaching javascript files to the page as well.
For eg: <script type="text/javascript" src="//mycompany.com/javascript"></script>

The javascript will run in the context of where it runs, not where it is downloaded from. If the resource URL is not absolute, the domain will be assumed to be the one your browser is currently accessing.
You'll need an absolute URL. E.g. http://mycompany.com/Resource/Button.png

absolute path should be included!!
switch (window.location.protocol) {
case "http:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(http://yourcompany.com/Resource/Button.png);break;
case "https:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(https://yourcompany.com/Resource/Button.png);break;
}

Is there any way to 'simulate' right-click save-as command or force download of file in the browser with JavaScript?

I have this situation where we have media files stored on a global CDN. Our web app is hosted on it's own server and then when the media assets are needed they are called from the CDN url. Recently we had a page where the user can download file attachments, however some of the file types were opening in the browser instead of downloading (such as MP3). The only way around this was to manually specify the HTTP response to attach the file but the only way I could achieve this was to download the file from CDN to my server and then feed it back to the user, which defeats the purpose of having it on the global CDN. Instead I am wondering if there is some client side solution for this?
EDIT: Just found this somewhere, though I'm not sure if it will work right in all the browsers?
<body>
<script>
function downloadme(x){
myTempWindow = window.open(x,'','left=10000,screenX=10000');
myTempWindow.document.execCommand('SaveAs','null','download.pdf');
myTempWindow.close();
}
</script>
<a href=javascript:downloadme('/test.pdf');>Download this pdf</a>
</body>
RE-EDIT: Oh well, so much for that idea -> Does execCommand SaveAs work in Firefox?

Does your CDN allow you to specify the HTTP headers? Amazon cloudfront does, for example.

I found an easy solution to this that worked for me. Add a URL parameter to the file name. This will trick the browser into bypassing it's built in file mappings. For examaple, instead of http://mydomain.com/file.pdf , set your client side link up to point to http://mydomain.com/file.pdf? (added a question mark)