28
votes

I have a website working on it. when i open any page with http:// protocol, every thing is loaded correctly, but when i try to load the page with https protocol, the page loaded but without css and javascript file.
The console shows the following errors.

Mixed Content: The page at 'https://www.example.com/index.php?main_page=login' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.example.com/site_map.html'. This request has been blocked; the content must be served over HTTPS.

I figured that the problem is the browser can not load any css files when it requested by https protocol.
The problem is with htaccess file, because when i removed it, the css files loaded correctly.

The page and css files loaded to browser with https in their urls like this

<link rel="stylesheet" type="text/css" href="https://www.example.com/includes/templates/classic/css/style1.css">
<link rel="stylesheet" type="text/css" href="https://www.example.com/includes/templates/classic/css/style2.css">

when the browser tries to load the css files, it is redirected to

http://www.example.com/site_map.html  

How can i make htaccess allow https to open the css and js files in a specific folder?

Thanks

UPDATE The htaccess file content

RewriteEngine On
RewriteCond %{SERVER_PORT} ^443$
RewriteRule (.*) http://www.example.com/$1 
###############################################################################
# Common directives
###############################################################################
# NOTE: Replace /shop/ with the relative web path of your catalog in the "Rewrite Base" line below:

Options +FollowSymLinks
RewriteEngine on

RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://www.example.com/ [R=301,L]

#RewriteBase /

###############################################################################
# Start Ultimate SEO URLs
###############################################################################

# Original (unchanged) URL formats
RewriteRule ^(.*)-p-([0-9]+)(.*)$ index\.php?main_page=product_info&products_id=$2&%{QUERY_STRING} [L]
RewriteRule ^(.*)-c-(.*)-p(.*)\.html$ /index.php?main_page=$4&cPath=$2&sort=$5&page=$3
RewriteRule ^(.*)-c-([0-9_]+)(.*)$ index\.php?main_page=index&cPath=$2&%{QUERY_STRING} [L]
RewriteRule ^(.*)-ez-(.*).html$ index.php?main_page=page&id=$2 [L]

# All other pages
# Don't rewrite real files or directories
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index\.php?main_page=$1&%{QUERY_STRING} [L]


# Block out any script trying to base64_encode data within the URL.
RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) [OR]
# Block out any script that includes a <script> tag in URL.
RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]
# Block out any script trying to set a PHP GLOBALS variable via URL.
RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
# Block out any script trying to modify a _REQUEST variable via URL.
RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})
RewriteRule   index.html$  index.php [QSA] 


# 480 weeks
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

# 2 DAYS
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

# 2 HOURS
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

RewriteEngine on
RewriteBase /

ErrorDocument 404 /index.php
RewriteRule   index.html$  index.php [QSA]
6
Can you post the contents of .htaccess?joews
I updated the questionKarim Harazin

6 Answers

13
votes

Here's your problem:

RewriteCond %{SERVER_PORT} ^443$
RewriteRule (.*) http://www.example.com/$1 

You don't allow SSL requests (443 port number is used for HTTPS requests). Try removing these lines.

15
votes

If you are able to serve CSS etc over HTTPS, the best solution is to use // as the scheme for asset URLs.

That means "use the same scheme (sometimes called protocol) as the parent document", i.e. use https if the page uses https. For example:

<link rel="stylesheet" href="//mysite.com/styles.css">
<script src="//mysite.com/app.js"></script>
12
votes

Most probably inside your html code you have something like

<link href="http://someSite.com/css/someStyle.css" rel="stylesheet" type="text/css" />

you should change this to

<link href="https://someSite.com/css/someStyle.css" rel="stylesheet" type="text/css" />

also the page you are referring to is .html not css, but i guess that is a typo ...

2
votes

Experienced similar error in Drupal 8.0.1

Error - Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure stylesheet ''. This request has been blocked; the content must be served over HTTPS.

Solution - Open .htaccess file and add the following line Header always set Content-Security-Policy "upgrade-insecure-requests;"

0
votes

I used cloudflare's plugin as described in their guide here.

0
votes

You may also need to check your WordPress Address (URL) and Site Address (URL) under General Settings and make sure your URLs are https://www.yourdomain.com