heroku does not load jquery on https - javascript

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.

Related

github pages Can't find variable: $

I just created a SPA using github pages.
It is pretty clear, as contains one .html with two .js files
I mostly use d3.js
I have no problem launching on local host, but have problems, when I deployed it on github pages
I have two errors:
Can't find variable: $
and
Failed to load resource: the server responded with a status of 404
(HTTP/2.0 404)
Although in my index.html contains jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
https://zkid18.github.io/data_visualization_project/
https://github.com/zkid18/data_visualization_project
What's wrong?
If you open up the dev tool console on that link you've shared, here's the error:
Mixed Content: The page at 'https://zkid18.github.io/data_visualization_project/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
So in this case, the solution is to just load your external resources over HTTPS, because this is what GitHub is hosted on. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If a page is loaded over HTTPS then every resource it uses should also be loaded over HTTPS.
Reason behind this is, that otherwise a man-in-the-middle could replace resources (or ones that exploit buffer overflow issues in browsers to execute code) and scripts with ones that do different things (such as leak data to the third party).
You can read more about this in this article on the Mozilla site.

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.

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

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.

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.

How to force loading dynamic, insecure content in Chrome?

I'm using Jira in https and I have some adjustments I'd like to make with some extra JS. My JS is hosted on an insecure server (no https available).
When I dynamically load the insecure JS file by inserting it into the DOM (using a browser extension), Chrome tells me:
[blocked] The page at https://jiraserver/browse ran insecure content from http://myserver/jira.js.
I can see how this is very secure and all, but I don't care. I want to load that insecure JS file. How can I tell Chrome to trust me and just do what I say?
My insertion method (in the extension code):
document.body.appendChild((function(s){s.src='http://myserver/jira.js';return s;})(document.createElement('script')));
According to this Chrome Support Q&A you can launch your Chrome with the following command line flag to prevent Chrome from checking for insecure content:
--allow-running-insecure-content
Here is some documentation on how to run Chrome with command flags
Chrome simply will not load an insecure script in a secure page.
Does your jira.js have to be loaded from a server? The best way to inject it into the page would be by including it in your extension bundle.
var s = document.createElement('script');
s.src = chrome.extension.getURL("jira.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
If you must load it from a server, I suppose your extension could make a XHR request for the script, then inject the response into the page.
// make a XHR request, then...
var s = document.createElement('script');
s.textContent = codeFromXHR;
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);
I had the same problem:
Our client link a CSS file and js file hosted in our server on a domain which is not secure.
We will solve it by using Amazon CloudFront. They server HTTPS using their certificates which is verified.
That's not a bad solution for use since CDN is often a good idea and these resources are somewhat static. (The CSS file is tailored for each client and is in fact generated but a sane TTL can be configured and the CDN flushed if required)
Note that the CDN solution may even be more affordable than actually buying a certificate depending on your data load.
I have faced the same issue and find that if we are logged in to our google account in chrome then Chrome stop loading the insecure content in https.
If we use incognito window in to load the website which has insecure content then it will work.

Categories

Resources