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

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.

Related

All CDN's blocked by Content Security Policy

I just wanted to make a simple website with Node.js, but I can't manage to get the CDN of CSS and JS files from Bootstrap without being blocked by Content Security Policy.
Here's what happens:
CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all CDN's
CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000, it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says it's being blocked by it)
I tried to put in the meta tag with the CDN's in it from here: Content Security Policy: The page's settings blocked the loading of a resource, but it didn't work and I even got more errors.
How do I fix this? I can't find any solution.
CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all cdn's
When you web page works from C://... .html it's no Content Security Policy (CSP) published therefore nothing is blocked.
CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000 it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says its being blocked by it)
When you web page works from localhost:4000 the server publishes a default CSP. NodeJS has in dependencies a Helmet middleware which publishes this default CSP header.
You can disable a middleware:
// This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
helmet({
contentSecurityPolicy: false,
})
);
or configure it to allow external CDNs, see details in helmet.contentSecurityPolicy(options) section.
Note: next time please add console messages into a question, they can be very helpful in case of CSP.
Content Security Policy works the other way around. The CDN needs to give access to your url to use their resource, not the other way around. They will have to add a header with access-control-allow-origin and then set the value of * which means anyone can use their resource files or specifically your domain url.
So most likely you have a typo in your url and that domain doesn't allow localhost to fetch their js files.

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.

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.

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.

Categories

Resources