search

Hutchy68 / pivot

A MediaWiki mobile skin which "Pivots" seamlessly to any size display.
https://pivot.wikiproject.net
BSD 2-Clause "Simplified" License
37 stars 18 forks source link

Icons in navbar doesn't show in certain browsers #100

Closed isene closed 3 years ago

isene commented 3 years ago

Setup

Issue

See screenshots for a clear view of the issue at hand.

Screenshots

Firefox

Qutebrowser

Mobile-Chrome

Hutchy68 commented 3 years ago

https://pivot.wikiproject.net/wiki/FAQs

See icons missing

isene commented 3 years ago

I followed the link under "Icons Are Broken" to "How to setup server to serve fonts/Apache" and added:

AddType font/ttf                         ttf
AddType font/otf                         otf
AddType font/woff                        woff
AddType font/woff2                       woff2
AddType application/vnd.ms-fontobject    eot

...at the end of my Apache2.conf. Restarted Apache and nothing changed.

I then also changed this from 'false' to 'true': 'preloadFontAwesome' => true

...but still nothing changed.

Adding

<FilesMatch ".(eot|ttf|otf|woff|woff2)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

...made Apache unwilling to restart - but since the fonts are served locally, that wouldn't matter, I suppose.

I'm curious why my Qutebrowser serves the fonts and not other browsers, including on my mobile phone.

Hutchy68 commented 3 years ago

If the Header module is not enabled that will cause the error.

Is the MIME type module installed.

Looking at your site, the font files are there. I would recommend you need to block directory browsing. The font files want to download instead of view in the browser which leads to this in calling your pages on your website. 

GET https://d6gaming.org/skins/pivot/assets/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED 404 (Not Found)
GET https://d6gaming.org/skins/pivot/assets/fonts/fontawesome-webfont.woff2?af7ae net::ERR_ABORTED 404 (Not Found)
Hutchy68 commented 3 years ago

What is your server built on?

isene commented 3 years ago

We are bouncing into my lack of competence here.

"If the Header module is not enabled that will cause the error." - Header module? How to check/enable that?

"Is the MIME type module installed." - No idea. How to check/enable?

"I would recommend you need to block directory browsing." - How?

"What is your server built on?" - The server is a fairly plain Ubuntu 20.04.

Hutchy68 commented 3 years ago 
apache2ctl -M

Should show you list of enabled modules

isene commented 3 years ago

I have among lots of modules:

mime_module (shared)

...but no "header module" - so I did a2enmod headers and ensured it was loaded after restart.

...but nothing changed. So, I have now both the mime and the headers modules running. Now what?

Also: "I would recommend you need to block directory browsing." - How?

isene commented 3 years ago

BTW; I'm running a different skin now until I can get the icons in Pivot working (just so that you're not checking the site and wonder why)

Hutchy68 commented 3 years ago

Add this to the top of your .htaccess file in your root dir. /public_html/ or /var/www/html/ or /var/www/domain.com/ etc. if you don't have an .htaccess file, create one.

Options -Indexes
AddType font/ttf    ttf
AddType font/otf    otf
AddType font/woff   woff
AddType font/woff2  woff2
AddType application/vnd.ms-fontobject   eot

Now, clear your cache. Chrome is pretty sticky. Also, if you any type of file or db cache enabled for MW, clear it.

isene commented 3 years ago

Created a .htaccess in /var/www/html/ (which is the root of my Mediawiki site, and the only site served on this server). Cleared browser caches (Firefox on desktop and Chrome on my Android phone). Restarted Apache just to be sure. No change. I still don't understand why everything is fine in Qutebrowser.

But - I don't know how to do this: "Also, if you any type of file or db cache enabled for MW, clear it."

isene commented 3 years ago

Can you check if the .htaccess is serving things right on your end?

I'm running the Pivot skin now.

Hutchy68 commented 3 years ago

I can still see your files, Index browsing is not off. So it sounds like you are using a headless Ubuntu server.

By default, the .htaccess file is not enabled.

  1. Open the default host configuration file by entering the following command in the terminal:

sudo nano /etc/apache2/sites-available/default

  1. Locate the section labeled <Directory /var/www>. In that section, change the AllowOverride None entry to all:

AllowOverride All

Save the file and exit.

  1. Now lets make sure the MIME module is completely on. Probably the font/woff is already in there as a file type. I don't know if it is on 20.04.

sudo a2enmod mime

  1. Restart Apache

.htaccess should start working and the MIME types for fonts should be added.

It sounds like you should be using something like Virtualmin to make your life easier. It is more like a cPanel, open source and works really well to set up websites.

isene commented 3 years ago

This server was not set up by me. I did however add LetsEncrypt to it for easy https.

Now, in /etc/apache2/sites-available/, I have:

000-default-le-ssl.conf
000-default.conf
default-ssl.conf

And the file 000-default.conf contains:

<VirtualHost *:80>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    ServerName d6gaming.org

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf
RewriteEngine on
RewriteCond %{SERVER_NAME} =d6gaming.org
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

There's no <Directory /var/www> in any of the files. There is only:

        <Directory /usr/lib/cgi-bin>
                SSLOptions +StdEnvVars
        </Directory>

...in the file default-ssl.conf.

BTW; a2enmod mime gave "Module mime already enabled", so that part seems to be jolly good.

PS: Having used VIM for almost all editing, articles and books written since 20 years, there's no nano for me :-)

Hutchy68 commented 3 years ago

What is in 000-default-le-ssl.conf

isene commented 3 years ago 
<IfModule mod_ssl.c>
<VirtualHost *:443>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    ServerName d6gaming.org

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf

SSLCertificateFile /etc/letsencrypt/live/d6gaming.org/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/d6gaming.org/privkey.pem

</VirtualHost>
</IfModule>
isene commented 3 years ago

And the /etc/apache2/sites-enabled/ contains just those two files: 000-default.conf and 000-default-le-ssl.conf

You're quick in answering. I really appreciate your help here.

Hutchy68 commented 3 years ago

Add AllowOverride All here...

....
# However, you must set it for any further virtual host explicitly.
    ServerName d6gaming.org

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    AllowOverride All
    Options -Indexes

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
....

You can also put in the font types, but they would be better in the MIME config, but .htaccess is just fine.

restart apache

isene commented 3 years ago

I tried adding

    AllowOverride All
    Options -Indexes

in first the 000-default.conf and then 000-default-le-ssl.conf but in both cases I get upon doing systemctl restart apache2:

"Job for apache2.service failed because the control process exited with error code."

Hutchy68 commented 3 years ago

Oops long day

Require all granted

Right after

AllowOverride ALL

Hutchy68 commented 3 years ago

All

isene commented 3 years ago

My 000-default-le-ssl.conf was changed to this:

<IfModule mod_ssl.c>
<VirtualHost *:443>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    ServerName d6gaming.org

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    AllowOverride All
    Require All granted
    Options -Indexes

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf

SSLCertificateFile /etc/letsencrypt/live/d6gaming.org/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/d6gaming.org/privkey.pem

</VirtualHost>
</IfModule>

...but still "Job for apache2.service failed because the control process exited with error code."

Hutchy68 commented 3 years ago

Ah, the directory tag is missing

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

   <Directory /var/www/html>
       AllowOverride All
       Require All granted
       Options -Indexes
    </Directory>
isene commented 3 years ago

Assuming it's still 000-default-le-ssl.conf we are talking about - I changed it to this:

<IfModule mod_ssl.c>
<VirtualHost *:443>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    ServerName d6gaming.org

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    # To get fontawesome working
    # ... see <https://github.com/Hutchy68/pivot/issues/100>
    <Directory /var/www/html>
       AllowOverride All
       Require All granted
       Options -Indexes
    </Directory>

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf

SSLCertificateFile /etc/letsencrypt/live/d6gaming.org/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/d6gaming.org/privkey.pem

</VirtualHost>
</IfModule>

Still "Job for apache2.service failed because the control process exited with error code."

Hutchy68 commented 3 years ago

Hmm, I'm stumped. I don't know what else is in the config of your install. You might need some Options for the AllowOverride, or perhaps the Let's Encrypt config doesn't allow tag and you need to put it into the default config for ssl, default-ssl.conf which I think you said have the cgi bin tag. I'm not sure how the Let's Encrypt config loads as an addon or only.

Just add it there.

Anyway, last try... you could try

<Directory /var/www/html> Options -Indexes AddType font/ttf ttf AddType font/otf otf AddType font/woff woff AddType font/woff2 woff2 AddType application/vnd.ms-fontobject eot </Directory

Start with Options -Indexes first. See if Apache loads. Then add in the AddType

Or edit the /etc/apache2/mods-available/mime.conf and AddType the font designations there.

Hutchy68 commented 3 years ago

Or is your mime.conf loads TypesConfig /etc/mime.types add them into '/etc/mime.types at the end.

isene commented 3 years ago

It works to put this in 

    <Directory /var/www/html>
    #   AllowOverride All
    #   Require All granted
        Options -Indexes
        AddType font/ttf    ttf
        AddType font/otf    otf
        AddType font/woff   woff
        AddType font/woff2  woff2
        AddType application/vnd.ms-fontobject   eot
    </Directory>

Apache restarts, but no change.

isene commented 3 years ago

This is already in mime.types:

font/collection                 ttc
font/otf                    ttf otf
font/sfnt                   ttf otf
font/ttf                    ttf otf
font/woff                   woff
font/woff2                  woff2

And in mime.conf it does load TypesConfig /etc/mime.types

isene commented 3 years ago

So, I guess I can remove the AddTypes from 000-default-le-ssl.conf

isene commented 3 years ago

After more trial and errors, I found out that this works:

    <Directory /var/www/html>
        AllowOverride All
        Require all granted
        Options -Indexes
    </Directory>

So, the "All" needed to be "all" in "Require all granted".

But, no change. What do you see in digging the site?

Hutchy68 commented 3 years ago

Well, directory browsing is blocked that is god.

Now add this to the .htaccess file in your /html directory

AddType font/ttf ttf AddType font/otf otf AddType font/woff woff AddType font/woff2 woff2 AddType application/vnd.ms-fontobject eot

isene commented 3 years ago

.htaccess in /var/www/html/ has the above included and rights like this: -rw-r--r-- 1 root root

Apache restarted. No change. I admire your patience here.

isene commented 3 years ago

But why on Earth is Qutebrowser serving the icons just fine?

Hutchy68 commented 3 years ago

Probably because it is not securely filtering MIME types and will load everything no matter what.

root should not own .htaccess it should be owned by www-data I think. Whatever everything else in /var/www/html/ is owned by. 0644 looks right for permissions.

isene commented 3 years ago

All file ownership fixed. But no change.

isene commented 3 years ago

I found this inside the long apache2.conf:

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Require all denied
</Directory>

<Directory /usr/share>
    AllowOverride None
    Require all granted
</Directory>

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

Don't know if any of that is relevant.

Hutchy68 commented 3 years ago

Ha, yes very relevant. 

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Require all denied
</Directory>

<Directory /usr/share>
    AllowOverride All
    Require all granted
</Directory>

<Directory /var/www/>
    Options -Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
isene commented 3 years ago

It failed on restart, so I had to go one-by-one with the changes.

The one that fails is -Indexes. I can remove the Indexes, but when I do the "-" in front, it fails.

BTW, I also removed those lines in the 000-default-le-ssl.conf (but funny that the -Indexes worked there)

isene commented 3 years ago

Alos this is in the apache2.conf (I suppose that is correct, though):

#
# The following lines prevent .htaccess and .htpasswd files from being
# viewed by Web clients.
#
<FilesMatch "^\.ht">
    Require all denied
</FilesMatch>
isene commented 3 years ago

Ha. I found the issue here: https://stackoverflow.com/a/40085809

So, this works:

<Directory /var/www/>
    Options -Indexes +FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Apache is picky.

But still no icons as you can see. Except in Qutebrowser. Qutebrowser is nice. Nice Qutebrowser.

Hutchy68 commented 3 years ago

Closing, this is a server issue which pivot can not fix.