How can I host my CSS/JS on an HTTPS server - javascript

I am facing problems with loading my custom CSS in Chrome. I'm using Joomla Artforms.
Here are few Javascript console statements from chrome:
[blocked] The page at 'https://www.mysite.com/component/artforms/?formid=200' was loaded over HTTPS, but ran insecure content from 'http:// www.mysite.com/includes/js/jscalendar-1.0/calendar_stripped.js': this content should also be loaded over HTTPS.
[blocked] The page at 'https:// www.mysite.com/component/artforms/?formid=200' was loaded over HTTPS, but ran insecure content from 'http: //www.mysite.com/modules/mod_followme/style.css': this content should also be loaded over HTTPS.
Please let me know if you need more detail.
Thanks

Simplest way to get this right is to load external files using the URL syntax
//example.com/path/to/some/file.js (remote)
or
/path/to/some/file.js (local)
This will load your resource using the same protocol (HTTP or HTTPS) as your main HTML page.
Note though that this will only work if your external resource is available over HTTPS. If it isn't then there's nothing you can do except move the external resource somewhere that does support HTTPS.

Related

ckeditor error when change http to https website

when I open dev tools It show
Mixed Content: The page at 'PATH' was loaded over HTTPS, but requested an insecure script 'PATH/ckeditor.js'. This request has been blocked; the content must be served over HTTPS.
How can i fix this
Add the proper path to this file PATH/ckeditor.js like HTTPS://DOMAIN/ckeditor.js
In short for the secure domain you need to add the path of the secure domain(CSS, js), so everytime before you switch to HTTPS, you'll need to update all of the internal links in your website.

heroku does not load jquery on https

i have an app deployed to heroku and i request the jquery to be loaded
<script src="//www.highcharts.com/lib/jquery-1.7.2.js" type="text/javascript"></script>
in order to use highcharts. But when running my app on http the charts are not loaded,whereas when running the app on http the charts are loaded.
the message when running on https is:
"but requested an insecure script 'http://www.highcharts.com/lib/jquery-1.7.2.js'. This request has been blocked; the content must be served over HTTPS."
how can i safely load jquery?
www.highcharts.com doesn't seem to support HTTPS, so you'll need to load jQuery from somewhere else.
Try one of the options here: http://code.jquery.com/. Or you could download the copy of jQuery you're using and just include it in your app.
EDIT
Further explanation: when you load https://www.highcharts.com/lib/jquery-1.7.2.js (you can try it in the browser), you get redirected to http://www.highcharts.com/lib/jquery-1.7.2.js. So the browser is ultimately loading the script from an HTTP source. You need to load from an HTTPS source.

How to solve "Mixed content"-issue on Google-Chrome Console

I have an issue where the following is being displayed:
Mixed Content: The page at 'https://www.feelhome.se/produkt/fighting-elephants/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200'. This request has been blocked; the content must be served over HTTPS.
Does anyone have an idea on how I can solve this so it won't appear?
The problems is that the you are loading the fonts using http instead of https if you change the font url to use https you'll be ok.
So you need
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200
instead of
http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200
The fonts seam to be loaded from the template.css and bootstrap.css files. Have a look at the attached image.
A secure page only has https resources (like stylesheets or images). When one or more resources are loaded via http, the security might be comprimised. That is the warning you're getting, you have some http resourcce on a https page.
Some have suggested placing https://example.com in front of everything, I'm going to suggest something else: //example.com, note the lack of https and http. The browser will now add https automatically.
The benefit here is that when you have to switch between the two, you're done with the minimal amount of work. Say you have a site which is allready build and running, and after a time decides to go https... All you have to do is change your htaccess and done, all your resources are prepared.
The content you have could be insecure, so you need to load it with
https instead of http.

Cross domain access issue with http://whateverorigin.org/

Hi I have used the http://whateverorigin.org/ origin to get content from other domain and display it on my domain.
The issue is my page uses https:// but (http://whateverorigin.org/) supports only http://.
If I change the url to https://whateverorigin.org/ the iFrame never loads the content.
So how do I overcome this problem, Any suggestions are greatly appreciated.
The code:
var url = 'https://www.otherdomain.com/001003227.htm';
$.getJSON('https://whateverorigin.org/get?url=' +
encodeURIComponent(url) + '&callback=?', function(data){
DO NOT DO IT. Http Content within a HTTPS page is inherently insecure. Point. This is why IE shows a warning. Getting rid of the warning is a stupid hogwash approach.
Instead, a HTTPS page should only have HTTPS content. Make sure the content can be loaded via HTTPS, too, and reference it via https if the page is loaded via https. For external content this will mean loading and caching the elements locally so that they are available via https - sure. No way around that, sadly.
According to an issue on GitHub you can do the following:
I recommend using the following path if HTTPS is an requirement:
https://whateverorigin.herokuapp.com/get?url=...
Trying to access the main page with HTTPS will not work due to how the certificate is setup.
I've tested this on my own site and it works.

AJAX Blocked from chrome extension content_script

i'm writing a chrome extension that use a content_script.
the content script use XMLHttpRequest to send information about the page to my server, and base on that information the server respond with somethings that has to be done.
everything works well on http pages, but fail on http*s*.
The error i get is:
[blocked] The page at '==https page==' was loaded over HTTPS, but ran insecure content from '===myserver - http===': this content should also be loaded over HTTPS.
If i will use https on my server will it work? even though it's a different domain? is there any way to do it without using ssl on my server?
Thanks.
Yes, you can only call https content from an https page. See these for help on mixed content issue :
https://support.google.com/chrome/answer/1342714?hl=en
http://kb.iu.edu/data/bdny.html
You can test your extension with mixed content by enabling it explicitly as instructed at:
http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Google+Chrome
If you enable SSL/https on your web-server this will solve the issue for your users also. A cheaper and easier way to enable SSL on your server almost instantly would be to use Cloudflare.

Categories

Resources