See what content is not sent over HTTPS - javascript

I created a page that is HTTPS only.
On my browsers, I always get a warning that the page includes resources that are not secured. I just can't find out why!
Looking at the source code seems fine. All img src and javascript tags are using relative path (/images/...).
It does not consider href links as resources does it?
Is there a way to know what actually is the source of that problem?

I guess you could use the Net tab of Firebug to see that.
(source: ibm.com)

Try capturing all your traffic using Fiddler - it will help you identify any extraneous HTTP calls easily.

It's unlikely to be a hyperlink, but could it be a stylesheet? They're linked using the href attribute as well:
<link rel="stylesheet" href="...">
Also, how about stylesheets/Javascript that import other resources (other stylesheets, Ajax libraries, etc.)?
Edit: the image at https://www.makemeheal.com/classifieds/images/1.0/dline_hmpmid1px.gif seems to be redirecting to a non-https version of its URL; the other images are under https://www.makemeheal.com/images/ which doesn't do that. Looks like a webserver config issue?

The easiest way is usually to look through the source (with the Find utility in your editor) for http:.
It is often part of some code that calls some Flash.

I guess you include some content that links to http. Try a search in the source on http://, ftp:// or anything alike.
Also take a look at forms. Forms can also post to http by accident.
Is it possible to put the website online somewhere so we can take a look?
Perhaps you include a style sheet that refers to some image which is without ssl, or you reference some js which in turn references some other content over http?

Do you have any background images in your CSS that are referenced absolutely? Also, what about any iframe tags on the page with the src attribute set to an unsecure page?

+1 for using Fiddler.
One very quick check you can make is to only get the HTTPS content when prompted, and then see what is missing from your page once it is loaded. If is is a resource file, or a css file, or some javascript, or an image, then you will spot that virtually straight away.

Related

Paths in Dynamic Page Replacing Content

For dynamic page changes without having to reload the whole content, I have found this very simple working solution:
Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/
Demo: sudojesse.github.io/dynamic-page/
However, this solution only works if you're linking to something like "sitename.html". Is it possible to do the same with folder paths?
Example:
Like it is above:
[sudojesse.github.io/dynamic-page/about.html][1]
Like I want it:
[sudojesse.github.io/dynamic-page/more/about/][2]
I have tried it but it doesn't really work!
http://sudojesse.github.io/dynamic-page/about.html
http://sudojesse.github.io/dynamic-page/more/about/
If you want it to work, you would have to rename the file to "index".
The reason for this is because the Web server looks after a specific resource when the client requests a directory. This resource is often by default set to "index"(dot)"something".

What does the "?" sign mean in a request for a static JS file?

I've seen that a lot and I just don't know what it means. This, for example:
<script src="http://server.com/file.js?y=2345678" type="text/javascript"></script>
If it is in deed possible to 'catch' the value of 'y' in the javascript file, how would that be?
Thank you.
PS. I know what mod_rewrite is and that is not the answer, just in case :)
This is to force the browser not to cache the file, by making it believe that it is a dynamic file with get parameter rather than a static one.
This is often used to facilitate caching of the JS file. You set a far-future Expires header which means the browser may cache it for a very long time. If you change something in the file you also update the number in the querystring, which will make the browser refetch the file. This works because caching is for unique filenames and the querystring is part of the filename (as far as the browser is concerned).
A similar approach to this is to use rewrite rules in the web server to have some part of the file name which it doesnät care about. Here's a Nginx rule to show what I mean:
rewrite ^/style\..*\.css$ /style.css;
I use this rule to have filenames like style.42750cad6.css, which always points to the file style.css. The text in the middle is changed whenever I change style.css. The difference between the first approach is that this does not use the querystring so the caching will work in more browsers.
ok the way i see it in two ways.
it can be used to load js without caching
for every request to the server, the server might log information(if logging is enabled), if i am using it for analytics i can therefore use a different parameter for locations and from the log i can analyse and get required details.

Force a script refresh using the "yepnope" JavaScript script loader

Using yepnope.js. I need to "refresh" the script, but yepnope prevents files with the same url from being re-loaded.
In the documentation, they suggest using a plugin to allow files to refresh. Is there such a plugin available? What are my other options for refreshing a script during runtime in Javascript?
I tried appending a random number as a query argument to the url. That worked, but made it much more difficult to set breakpoints while debugging, so I'd rather not do this.
Any suggestions? Thanks!
IMHO it is not possible do that using any yepnope method.
I think you only has two possibilities:
Adding a random parameter to the querystring (your current solution)
Changing the yepnope script to:
expose the scriptCache yepnope var
reset the scriptCache[url]
and finally remove the created DOM img node that has your url as src.
In addition set the cache headers to expired, to prevent browser cache.
good luck

Ajax & Link Degradation

I load in HTML pages via Ajax. These files have no <title><head><body> tags, etc. Just a few divs inside them.
At the moment, I place links to these ajax pages in my href for browsers with JS disabled:
Honda
The javascript has return false so the user is never taken to that page physically if their browser supports javascript.
My concern is people potentially right-clicking and sending these links to other people. Which would look bad since it is unstyled, etc. I'm tempted to remove the href link because of this.
Are there alternatives to obfuscating the links? It goes against my ideals on best practices to remove the link entirely from the href.
It goes against my ideals on best practices to remove the link entirely from the href.
I strive to follow best practices as well, but what you're doing is actually worse than not including an href at all.
The href attribute should only be used for URLs that users can visit directly. Using it to hold a URL for Ajax use is common (Stack Overflow does it), but it's a misuse of the href attribute.
If possible, href should point to a full page which contains the content that would be loaded by Ajax. If you can't provide that then either remove href or set it to something like "#".
You don't need to obfuscate it and I also don't think you need to remove it. If you are using a server side language you can check for the
X-Requested-With: XMLHttpRequest
HTTP Header in each page. If it isn't set it has not been requested with Ajax. Then you can redirect the user to the right page.
One solution that would work well, but includes some work, would be to create degradation pages for the content. You could create copies of the pages that were complete HTML documents, and use their URL in the links, e.g.:
Honda
When you fetch the content using AJAX, you would replace the view in the URL with ajax.
This way the pages will also be indexed by web crawlers.
Maybe you could use the data tag to store/retrieve your value in a div with a mocklink style. FIDDLE
Something like this.
<div class="mockLink" data-link="/test/link/honda.html">Honda</div>
CSS
div.mockLink{color:blue; text-decoration:underline}
div.mockLink:hover{cursor:pointer;}
JS
$('div.mockLink').click(function(){
alert($(this).data('link')) ;
//do AJAX
});

Wordpress and javascript .load() function

I have problem to get .load() function working in Wordpress. Initially I was using 3.0.5 version of WP, wanted to get some content from external page (same domain), so I used this code
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".someclass").load("http://www.mydomain.com #someid");
});
...and it worked. However, after update of Wordpress to latest version (and installation of plugins /some use jquery or mootools/, this piece of code isnt pulling any content anymore. I tried to write different code for noConflict mode but also without success (but JS is working if I change line to some alert func). I also deactivated all plugins, removed other js (like for menu), but still no content was displayed. If I use same code in a separate file (in the same directory where WP theme is) - it works.
I would be thankful if someone have advice what to try next or where to look for potential problem. Or maybe to suggest some other approach how to get content from external page (and specific div). If I put that separate file into iframe and call it within sidebar, it's working but then there's a problem of iframe links opening within iframe box.
Your problem is the same origin policy, which in lamens terms means you can't do ajax requests to different domains (even subdomains) as it is security risk, you browser simply won't let you do it. Specifically in your case you are attempting to load www.infostar.rs from inforstar.rs.
You will need to come up with another idea, personally I would just do it in PHP with:
echo file_get_contents('http://domain.com');
Alternatively would could look into forcing non-www in htaccess.

Categories