Why is my css showing ���? - css

System details:
Server: Apache, Ubuntu 16.02
Client: Windows 10, Chrome
My apache config file looks as follows:
<VirtualHost *:80>
ServerName mycoolsiteA.mydomain.com
ServerAlias mycoolsiteB.mydomain.com
Alias /static /var/www/python/mysite/static
Alias /templates /var/www/python/mysite/templates
WSGIDaemonProcess my_app user=www-data group=www-data threads=5
WSGIScriptAlias / /var/www/python/mysite/start.py
WSGIScriptReloading On
<Directory /var/www/python/mysite>
WSGIProcessGroup my_app
WSGIApplicationGroup %{GLOBAL}
order deny,allow
Allow from all
</Directory>
</VirtualHost>
When I load the css in a browser it is showing the following. However, this is quite random. It "sometimes" works, and sometimes does not.
My example url is this:
https://mycoolsiteA.mydomain.com/static/css/bs/bootstrap.min.css
We do have a Firewall appliance which auto-redirects http to https, but I'm loading the css directly with https.
And the result looks like this:
Yet, if I refresh several times, or add a r=number on the end, it will clear the cache and load. But, it will do it again randomly until I clear the cache again.
Here it is loaded and working:
Any thoughts, direction on where to look to fix this?

Welcome to the fun world of UTF-8!
I've seen this dozens of times in PHP (see UTF-8 all the way through). What you're experiencing is almost certainly a UTF-8 file being delivered as some other character encoding (or vice-versa). I downloaded Bootstrap and Notepad++ identifies them as ANSI encoded. Your web server might be forcing that to use UTF-8. Look at the response headers for something like this
Content-Type: text/css; charset=UTF-8
So your web server is saying it's UTF-8 but it's really not. At which point your browser starts vomiting out �, meaning it doesn't recognize the character.
There's a couple of ways to deal with this if that's the case.
Re-encode the file as UTF-8 (Notepad++ can do this for you)
Stop passing a default UTF-8. Your browser will try to identify the encoding
Just for kicks, try loading the CSS directly from the MaxCDN servers
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
They do not pass a UTF-8 header

Related

OpenStack Dashboard Login page does not load

I installed OpenStack Dashboard following Installation Guide here:
https://docs.openstack.org/horizon/wallaby/install/install-rdo.html
Not very compicated but Dashboad does not work. After the first access, there was only "Forbidden"
status for url http://localhost/dashboard/. Then I investigated /etc/httpd/conf.d/openstack-dashboard.conf file (it's content below) and noticed that the whole wsgi directory missing on the system. I tried to correct WSGISriptAlias to some another location in /usr/share/openstack-dashboard directory structure (for example, I tried with /usr/share/openstack-dashboard/openstack_dashboard/wsgi.py) but it then status was Not Found and URL was redirected to http://localhost/auth/login/?next=/dashboard/.
I am not very familiar with web development so I don't completely understand what it means but after that I tried to find some solution on internet and I found this on Ask OpenStack:
https://ask.openstack.org/en/question/13952/horizon-apache-launch-error/
I tried with that solution but neither this helped me, after configuring the server according to that page, nothing appears on the page, only "Not Found". Please can someone help me to find some solution for this problem?
Thanks.
Here is content of the original /etc/httpd/conf.d/openstack-dashboard.conf file:
WSGIDaemonProcess dashboard
WSGIProcessGroup dashboard
WSGISocketPrefix run/wsgi
WSGIApplicationGroup %{GLOBAL}
WSGIScriptAlias /dashboard /usr/share/openstack-dashboard/openstack_dashboard/wsgi/django.wsgi
Alias /dashboard/static /usr/share/openstack-dashboard/static
<Directory /usr/share/openstack-dashboard/openstack_dashboard/wsgi>
Options All
AllowOverride All
Require all granted
allow from all
</Directory>
<Directory /usr/share/openstack-dashboard/static>
Options All
AllowOverride All
Require all granted
allow from all
</Directory>
to not bother you anymore with my stupid questions,
I found solution on another place which says that I have to add WEBROOT directive to
/etc/openstack-dashboard/Local_settings which was missing.
Thanks.
Regards.

APACHE 2.4 Remote Proxy mod_substitute and ProxyHTMLExtended don't work

I built a reverse proxy with Apache 2.4 on a cento's 7 server. It works with standard html pages but i need to substitute some url stored in .js files too. The directive:
ProxyHTMLExtended On
should enable the parsing inside external .css and .js files but it doesn't work. In the log file I can see:
[proxy_html:trace1] [pid 3263] mod_proxy_html.c(823): [client xxx] Non-HTML content; not inserting proxy-html filter
I tried to use mod_substitute, this is the interesting part in my httpd.conf:
ProxyPass /mylocation/ http://remoteserver/
<Location /mylocation/>
ProxyHTMLEnable On
ProxyHTMLExtended On
LogLevel debug proxy_html:trace3 substitute_module:debug
RequestHeader unset Accept-Encoding
AddOutputFilterByType SUBSTITUTE text/javascript text/html
Substitute "s|/css/|/mylocation/css/|ni"
Substitute "s|/js/|/mylocation/js/|ni"
Substitute "s|/custom_logo/|/mylocation/custom_logo/|ni"
Substitute "s|/html/|/mylocation/html/|ni"
Substitute "s|/current_config/|/mylocation/current_config/|ni"
Substitute "s|/web_lang/|/mylocation/web_lang/|ni"
Substitute "s|/custom_lang/|/mylocation/custom_lang/|ni"
ProxyPassReverse /
ProxyHTMLURLMap //remoteserver /mylocation/
ProxyHTMLURLMap http://remoteserver /mylocation/
ProxyHTMLURLMap /mylocation /mylocation
ProxyHTMLURLMap ^\/(.*) /mylocation/$1 R
</Location>
But in the log file there aren't any mod_substitute trace. It seems mod_substitute is never called.
The proxyHTMLURLMap rules works fine, but only on regular html files.
Depending on the .js file I'm asking to the server, I can see in the log file:
[xml2enc:debug] [pid 3259] mod_xml2enc.c(254): [client xxx] AH01434: Charset ISO-8859-1 not supported by libxml2; trying apr_xlate
or
[proxy_html:trace1] [pid 3263] mod_proxy_html.c(823): [client xxx] Non-HTML content; not inserting proxy-html filter
then the process stop, I receive the file but nothing has been replaced on it.
1) Wy the "ProxyHTMLExtended On" rule don't parse external .js files as described in Apache documentation?
2) Wy the mod_substitute don't work?
I'll try to answer to your questions
1) Wy the "ProxyHTMLExtended On" rule don't parse external .js files as described in Apache documentation?
You say that ProxyHTMLExtended Directive:
should enable the parsing inside external .css and .js files but it doesn't work.
That's seems to be incorrect, the current doc says:
Set to Off, HTML links are rewritten according to the ProxyHTMLURLMap directives, but links appearing in Javascript and CSS are ignored.
Set to On, all scripting events (as determined by ProxyHTMLEvents) and embedded scripts or stylesheets are also processed by the ProxyHTMLURLMap rules, according to the flags set for each rule. Since this requires more parsing, performance will be best if you only enable it when strictly necessary.
That means that embedded scripts, the ones in <script></script> are checked. It doesn't mention .js files.
2) Wy the mod_substitute don't work?
About this i don't know for sure why it doesn't work, but assuming the mod_substitute is enabled since apache started without error, the only thing that I can guess is that apache is sending application/javascript as Mime-Type instead of text/javascript that you wrote
Some bonus suggestions:
I wouldn't use ProxyHTMLURLMap ^\/(.*) /mylocation/$1 R with ProxyHTMLExtended On because will translate every / in your scripts, if you have <script> var a = 12/2; </script> will be translated into <script> var a = 12/mylocation/2; </script>. I would consider using ProxyHTMLURLMap / /mylocation/ c (the c flag means: "Pass embedded script and style sections through untouched.")
I don't really think that you need ProxyHTMLURLMap /mylocation /mylocation
ProxyHTMLURLMap http://remoteserver /mylocation/ will add an extra / to your urls, it still works but, imho, it is not a good translation.
Ex. <a href="http://remoteserver/about"> becomes <a href="/mylocation//about">
I suggest to rewrite it like this ProxyHTMLURLMap http://remoteserver /mylocation
I have a similar problem where mod substitute was not working for me.
Then I read somewhere that normally, mod_subsittue is actually by default only working if the HTTP response you get from the server has mime type txt/html.
This was not my scenario.
My scenario was that I want to re-write the content of an XML, namely a JEE web service that was being reverse proxied by apache httpd.
In order to manage to make the mod substitute alter the reply content it was necessary to do:
<Location /mockOutgoingWebServicePortBinding>
# core authentication and mod_auth_basic configuration
# for mod_authn_dbd
AuthType Basic
Authname "Password Required"
# core authorization configuration
AuthUserFile C:\Apache24\conf\htpasswd
Require valid-user
# mod_filter to be able to subsitute text xml
AddOutputFilterByType SUBSTITUTE text/xml text/html
Substitute "s|http://someHostName:8088/|http://localhost:80/|i"
</Location>
The magic step was enabling the mod_filter and adding the directive: AddOutputFilterByType .
When this was added in, the substitue altered the body of the xml. replacing the endpoint address.
About this:
But in the log file there aren't any mod_substitute trace
I managed to get a mod_substitute trace in error.log by using:
LogLevel alert substitute:trace8

Apache alias not working, WAMP

I am using WAMP.
I edited the httpd.conf file to include:
Alias /static "c:/he/sites/browsbyboodah.com/htdocs/static"
When linking my .css's I use this path:
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
I cannot load the .css like this for some reason. What am I forgetting?
Thanks.
/* EDIT */
After a little debugging I found the following from a view page source and clicking on the css file:
Page not found (404)
Request Method: GET
Request URL http://127.0.0.1:8000/static/css/reset.css
css\reset.css could not be found
check whether Apache mod_alias module is installed or not? and remove "
Alias /static/ /sites/browsbyboodah.com/htdocs/static/
alternatively you can use AliasMatch Directive
One subtle difference between Alias and AliasMatch is that Alias
automatically copies any additional part of the URI onto the end of
the file path on the right. AliasMatch does not.
AliasMatch ^/static/(.*)$ /sites/browsbyboodah.com/htdocs/static/$1
Read this article for more help

Resource interpreted as stylesheet but transferred with MIME type text/html

This is my html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Language" content = "en"/>
<meta http-equiv = "Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/xxx/app/www/style.css">
Now when I load the page, Safari's inspector gives me:
Resource interpreted as stylesheet but transferred with MIME type text/html
I'm working on localhost with MAMP. I'm not sure what to modify to get this to work. I read that this might be a server problem of some kind.
How do I solve it?
Create an .htaccess file into your root folder (or update the existing one) with this line inside
AddType text/css .css
this will tell apache to send the right content-type header for .css file
There is possibility that not just css resources were interpreted wrongly. It maybe a problem of your webserver configuration.
The best way to check is to go to Chrome -> Network tab and check responses section for each request.
Also you can run $ curl -I http://path_to_file_or_page with terminal and have a look at response, you should see it in following format, e.g. Content-Type: image/jpeg
So, if it will occur that webserver (apache) does it for all filesthen you can try to solve the problem in following way:
Check your /etc/apache2/apache2.conf
If there are any SetHandler application/x-httpd-php line, try to comment it and then reload your apache by $ sudo system apache2 reload
Let us know if the problem is still there.
It could be that your web server is properly configured but it really is returning HTML instead of CSS.
Check that you have the correct path, spelling, case, etc. Hit the URL directly and see what comes back. Your web server might be responding with an error page (HTML) and a 200-Ok instead of a 404-Not Found.
I'm not saying this ever happened to me...

How to solve CSS include error after Apache RewriteRule?

I use winXP and AppServ. I have a "showitem.php" on my website root. An example usage:
www.mydomain.com/showitem.php?id=123
I want to use links like following:
www.mydomain.com/item/123
In .htaccess I write this line:
RewriteRule ^item/([^/]+)$ showitem.php?id=$1
Server directs to showitem.php and id is received successfully. However, main problem is with the css and js files. If I make "css/style.css" to "/css/style.css", page is shown on the internet and but not on localhost, because root is "localhost" but files are under "localhost/mydomain". I have also tried "!-f" condition for .css files but it doesn't help and it can't as far as I understand. To solve the problem, I should direct wrong css file interpretation to the correct place, so I want to redirect client request "item/css/style.css" to its original location "css/style.css". I add the following rules for localhost but is there any other way?
RewriteRule ^item/css/([^/]+)$ /mydomain/css/$1
RewriteRule ^item/img/([^/]+)$ /mydomain/img/$1
Set a base tag in your html head.
<base href="http://www.mydomain.com/" />
And then set your stylesheet linking paths relative to the base, e.g.
<link href="css/style.css" />
you could write these to the file .htaccess
ErrorDocument 404 /error_404.php
/error_404.php is your error file you want to put something in there.

Resources