After setting up the Wordpress blog, the editor configured his own domain name to the Wordpress blog he set up. When configuring Nginx at that time, he found that when configuring HTTP, the website could be accessed normally and the layout would not be messy.However, when I matched it with Https protocol, I found that the website was accessible, but the whole layout of the website was messy. When I used F12 to check the status, I found that many js files could not be loaded successfully, which led to the typographical disorder.Want to ask everybody who has encountered this kind of problem, and how to solve?Thank you!
Your browser is blocking mixed content, i.e. content served from HTTP sources to a HTTPS website. Most modern browsers do this by default for security purposes.
Here is an explanation from the Mozilla docs: "If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default."
To fix the error, just make sure all of the css and javascript files you are including from external domains are using the HTTPS protocol in the src attribute.
Related
I am using Cloudflare and pointing DNS to my website (000webhostapp using Wordpress). but CSS format is not working in my site. Whereas I use default DNS from web hosting or my DNS(not through Cloudflare), it works properly. please help me! thanks
Most likely mixed content error.
Mixed content is when your site is loading over HTTPS, however your code have references to images, scripts or css resources over HTTP so the browser blocks it from being loaded.
Please review the console logs in your browser's developer tools to verify this.
Cloudflare have an excellent guide on Troubleshooting mixed content errors
.
Enabling "Automatic HTTPS Rewrites" feature in your Crypto tab of your Cloudflare dashboard usually prove to be an easy fix.
Im having issues when accessing certain pages with the "www." in the URL.
I have an online form for users to fill out although when accessed using the www. infront of the URL, errors show in the form & certain icons will not show and out coupons will not work properly.
Inspecting through google chrome > console this error has shown:
Access to font at 'https://adventurethon.com.au/wp-content/plugins/WP_Estimation_Form/assets/fonts/fa-solid-900.ttf' from origin 'https://www.adventurethon.com.au' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Functioning URL (with no www.): https://adventurethon.com.au/east-gippsland-registration/
Incorrect functioning URL (with www.): https://www.adventurethon.com.au/east-gippsland-registration/
Is there a way to make sure that users are always redirected to the correct URL so these errors don't show? Or we will continue to have on-going errors when users are trying to sign up.
I am a web designer, still a bit new at the whole development side of things so easy to follow instructions would be much appreciated!
I have been in contact with plugin support as we thought it was a plugin issue although it was not. I also contacted hosting support although they are not willing to assist in fixing the issue.
Thank you!
Beck
CORS (Cross-Origin Resource Sharing) stops other origins from being able to use your assets.
The www and non-www versions of your website are two different origins (domains) and the www version is trying to access files from the non-www version, which is being disallowed by your server.
There's a few ways you could proceed:
Redirect all traffic to one version; Apache .htaccess example
Adjust the CORS policy - you can do this using .htaccess or your server config files. This is a potential security threat.
Adjust your urls to reference the domain being visited. Presuming you're using WordPress, as tagged, this might be slightly difficult if you're using helper functions such as home_url() or template_directory_uri() as these always point to the url in your WordPress settings. You could also use an absolute-path reference (/wp-content/themes/freestyle/assets/css/elegant-icons/fonts/ElegantIcons.ttf instead of https://adventurethon.com.au/wp-content/themes/freestyle/assets/css/elegant-icons/fonts/ElegantIcons.ttf) if you have access to change this.
Your best bet would be the first option! You really shouldn't have two versions of the site accessible anyway as it counts as duplicate content for search engine bots, and WordPress isn't really configured to work on two domains.
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/
Hi i have a question about importing a wordpress.com site to a new self hosting wordpress site.
After completing the website i still have the old https links in search results showing broken css pages: example here. https://the3growbags.com/author/rhamscallion/
The new website does not use an SSL certificate and adding one does not solve the problem, anyhow we don't need SSL. This is the non-SSL website example: http://the3growbags.com/
Question is why are the old https links showing these broken CSS pages instead of unsecured connection pages, and how do I remove them from search results? help much appreciated.
All your resources are linked using http:// URLs, which result in mixed content which is normally blocked by browsers.
Make sure your resources are loaded using https and your site will work.
For this you could use the protocol agnostic URL style: "//domain.com/path"
I want to apply HTTPS on some selected pages of my website.
I tried doing that using .htaccess file but after that my site is not getting loaded properly. After HTTPS, my site is looking like it does not have CSS. Please help.
The problem here will be because of the way browsers block traffic from non-secure domains.
When you use the full URL for your content e.g. images, css, scripts. if you transfer to a secure domain e.g. https:// then anything using a http:// prefix will not be allowed as it will not have been transferred securely.
So, what you need to do here is to use relative paths when including your content. So instead of using http://www.domain.com/cssfile.css you would instead use /cssfile.css. So if your site IS using http:// then the content will be transferred using that protocol, but when you switch to the login page for instance which uses https:// the content will still get delivered, but instead using the secure protocol.