If I move a website to https so that it loads all resources (css, js, images, ...) via https, the browser will not pop any warning (I hope).
However, what if the content of my site is partially created by another users who may have already added links, e.g. <a href=http://anothersite.com>", that target websites without https. In such case, will the browser warn about mixed content?
And what about images, e.g. <img src=http://anothersite.com/img.jpg>"?
Thanks!
A link will not trigger mixed-content:
The content of that link is not displayed on your page, it doesn't modify the appearance or the functionalities of your page, so no reason to display a mixed-content warning.
(But if a secure version of that website is available, it's better to link directly to it, to avoid an insecure redirect)
But http images included in your https pages will trigger mixed-content warnings
What you cant do to prevent it partially, it using HSTS and https://www.w3.org/TR/upgrade-insecure-requests/
Related
I use WordPress, and I bought a theme from ThemeForest. Everything is great, but when I installed SSL I get insecure connection on my homepage.
Mixed Content: The page at 'https://freindly-flowers.com/' was loaded over HTTPS, but requested an insecure image 'http://freindly-flowers.com/wp-content/uploads/2018/11/logo-watermark.png?id=6521'. This content should also be served over HTTPS.
(index):1 Mixed Content: The page at 'https://freindly-flowers.com/' was loaded over HTTPS, but requested an insecure image 'http://freindly-flowers.com/wp-content/uploads/2017/12/testimonials.jpg?id=7079'. This content should also be served over HTTPS.
I have tried searching for those images in FTP, but they are not anywhere in FTP. What can I do and how can it show mixed content for images that are not even on the website?
The images are there - http://freindly-flowers.com/wp-content/uploads/2017/12/testimonials.jpg loaded for me. The problem is that your code is including http: without the s.
Navigate to that page and then right click somewhere and select "view Source" to see the source code. Search for http: in the source and you'll find all of the insecure requests. You may have hardcoded some image sources or copied database entries without updating urls, I really don't know, but using relative urls is one way to avoid this issue.
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.
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.
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.
When the chrome the developer tool on some of my web pages I get this warning
"The page at https://www.improvementskills.org/wordpress/whats-going-on-2/ displayed insecure content from http://abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png.
www.improvementskills.org/wordpress/whats-going-on-2/:1"
I'm guessing this is because the image urls have http rather https. Whenever I upload new images in wordpress it gives it http as well. How do I go about fixing this? Thanks!
Update: The technique in my comment below is now an anti-pattern! Always use https. http://www.paulirish.com/2010/the-protocol-relative-url/
If you can edit your website's img tags, then remove "http:" from the src.
Bad
http://abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png
Good
//abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png
This way, the browser will call the image with https when needed, and http otherwise.