ckeditor error when change http to https website - javascript

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.

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.

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.

Javascript/JQuery event for Chrome blocking insecure content

If a page is served over https but the associated files are served from a non-secure http website, Chrome will throw the “insecure content” warning. Is there an event/property that I could be using to know when Chrome has blocked an unsecure content and also know if the user allowed the insecure content. A shield appears at the right of the adress bar when Chrome loads "insecure content" and the user has the possibility to click on this shield and still run the script. Is there any event for this?
Thank you.
The only way I can think to do this would be to serve a file over non-https, that would include a function to run if they allow non-secure content.
This script will obviously only be included if they've allowed the non-secure content to be loaded, and therefore works as your event check. You can therefore also check if these haven't been allowed by storing a global variable in the non-secure file & checking for it in a secure JS file (or within the document).
Obviously, if you're serving content via SSL, you should really ensure all of your content included is also over SSL.

Categories

Resources