I noticed when accessing a site using HTTPS I get errors in the JS console when trying to include CSS or JS files from a relative path such as this:
<link rel="stylesheet" type="text/css" href="css/demo.css?id=14" />
Mixed Content: The page at 'https://mysiste.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://mysiste.com/css/demo.css?id=14'. This request has been blocked; the content must be served over HTTPS.
What's the ideal solution for this scenarios?
Should I just force all the HTTP accesses to be redirected to HTTPS?
Or is there a way to tell the server to serve all relative paths using HTTPS?
Relative links will use the protocol and host from the base URL. The base URL is usually the one which can be seen in the URL bar. But it is possible to change the base URL explicitly using the base tag.
This means if you have a base URL with http as protocol set in your page it will still use http instead of https even though you've accessed the site with https and the reference is relative, i.e. like this:
<base href="http://example.com/">
To fix it either remove the base tag or change it to use https instead of http:
<base href="https://example.com">
Related
I'm hosting my git-hub pages website (peps09791.github.io) using a custom domain (https://thebotspeaks.com) with Cloudflare.
To enable HTTPS, I have done the following configurations:
In my _config.yaml file
I have set the URL key accordingly
url: "https://peps0791.github.io"
From my cloudFlare dashboard, I have enabled option of HTTPS rewrites to prevent mixed content error.
I have also enabled Flexible SSL from CloudFlare.
I haven't enabled default HTTPS-redirection because the website breaks over HTTPS. On HTTP, it works fine.
Right now, when I try to access my website using HTTPS, I get mixed content error:
Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure image 'http://thebotspeaks.com/assets/images/bio-photo.jpg'. This content should also be served over HTTPS.
09:54:45.323 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://thebotspeaks.com/assets/css/main.css'. This request has been blocked; the content must be served over HTTPS.
09:54:45.785 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure script 'http://thebotspeaks.com/assets/js/main.min.js'. This request has been blocked; the content must be served over HTTPS.
From console, I can see this:
<script src="https://peps0791.github.io/assets/js/main.min.js"></script>
<link rel="stylesheet" href="https://peps0791.github.io/assets/css/main.css">
How do I resolve this issue?
The problem here is that your assets (i.e. your CSS or JavaScript) are redirecting to the HTTP version of your site. This is because your assets are referencing directly to your GitHub site instead of the Cloudflare-enabled domain.
For example; your HTML references your CSS files at https://peps0791.github.io/assets/css/main.css instead of https://thebotspeaks.com/assets/css/main.css
In order to fix this it looks like you'll need to update your _config.yaml file to have the following URL key:
url: "https://thebotspeaks.com"
More general advice on fixing a variety of Mixed Content issues can be found in the following article on the Cloudflare Knowledge Base: How do I fix the SSL Mixed Content Error Message?
Adding this helped me to deal with the Mixed Content error on GitHub pages on a custom domain secured with enabled HTTPS:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Apparently for me. The website inside CNAME file in Github repo did NOT had https prefix. So I added https://. and it worked.
Cheers
P.S: Fixed this problem after 1 year, can you believe.
I'm using an app (MediaCP) that thinks both HTTP and HTTPS can coexist on the same port. I cannot modify the code since it uses IonCube and some other shenanigans, but I could edit the JS player, or add files if needed. Since it's minified it's hard to know where to look for, I'm attaching it if you want to take a look at it: https://pastebin.com/DiCnMq32
The thing is that when I request a .js file while being on an HTTP page, it tries to load the content using HTTP, probably because it uses /// as a request protocol...
If entering https://mywebsite.com, then the jwplayer.js file loads https://example.com:2000/jwplayer.flash.swf and works just fine
If entering http://mywebsite.com, then the jwplayer.js file tries to load http://example.com:2000/jwplayer.flash.swf and it fails with a 400 error since the server obviously expected an HTTPS handshake. It doesn't matter that jwplayer.js was loaded using https.
I've been using ErrorDocument 400 to redirect these requests to HTTPS but the REQUEST_URI is lost on the process...
ErrorDocument 400 https://example.com:2000
This work just fine for users trying to login, but when entering http://example.com:2000/jwplayer.flash.swf it will always redirect to https://example.com:2000 and the JS code won't work.
I cannot use the REDIRECT_ server variables, because of the https:// prefix, that makes Apache think that the redirect is going to a remote server and by default it won't sent those headers.
I cannot remove the https://example.com:2000 prefix to use a local php / cgi file since it causes an infinite loop (oh, https is wrong lets try to load the 400 error page, oh https is wrong, lets...). Perhaps using a ScriptAlias would override the HTTPS check? I haven't got any luck with it but I'll try if you think it will make it work.
I've also tried to add %{REQUEST_URI} to the ErrorDocument line but it seems the variable is always empty.
Any ideas?
PS: I´m using Apache 2.4.25 on CentOS 7
Try to reference the JavaScript files as src="//url/somfolder/somefile.js" in the tags, it should use the current ref prefix http: or https: without specifically calling it out. Example:
<script src="//example.com/script.js"></script>
Note CSS can be referenced in a similar fashion:
<link rel="stylesheet" href="//example.com/style.css">
There is an http:// hardcoded somewhere in mediawiki codebase, causing these errors. Can't find out, what.
Index:13 Mixed Content: The page at 'https://xy/Index' was loaded over HTTPS, but requested an insecure stylesheet 'http://xy/load.php?debug=false&lang=hu&modules=mediawiki.legacy.co…face%7Cmediawiki.ui.button%7Cskins.vector.styles&only=styles&skin=vector&*'. This request has been blocked; the content must be served over HTTPS.
Index:1 Mixed Content: The page at 'https://xy/Index' was loaded over HTTPS, but requested an insecure script 'http://xy/load.php?debug=false&lang=hu&modules=startup&only=scripts&skin=vector&*'. This request has been blocked; the content must be served over HTTPS.
In your mediawiki folder, there's a file named LocalSettings.php
You need to edit that file and change $wgServer value from http:// to https://
We are using Google PageSpeed module running on Apache, it is possible to configure it so that the base url uses https?
It currently outputs the following.
<noscript>
<meta HTTP-EQUIV="refresh" content="0;url='http://example.com/?ModPagespeed=noscript'" />
<style><!--table,div,span,font,p{display:none} --></style>
<div style="display:block">Please click here if you are not redirected within a few seconds.</div>
</noscript>
It should be https://example.com - It there a setting inpagespeed.conf to correct this?
It turns out that the site was running behind a load balancer. All HTTPS requests were forwarded via HTTP. To correct the issue we needed to set
ModPagespeedRespectXForwardedProto on
The documentation for https support explains the process.
Excuse the awkward title: I'm building a simple web server (don't ask...) and have this problem:
The browser requests mydomain.com/MyFolder
My server spots this is a folder, so instead, delivers mydomain.com/MyFolder/index.html
All fine so far, except that index.html has link to mycss.css, but the browser requests it as a top-level file mydomain.com/mycss.css instead of mydomain.com/myFolder/mycss.css.
Is there some HTTP header that needs setting up to indicate that a different page has been served? I've tried returning Content-Location: /myFolder/index.html, but without any visible success.
index.html basically contains this:
<link rel="stylesheet" href="mycss.css" />
Return a 301 Moved Permanently status code, instead of the 200.
Provide a Location header pointing to the same url plus a slash in the end /
Like so:
Location: mydomain.com/MyFolder/
Do not serve the index.html file on that same request, wait for the browser to request again with the slash at the end.
Or just try to add something like this to your .htaccess file:
RewriteEngine On
RewriteBase /
RewriteRule ^(.+)$ myFolder/$1
Can you just try to change this:
<link rel="stylesheet" href="mycss.css" />
to this:
<link rel="stylesheet" href="/myFolder/mycss.css" />
?
Ok, actually the information given was not correct so I'm modifying the answer. If you are implementing a web-server, you must follow the standard specification. The definition <link rel="stylesheet" href="mycss.css" /> shall retrieve the the CSS file from the same location as the file in which it is defined in (index.html) is. When using relative paths, it is not the browser that requests from a specific location but the web-server should determine the location from which to serve the resource.
Check section 2.4.6 and 3 in the standards document: http://www.ietf.org/rfc/rfc1808.txt
In other words, if the path of a resource does not start with the slash (/), it is considered as relative and should be located relative to the base URL.