HTTPS page displays wrong - css

I have a page that displays correctly in HTTP, but when I open it in HTTPS it seams that some CSS classes do not load propoerly.
Here it is: http://application.ninono.ca/application_iframe.php
and https://application.ninono.ca/application_iframe.php
Funny thing is that 80% of people will see no difference.
If anybody could shed some light on this, I would really appreciate it.

Your browser is probably blocking un-secure content
Some versions of recent browsers (FireFox/Chrome) will reject HTTP content when the page is served over HTTPS. This is to prevent insecure content being served alongside secure content.
So if you visit the homepage in Magento and specify https:// in the URL, all the linked resources within the page source will still be http:// - and the browser may reject loading that content to preserve security.
But if you've loaded the page once before, there's a good chance that some CSS/JS/Images may well already be in the browser cache, mitigating the requirement to fetch the resource remotely.
This can give the impression that it works on some machines and not on others. Where in reality - its not really working for anyone, its just that some users benefit from their historical browser cache.
Self-signed certificates can also produce this exact behaviour.

Related

Why does typing https:// doesn't work?

I have a website that I'm working on to pass from http to https. A month ago, I've went through all pages on the website and changed the links in the page's content using the Wordpress CMS back-end editor. When I typed https:// in the address, I could see on the console a lot of Mixed Content errors related to links on files that I don't access to, so I passed this all to the back-end guy in my company to deal with.
Today, someone pointed out that the website is still not secure and if you type https:// it will default to http://. I've tried doing this in Chrome, Firefox and Internet Explorer, and them all default back to http://. The person that pointed this problem said that, since we already have the certificate, this should be happening because some part of the website is still not secure.
How can I find where is this issue happening?
You will need to enable the secure site feature from your hosting first the "SLL", but since you mentioned it is already enabled. then you will need to use a plugin to enforce the secure website on all pages, you can try https://wordpress.org/plugins/really-simple-ssl/

WordPress with ssl form let's encrypt, but homepage not fully secure. "Attackers might be able to see images.." message

Could you help me find out what to do with not fully secure message.
I have installed ssl certificate from let's encrypt, but my wordpress homepage has a message "Attackers might be able to see the images you're looking at on this site and trick you by modifying them".
The home page is still in development, with demo content. About what images chrome notification is telling? Something to do with cookies?
Thank you for your answers!
Edit: Does it have to do with the theme itself? Whole wordpress dashboard and login is served over proper secure ssl.
Sending images via http protocol is what triggers this issue. Using any content from a cdn that does not use https will also trigger this issue. This quote explains it pretty simply (the yellow padlock / warning of unencrypted content/images):
If a yellow padlock appears with a mini yield sign, the likely cause
is links in your site still refer to an unsecured page. Make sure that
all your images, menu items and links use https in the URL.
source
I would use a tool to help identify all non-encrypted file transports. One such tool would be something like Why No Padlock.
Did you enable https after installing WordPress? If so, you must change the WordPress address and Site Address under "General Settings" in WordPress. Make sure both addresses use https.
If your WordPress site address is set to use http, your server will force https but WordPress will serve certain images, like the favicon, over http. This triggers a "mixed content" warning.
I too had run into this issue. It appears there are many http: that need to be replaced with https:
You typically do this using a plugin called Better Search and Replace. Make sure you are adding colon (:) at the end of both http and https.
I found a working answer here
To check for issues on the chrome/opera inspection console (ctrl+shift+C) is also a great idea: I had setup all correctly and the issue was the footer image, not something you would check very often looking for this fix. I had applied SSL to many websites, sometimes the issue is just one simple link and this method helps find it.
I had the same problem where the home or index page was saying the page was not fully secure "Attackers might be able to see images blah blah blah"
After enabling https in general settings under site address and wordpress address I was still getting the insecure image warning on the index or home page.
The next step was to find out what images were not using the https ref on the index or home page.
In my case I viewed the page source of the page, by right mouse clicking the page in the chrome browser & looking for images url ref which were still showing http. I was using a sliding header and those images were showing http. So all I did was go into slider header in the appearance menu of the wordpress, and re-assign each of the header slider image for each frame. RE-checked the home page now the image urls were showing https. Bingo the secure lock symbol returned.
Obviously these image urls don't get updated via the general settings... which seems an oversight by whoever wrote the part of the word-press script.

Link generates https:// protocol when link should be http://

I've got this weird problem on one of my Wordpress sites and I hope you all could help out.
I have a this Wordpress site set-up and working correct. It has a SSL certificate so the URL is https://www.example.com.
Now if I add a link to one of my pages like this http://www.example_2.com it automatically changes the link to the https:// protocol. Which I find really strange because the link is literally <a href="http://www.example_2.com">.
Does anyone know why the link becomes https:// instead of the normal http:// protocol? Because my link is now giving an error when I click on the link and get send to the linked site.
I have googled this issue but it only give me results for how to configure your site for SSL (https://) and not for the issue I'm having...
Thanks in advance.
Your site probably is configured to immediately 302-redirect http requests to https.
What happens if you hit that site directly from your browser at http://www.example_2.com/ ? does it also bounce to https?
There is some chance your example_2.com site has enabled strict transport security. Read this. https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet
A lot of people are using links of the form
href="//www.example_2.com"
instead of
href="http://www.example_2.com"
these days to avoid this sort of confusion, and avoid mixed-content complaints. You might want to consider that. It's especially useful when you pull stuff from content delivery networks.

Site SSL content issue on Firefox and IE

My site is no securing the online transactions. I found the ssl setting and turned it on, but it still does not appear to be working properly. Below are some images for IE and Firefox. Although the https is present, it does not appear to be securing the site. This is mainly issue credit card information page. How to solve this.
image below
Your page is made up of secure and insecure content. Firefox is blocking the insecure stuff.
For example, your page is served from https://www.example.com/index.html, but some of the content within it it is served from http://www.example.com/images. Firefox will block the content from the second location. That's what the message in your image says.
You should serve all your content through a secure channel. i.e. serve everything from https://www.example.com

Wordpress - Chrome not loading ajax googleapis securely -

Wordpress site in Chrome (not Firefox) is blocking jquery loading - console shows error in our recently secured (full site) over SSL.
"The page was loaded over HTTPS, but displayed insecure content from 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js': this content should also be loaded over HTTPS."
When I view it in Firefox, this same call is indeed HTTPS.
I see the call to this URL in the head section of the page source, but haven't located where this call is coming from in the code so I can change it to HTTPS. Getting generated... But where? I can't locate it.
Our WordPress Address (URL) and the Site Address (URL) are both HTTPS - all else works except for this jquery call.
I have read similar issues on this forum but don't know clear way to fix it within Wordpress or force the HTTPS... or even find what's calling it - at the limits of my knowledge about this... Thanks for any help here
Use //ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js to load the javascript, instead of adding the http or https protocol in front of the url. Modern browsers know to prepend the proper protocol when non is supplied.
That being said, since you are using WordPress, you should have one of the latest versions of jQueryUI already in the installation. You simply need to wp_enqueue_script() the ones you need. For instance, if you need draggable and sortable, you would use wp_enqueue_script('jquery-ui-draggable'); and wp_enqueue_script('jquery-ui-sortable'); respectively. WordPress is kept pretty up to date on these APIs, so offloading jQueryUI to googleapis is probably not the best of ideas, because you could incur a page load time hit by adding another domain for a browser to lookup.

Resources