This morning, upon upgrading my Firefox browser to the latest version (from 22 to 23), some of the key aspects of my back office (website) stopped working.
Looking at the Firebug log, the following errors were being reported:
Blocked loading mixed active content "http://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
Blocked loading mixed active content "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"`
among other errors caused by the latter of the two above not being loaded.
What does the above mean and how do I resolve it?
I found this blog post which cleared up a few things. To quote the most relevant bit:
Mixed Active Content is now blocked by default in Firefox 23!
What is Mixed Content?
When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.
However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.
The resolution, in my case, was to simply ensure the jquery includes were as follows (note the removal of the protocol):
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
Note that the temporary 'fix' is to click on the 'shield' icon in the top-left corner of the address bar and select 'Disable Protection on This Page', although this is not recommended for obvious reasons.
UPDATE: This link from the Firefox (Mozilla) support pages is also useful in explaining what constitutes mixed content and, as given in the above paragraph, does actually provide details of how to display the page regardless:
Most websites will continue to work normally without any action on your part.
If you need to allow the mixed content to be displayed, you can do that easily:
Click the shield icon Mixed Content Shield in the address bar and choose Disable Protection on This Page from the dropdown menu.
The icon in the address bar will change to an orange warning triangle Warning Identity Icon to remind you that insecure content is being displayed.
To revert the previous action (re-block mixed content), just reload the page.
It means you're calling http from https. You can use src="//url.to/script.js" in your script tag and it will auto-detect.
Alternately you can use use https in your src even if you will be publishing it to a http page. This will avoid the potential issue mentioned in the comments.
In absence of a white-list feature you have to make the "all" or "nothing" Choice. You can disable mixed content blocking completely.
The Nothing Choice
You will need to permanently disable mixed content blocking for the current active profile.
In the "Awesome Bar," type "about:config". If this is your first time you will get the "This might void your warranty!" message.
Yes you will be careful. Yes you promise!
Find security.mixed_content.block_active_content. Set its value to false.
The All Choice
iDevelApp's answer is awesome.
Put the below <meta> tag into the <head> section of your document to force the browser to replace unsecure connections (http) to secured connections (https). This can solve the mixed content problem if the connection is able to use https.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
If you want to block then add the below tag into the <head> tag:
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
Its given the error because of security.
for this please use "https" not "http" in the website url.
For example :
"https://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
"https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"
In the relevant page which makes a mixed content https to http call which is not accessible we can add the following entry in the relevant and get rid of the mixed content error.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
If you are consuming an internal service via AJAX, make sure the url points to https, this cleared up the error for me.
Initial AJAX URL: "http://XXXXXX.com/Core.svc/" + ApiName
Corrected AJAX URL: "https://XXXXXX.com/Core.svc/" + ApiName,
Simply changing HTTP to HTTPS solved this issue for me.
WRONG :
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
CORRECT :
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
I had this same problem because I bought a CSS template and it grabbed a javascript an external javascript file through http://whatever.js.com/javascript.js. I went to that page in my browser and then changed it to https://whatever... using SSL and it worked, so in my HTML javascript tag I just changed the URL to use https instead of http and it worked.
To force redirect on https protocol, you can also add this directive in .htaccess on root folder
RewriteEngine on
RewriteCond %{REQUEST_SCHEME} =http
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
#Blender Comment is the best approach. Never hard code the protocol anywhere in the code as it will be difficult to change if you move from http to https. Since you need to manually edit and update all the files.
This is always better as it automatically detect the protocol.
src="//code.jquery.com
I've managed to fix this using these :
For Firefox user
Open a new TAB enter about:config in the address bar to go to the configuration page.
Search for security.mixed_content.block_active_content
Change TRUE to FALSE.
For Chrome user
Click the Not Secure Warning next to the URL
Click Site Settings on the popup box
Change Insecure Content to Allow
Close and refresh the page
I found if you have issues with including or mixing your page with something like http://www.example.com, you can fix that by putting //www.example.com instead
I have facing same problem when my site goes from http to https. We have added rule for all request to redirect http to https.
You needs to add the redirection rule for inter site request, but you have to remove the redirection rule for external js/css.
I just fixed this problem by adding the following code in header:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
#if (env('APP_DEBUG'))
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
#endif
Syntax for Laravel Blade, Remember to use it for debugging only to avoid MITM attacks and eavs-dropping
Also using
http -> https
for Ajax or normal JS Scripts or CSS will also solve the issue.
If your app server is weblogic, then make sure WLProxySSL ON entry exists(and also make sure it should not be commented) in the weblogic.conf file in webserver's conf directory. then restart web server, it will work.
I've been working on this internal web app that allows the users to click on a button to see an image. Pretty straight forward.
<img id="swatchimage" width="600" height="600" src="" />
The image needs to be linked from an external website. The piece of javascript that does that is:
$("#swatchimage").attr("src", fileURL);
One of the URLs look like this:
If you try to access the image above in a browser it works without a problem.
When accessing it from the internal app ( IP: 192.168.110.15 ) then the server returns 403 error.
The same files are used in the main website, so I don't think it's about the hot linking protection (which i tried to disable too, to no avail).
Is there some restriction that I'm not aware of when linking these kind of resources?
I think I found the problem:
The server (cdn.palmcentre.co.uk) is not sending an Access-Control-Allow-Origin header in the response, so you can't use JavaScript to fetch it.
However, this is not a 403. Here's a screenshot of the error I get:
Also, what you're trying to do is not to fetch the image, but modify the src attribute of an <image> element, which should be allowed.
This makes me think that the error you're getting is because jQuery is trying to fetch the image, and failing, but I'm not sure.
Try doing this instead:
document.getElementById("#swatchimage").src = fileURL;
It seems I have found the solution.
It was puzzling indeed, because i knew that CORS would not be at play here. It was just another image URL that was requested from an HTML tag. So it shouldn't have behaved in such way.
Notwithstanding the help received, for which I am grateful, it seems that the issue was in fact a hot linking protection that was in place.
But it was not from the server itself or from the script but rather from the CloudFlare cache itself.
I am going crazy trying to get my site secure. There is a form that is supposedly not allowing my site SSL
When I look it up on WhyNoPadLock.com I get:
Insecure call Found on line # 247 in file:
rideyellow.com/index.html
I looked through the style sheet and have changed all of the hard coded domain links to https already.
We do have a Call Now button in the header that was custom coded into the site. this works with Javascript. Its a plugin called Anything Pop Up. Could this Javascript be the root of the problem? How can I fix this issue?
I cannot find this "form" anywhere. Any help is much appreciated!
I visited your site. You are loading mixed content, as can be seen through the following Chrome console warning:
Mixed Content: The page at 'https://rideyellow.com/' was loaded over
HTTPS, but requested an insecure video
'http://rideyellow.com/wp-content/uploads/2017/01/RideYellow_1.mp4'.
This content should also be served over HTTPS.
Also, you do have a form element in line 247, but you seem to be calling its action over HTTPS, so it should be fine. If you still get issues over this, leave out the action attribute altogether, as you're just referencing the same page.
I apologize if this question is simplistic, beginning web developer here.
I have a page that I am serving securely as https. The page uses the following two libraries:
<script src="http://myjs.us/param.js"></script>
<script src="http://myjs.us/entify.js"></script>
I am getting errors of the following type:
[blocked] The page at ... was loaded over HTTPS, but ran insecure
content from 'http://myjs.us/param.js': this content should also be
loaded over HTTPS.
So I get why I am getting this error, it is because I am loading the javascript libraries from an unsecure source. My question is where can I get these from a secure source?
Thanks in advance.
The basic solution is to remove the protocol form the URL when you call the javascript, change
<script src="http://myjs.us/param.js"></script>
to this
<script src="//myjs.us/param.js"></script>
With this you ensure that the javascript will load with the same protocol of the entire page.
Be sure that the server supports https (myjs.us for you), otherwise you will get an error like failed to load resource..., In this case, maybe you want to use a CDN with https support, like cdnjs
You can omit the protocol in your URLs:
<script src="//myjs.us/param.js"></script>
<script src="//myjs.us/entify.js"></script>
The browser will default to the current protocol being used by the page, in this case https. Of course, if myjs.us doesn't support https then that would be another issue entirely, and one you can't really solve from your page.
This question has nothing to do with the mixed content error. About to launch a site. When i navigate from http://example.com to https://example.com, i notice that the css/js/etc is redownloaded as i am using root relative paths: .
Using an http sniffer i see that the browser thinks https://www.example.com/_css/main.css is different than http://www.example.com/_css/main.css (its not). Thus the same exact content is downloaded twice causing the site to look slow navigating from http to https (if the user doesn't have both versions cached already).
Is there anyway to stop this? The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache? Or should i just use absolute paths (https://www.example.com/_css/main.css) on ever page and on every css background image (only 2 i use sprites). Or do we just live with it? Thanks.
Using an http sniffer i see that the browser thinks https://www.mysite.com/_css/main.css is different than http://www.mysite.com/_css/main.css (its not).
It is a different resource with identical content. The browser has no way to know that they are going to have the same content.
You can redirect (with a 301) from one to the other so you don't have a non SSL version.
Is there anyway to stop this?
Not really.
The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache?
No. It would be a horrible security problem if a URL could precache content for arbitrary other URLs.
Or should i just use absolute paths (https://www.mysite.com/_css/main.css) on ever page and on every css background image (only 2 i use sprites).
That would work, but lead to mixed content issues.
Or do we just live with it?
Yes.
There are a couple ways to fix this.
Use a base tag. Then use relative paths for your resources and caching will be perceived to work for http and https, though really it was just loaded on https already. Demonstration
<base href="https://example.com/" />
Redirect everything to SSL when the user hits the site the Apache way (Redirect SSL)
Redirect permanent / https://example.com/login
You can use an .htaccess RewriteRule to load the https content every time; or a redirect header specified in the http version of the html would work more slowly (extra round-trip) but otherwise just as well, I believe.
Use protocol-relative paths.
Instead of this
<link rel="stylesheet" href="http://domain.com/style.css">
<link rel="stylesheet" href="https://domain.com/style.css">
use this
<link rel="stylesheet" href="//domain.com/style.css">
then it will use the protocol of the parent page.
You can reference the files without the protocol specifier, e.g.:
<link rel="stylesheet" type="text/css" href="//mysite.com/_css/main.css" />
See this post for more details:
Can I change all my http:// links to just //?