Location of image resources - javascript

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;
}

Related

css stylesheet not getting added

I load any web page. Then open firebug console and run the below javascript, which creates a link element in the head of the page. the code is below.
var s = document.createElement('link');
s.setAttribute('href', 'file:///home/simha/.public_html/new1.css');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
the content of the file:///home/simha/.public_html/new1.css
body { background-color: #0000ee !important; }
I run the code in the firebug console and the following appears in the head of the html
<link type="text/css" rel="stylesheet" href="file:///home/simha/.public_html/new1.css">
But there no change in the background color (change to blue) of the body.
I checked the css rule independently from editing the css in firebug, the background color changes to blue.
I have apache web server installed. So i also tried instead of "file:///home/simha/.public_html/new1.css" to "localhost/~simha/new1.css" still it does not work.
I am using firefox browser.
That's because for security reasons external resources can be loaded from a local URI scheme (like file:) only if the document has been loaded from a local URI too.
Try this,
s.setAttribute('href', 'new1.css');
Your stylesheet named new1.css needs to be referenced in relation to the server's document root.
So you're using Apache, which means you setup the apache2.conf (or httpd.conf, etc) as well as the site conf file(s). The path you used in this config for DocumentRoot will be the reference point. From there you simply put /path/to/new1.css.
So in your case,
file:///home/simha/.public_html/new1.css
will translate to
/new1.css
So your final code will be
<link type="text/css" rel="stylesheet" href="/new1.css">
When you put file:/// prefixing an address, it's not using the server filesystem to load the file, it's using the client/user. This is due to the blank string where the hostname should be - file://_BLANKHOSTNAME_/. Here's more info if you're curious.
For your localhost/new1.css to work, it needs to be prefixed with http:// like this:
href="http://localhost/new1.css"
Otherwise it's interpreting localhost as if it were a directory name and not the hostname.
I think the problem is with file: or localhost in firefox, I saved the file in dropbox and used that link it worked.
var s = document.createElement('link');
s.setAttribute('href', 'https://dl-web.dropbox.com/get/new1.css?w=AACLoomOT900PfGVqEuu9rHP4NlewdOq0KaSZbhzmgyG1A&dl=1');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
But is there any setting in the linux for apache and file to make it work locally.
One possible problem might be the path you have
file:///home/simha/.public_html/new1.css
When you allow per user directories in Apache, it is usually public_html without a leading dot. So, when you rename the directory to /home/simha/public_html, http://localhost/~simha/new1.css should work as expected.
Your code works as is, at least when you use an absolute URL
<button type="button" class="btn btn-info">Info</button>
In the Javascript, I replaced your CSS with the publicly accessible Bootstrap CSS
s.setAttribute('href', 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
everything else is left as is, see JSFiddle
As you can see, the button is coloured like the Info button in the docs at Bootstrap - Buttons.
If you did not solve this problem yet,
Serve all static content from a (http) server of your choice. Do not use file system paths. Firefox wont load them ( in a web page context )
Try to put all the static resources along with your
html, and serve them with relative url.
Now try this thing. open view source, and check if the css path is clickable and is fetching the content according to your expectation. If not, directly access that file from address bar of the browser. (Make sure your localhost is running and you have put all your files related to this in the web server - I normally use /var/www/). Use the path that works like this in your html too. (no file:// protocol, remember).
If you are not success by these, WWJD.
Also tell us when you are successful.

JavaScript = "js"? Is this valid?

I inherited a website, I'm trying to serve its content over https, but when I do so I get an error that this "content" is being delivered insecurely. The certificate and all that good stuff is set up correctly.
<script type="text/javascript" src="https://domain.com/?dynamic=js"></script>
This doesn't seem to actually reference a file. I've googled but can't find anything to lead me in the right direction. Can anyone provide some insight, or better yet explain why this leads to the security problem?
Yes, it is valid so long as https://domain.com/?dynamic=js generates a javascript file. See this page for more info on dynamic files:
http://www.dynamicdrive.com/forums/showthread.php?21617-Dynamic-external-js-scripts-and-css-stylesheets-with-PHP
If you are running under secure connection (https) then all the resources in your domain have to be also serving via https - like images etc...
check to see if some image is using http: and not https
There's no problem with the script-tag. You don't actually need a .js-extension for it to be valid, as long as it returns JavaScript the browser will be happy.
Also, this line has nothing to do with the HTTPS-error you're getting. You should make sure that ALL the content linked on that page is delivered through HTTPS
Make sure ALL of the assets on the page are served up with relative paths. Images. css. scripts, etc.. Then they will load no matter if you are on https or not.
Relative = "/images/test.jpg" instead of "http://test.com/images/test.jpg"
Also can do Protocol relative url : "//test.com/images/test.jpg" (Thanks to commenter)

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/

js, img and link tag of src with an addition query parameter

For example,
<link rel="stylesheet" type="text/css" href="http://cdn.sstatic.net/stackoverflow/all.css?v=6fc726be6344">
This link tag of href with a query parameter
v=6fc726be6344
And I notice img and javascript tag also has this usage.
I want to know what's the meaning of this parameter?
The usage scenario and how to use it?
It's to prevent the browser cache from storing those files. By adding a new query parameter (presuming the value of v changes on refresh) the browser thinks it's a new file and downloads it instead of reading from its cache.
Further reading:
http://davidwalsh.name/prevent-cache
Are the .js files being cached?
Prevent javascript from being cached in browser
It is probably just a version number that the server pays no attention to, but makes the URI unique for that version of the file that rarely has content changes. This allows very agressive cache control rules to be used for the file so browsers won't re-request it. When the file does change, the version number is changed and the browser ignores all previous cache rules (because the URI is different and cache rules only apply to the URI they are associated with).
However, it is just a piece of query string data, so it could be used for whatever purpose the author desires on the server and nobody without access to the server side code can see what that purpose is.

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)

Categories