Missing dark mode

[jiab77 (Doctor Who)]

Hi guys, I’ll reply to each of your messages but I wanted to thanks you first for your nice comments and exchanges about my work. It’s kind of things that is nice to see when you end your work day

That’s why I’ve decided to mention you in the project as contributors because all the discussions we have here will always make the project better. You’ll always see things that I might forgot or just not think about it because we all have a different usage of IPFire so all your contributions means a lot to me and is really helpful

[jiab77 (Doctor Who)]

Hi SecCon,

Thanks a lot for your message!

I’m pretty aware about what you’ve mentioned as I’ve worked during many years in the web development domain but it’s not the thing I like the most so now I’m working in another domain that requires to have a deep understanding about security in infrastructure and development.

Regarding the browser support, the initial issue was totally my fault… I had been too lazy in the way that the icon change and the click handler being reassigned and the initial version was only working on Chromium (maybe Chrome but not sure). Once I took the time to rewrite things correctly, it worked on both Firefox and Chromium (and normally Chrome too).

I’m planning to add the support for Edge (the Chromium based one, not the older one) and will see later if support for Opera or Brave or any other semi-mainstream browsers worth to be added.

I’m agree with you that if the support for every browsers implies writing crazy patching code then it’s not the solution and a decision must be taken and a list of supported browser must be mentioned in the project.

Regarding the support of browser extensions, all my tests are run with AdBlock Plus enabled but obviously it will never work with extensions like “NoScript” without being authorized first… And such cases can’t be handled from my side.

It must be just made clear that the patch uses Javascript to apply (inject) the dark theme (required CSS code) to work and so blocking Javascript will simply avoid the load of the patch but this will also then stop loading jQuery and the related Javascript code that is used to render the RRD graphs.

So to not make my reply too long neither, here are my main priorities:

• Support for major browsers (Firefox, Chrom(e|ium), Edge)
• Support for all WUI pages
• Always follow secure development principles
  • No call-to-home feature
  • No third party code
  • No external resources loading
  • No privacy invasive features (except the decision to use localStorage instead of sessionStorage but it was for convenience and it can be reverted at any time, just ask me and I change the code for using sessionStorage instead)
  • Minimal footprint (means no other additions than just the line that is added in the functions.pl file)

Following these principles always forces me to find alternative solutions but it’s also very challenging to be able to make something that remains efficient and safe to use

I hope to have gave you a little bit more details about my way of doing things and what I’ve planned for this project.

[sec-con]

Installed.

Note. I am running Vivaldi browser and I will be careful not to post anything without checking stuff carefully.

TBH I mostly got Vivaldi because it allows a lot of bookmarks - and bookmark categories - in the browser Start/Home page, while MS Edge only allows 16. Firefox is an option but in my experience slow.

Also watching this on Github…

[jiab77 (Doctor Who)]

Hi @mumpitz,

Many thanks again for your reporting! Normally the DHCP Options section should be patched as @roberto reported it but maybe I’ve missed something or it’s a browser related issue, I’ll check it.

For the others, I might have missed them so I’ll include them in the next release.

Also, it would be nice if the lists in the logs or other parts that have an alternating white, light gray background in the original were also patched in dark gray and gray. That would take out an extreme amount of brightness. But I think that is on your to do list.

Regarding what you’ve mentioned and quoted above, it’s planned but I wanted to first support all the pages in terms of readability and later find the best colors to also include the alternated colored lines from tables.

It’s also much more challenging to handle them due to many reasons but mainly the fact that the tables are still using the bgcolor property and this should be replaced by the CSS equivalent. In other words, the patch would have to detect all bgcolor properties used in tables, remove them and add the equivalent CSS code because can’t be used together, there will be some conflicts.

So as you might understand, it will quite heavy as work to do so it’s on low priority at the moment.

I use a privacy harden Firefox extrem version, till now only style sheets are different no script or java used so far I think. nothing what can change code or execute code on browser.

For such use case, there is nothing that I can do unfortunately and to be fully honest, trying to do so will be simply like attempting to break your own security in the goal to inject my Javascript code and this will definitely not be ethical

I don’t want to do such things and it’s not the goal of this patch. As I said many times, I just made this patch to reduce the eye pain caused by the white backgrounds and certainly not as a mean to get access to your IPFire deployment and it will never be the case.

@cfusco, asked me in the beginning to always pay attention to not introduce any vulnerabilities with this patch and in that spirit, I’ll even enforce the type checks in the code to make sure that nothing can be injected from the client storage side.

The use of SRI already ensure that any modified scripts will never load in the browser but it’s not rocket science and with enough knowledge it can still be bypassed anyway. But this is actually the case for any scripts that is loaded from an HTML page, in someone does a MITM, place a proxy in the middle of you and your browser, anybody can intercept your script load and send you a modified one.

Anyway, I’ll always do my best to ensure that this project will not increase the attack surface but if anyone of you finds something in that regard, please let me know and it will be patched ASAP.

[jiab77 (Doctor Who)]

Woow much honored! Thanks a lot for giving it a try!

Please, feel free to dig in the code and if you find something wrong or that be improved don’t hesitate to let me know!

About your browser, we all have our own preferences, personally I’ve used Firefox during many years but the low performances compared to Chromium and the fact that the only version that is as speed as Chromium is never packaged as the standard Firefox version is just stopped me from using Firefox and Firefox developer edition (the one that is as fast as Chromium)

As a developer, you also have more debugging features in Chromium than other browsers but again it’s subjective, other developers might not agree with me and find Firefox better

Also watching this on Github…

Much appreciated! Thank you!

[jiab77 (Doctor Who)]

Hi @cfusco,

Thanks a lot for your nice comment!

Sounds like you also have (or had) a long experience (and/or nightmares ) in the web development domain as I can read from your comment Am I correct?

I am petty sure @jiab77 is very well aware of all these issues.

I can’t be aware about everything, no one does but at least for the security and web development domains, I have some knowledge but it’s always nice to share different point of views and ideas, most of the time it will be always constructive.

I wanted to say just one thing, front end development is absolutely insane and It must be really painful to write code that will work as intended in most browsers, with and without extensions. This is absolute madness, and for that I appreciate even more this project.

Definitely it is just insane and @sec-con is absolutely right when he says that I must pay attention to node ruin the code in a vain attempt to support them all.

I remember the time like when it was 10 or 20 years ago when we had to write like more than 6 different hacks / conditional comments to be able to handle all the different rendering engine that was existing at that time… It was just a nightmare

Nowadays we just have basically like 3 or 4 different rendering engines to handle and the major ones (blink and webkit) are very similar so most of the time a minor patch / variant is enough to handle both.

Once I saw a video in youtube of a guy trying IPFire and lamenting the absence of web design that works on mobile device. I can only imagine throwing in the mix also phones and tablets. The user is happily unaware of what this “simple” request means, just to look a your damn firewall on your phone.

Agree, I might have seen the same video or read an article or post mentioning the same complain and the problem is that the actual WUI structure is not adapted for mobiles and has currently no responsive logic implemented.

It’s not that easy to implement at all, in it’s current state, the way I’m seeing things is that a complete WUI rewrite would be required to make it compatible for both mobile and desktop devices.

I hope to not offend any devs here with what I said, writing a system web interface is not the same work as for simply writing a website, having to communicate from client side to server side and then execute system commands without creating security breach is just a crazy amount of work and time.

If you add above that the support for mobile and desktop devices, you can simply multiply by twice or more the required amount of work and even more if you have to also handle all the security aspects when running code from client side…

Anyway, thank you all for these really nice exchanges and sorry for my long replies, next ones should more short

[jiab77 (Doctor Who)]

I just have one last thing to add for those who are wondering how Javascript injection can be avoided in the WUI, the answer is called CSP (Content Security Policy).

If let’s say the CSP was already in place in the WUI, my patch would simply never load without proper adjustments from the IPFire devs to authorize my script to be loaded in the browser context as putting a CSP in place will simply force the browser to act as a WAF (Web Application Firewall) and then force the browser to not load any resources that is not properly defined in the CSP.

[jiab77 (Doctor Who)]

As promised, I’ve updated the README and mentioned your names.

Please let me know if I forgot someone.

[sec-con]

Heh, you got my description just right. I am a bit of a security nerd and I worked towards portable desktops since 2009, long before Microsoft, or others, launched their virtual desktop solutions. When Covid sprung early 2020 we could move home all the office workforce (1500) and they were able to keep working on their laptops, chromebooks, iphones, ipads, private devices and androids almost as if they where in office. We just needed to balance up server performance and delivery a bit.

Thanks.

As for your work, how would you have us report places/pages in IPFire where we do not see the theme implemented, like Mum Pitz and Roberto’s posts above, and how would you release update notifications? Github make sense for bugs, but new implementations, since those are not necessarily the same… ?

Sorry, I know this is early in the development process, just mentioning it. Document - document - document. Don’t forget code commenting.

(Yes, I am a bit of an ITIL and Process nerd as well )

[cfusco]

Actually, I have no experience whatsoever in web development. Besides the dark mode, I am learning a lot from your posts. Please, keep being as verbose as you feel necessary.

Thank you again for your work.

[cfusco]

I appreciate including my name, but I am afraid I do not deserve it. I did not give anything to improve your work besides just an encouragement. The others did bug reporting and that deserves recognition. As I said, I would not be able to help, as my knowledge of web development is very much 0, besides knowing the basic ideas. Maybe you should remove my name, or if you want to leave it should state the truth: i am just being positive about the project and your work

Regardless I am really grateful for being able to use dark mode and what I am learning from you in this thread.

[jiab77 (Doctor Who)]

Hi @sec-con ,

Heh, you got my description just right. I am a bit of a security nerd and I worked towards portable desktops since 2009, long before Microsoft, or others, launched their virtual desktop solutions. When Covid sprung early 2020 we could move home all the office workforce (1500) and they were able to keep working on their laptops, chromebooks, iphones, ipads, private devices and androids almost as if they where in office. We just needed to balance up server performance and delivery a bit.

I guessed it from your words but I’m glad to not have been wrong but if so, just let me know and I’ll change for the right thing.

I have a similar experience as yours and security has always been part of me since I’m a kid so I’m kinda obsessed by that

As for your work, how would you have us report places/pages in IPFire where we do not see the theme implemented, like Mum Pitz and Roberto’s posts above, and how would you release update notifications? Github make sense for bugs, but new implementations, since those are not necessarily the same… ?

Well initially I wanted to keep this space for discussions and announcements and not necessarily for bug reporting but I don’t want to force people to change their habits so if they feel more comfortable to report them here than on GitHub I’m fine with that and will always do my best to follow what’s going here and fix everything that is reported (if I can).

So if you find a bug or something that could be done better, feel free to create a new issue on GitHub or simply post here, both are fine to me

For the new updates, features, announcements and so on, I wanted to do them here if that’s fine for you all otherwise I can enable the GitHub Pages on the project and make a small website with more details. I’m open to every suggestions so if you have any ideas I’ll take a look at them

Sorry, I know this is early in the development process, just mentioning it. Document - document - document. Don’t forget code commenting.

No worries at all! As I said, all contributions, comments, suggestions are more than welcome! I usually document everything I’m doing and also commenting my code and make explicit commit messages for every changes.

As currently I don’t have much time during the day and only few hours during the evenings / nights, there is only on the weekends that I have more free time and usually take that free time for working on my projects. For the moment this project is still in its early phases so things that might missing now like comments, documentation and so on will be added at some point, it’s part of my development process.

(Yes, I am a bit of an ITIL and Process nerd as well )

All good, I had several ITIL trainings so I understand your care about such things

[jiab77 (Doctor Who)]

Hi @cfusco,

That’s surprising as you sounded to have a large knowledge / experience in the web development domain from what I could read from you

If you are very interested in the web development domain, feel free to write me, I can share you some nice resources that I’m using for my own projects

I’m glad to know that you’ve learned new things from my post and I’ll then not change my way of doing things. I just don’t want to be annoying for those who are coming here and get hit by huge and detailed posts

Thanks to you and all others for your nice comments and exchanges, I’m also learning from them

[jiab77 (Doctor Who)]

As you want, I don’t want to make you or anyone else uncomfortable with the fact that I’ve named them in the project.

To me, you’ve contributed as much as all others the way you could. Every contributions, ideas, comments is more than welcome! Really!

I’m learning new things everyday, it can be from here or from all the things I’m reading and doing during my days, no one can pretend (and should not) to know everything on everything, I mean, it’s just not possible

But if you really feel uncomfortable to have your name mentioned in the project, I’ll remove it, there is no problem at all! I just wanted to show my appreciation and recognition to everyone who contributed whatever the way they did it by mentioning their name in the project and nothing else.

I must go back to work, see you later guys

[mumpitz]

@cfusco

Once I saw a video in youtube of a guy trying IPFire and lamenting the absence of web design that works on mobile device.

mobile device works always fine for me, but normal in desktop view, I had never problems to check settings or something, but it depends how someone works with phones and and what is expected from the user…at the moment I use fennec with same addons and settings like on PC with firefox, even syncing the bookmarks

@jiab77

maybe I’ve missed something or it’s a browser related issue, I’ll check it.

for me doesnt work after the last update, tested chrome and firefox.
If I can help with providing error massages please tell me where to find or what should i do.

@jiab77

So as you might understand, it will quite heavy as work to do so it’s on low priority at the moment.

yes all right, I wanted only to mention it.

@jiab77

For such use case, there is nothing that I can do unfortunately and to be fully honest, trying to do so will be simply like attempting to break your own security in the goal to inject my Javascript code and this will definitely not be ethical

It is first line code without restrictions, not talking to others, all fine here.
I had a look in the develop console was is going on there, i did not understand one thing, but it looks quiet normal and harmless

@jiab77

I don’t want to do such things and it’s not the goal of this patch. As I said many times, I just made this patch to reduce the eye pain caused by the white backgrounds and certainly not as a mean to get access to your IPFire deployment and it will never be the case.

My Ipfire would also be little boring ether for you or others… it is only the firewall, they all look the same.

@jiab77

But this is actually the case for any scripts that is loaded from an HTML page, in someone does a MITM, place a proxy in the middle of you and your browser, anybody can intercept your script load and send you a modified one.

I think there are two things which you can do to prevent this, first the Network Boundary Shield from JShelter addon and second in no script addon in the advanced settings the cross-site request cleaned and the cross-tab protection against identity leaks always enabled, which provides similar protection.

And the small part of mine for this massive project, I feel very honored to be mentioned, but do I truly qualify for it? I have no professional relation to software or coding, a corresponding education I have also not received, rather I am the error that sits in front of the computer. The user, nothing more. Maybe a little more well-read on the subject of security and privacy than the usual Insta or TikTok user, but that’s it.
These recommendations on security and privacy I follow, the mechanics or reasonableness of the measures I can still follow, but am neither able to check that nor to validate the real effectiveness. Pure trust. The situation is similar here with this project. I make myself available as a tester and try to deliver results as good as I can. If this is enough to become part of the project, please write my nick in addition no problem.

[jiab77 (Doctor Who)]

Hi @mumpitz,

Sorry to reply you just now and not earlier, I’ve been quite busy

for me doesnt work after the last update, tested chrome and firefox.
If I can help with providing error massages please tell me where to find or what should i do.

This is quite sad to read… I’ll add a new section in the project README to explain how to check if running the latest version. I’m suspecting few things that might explain why it does not work on your side:

1. The update process failed and somehow did not installed the latest version
2. Something unexpected / unhanded happened during the update process and it created an SRI mismatch which then avoid loading the patch in the browser context (it should be reported in the web console as an error)
3. One of your extension is avoiding / blocking the patch to be loaded
4. Your browser version is too old and does not support SRI

I’d be happy to debug your issues but it’d be probably better to send me details in private and not here.
If you want to help me in the debugging process, I’d just need the following:

• screenshots from the web console reported errors
• version number of the JS file (it is in the comments at the top of the file)
• version number of the SH file that install the patch (same location, in comments at the top of the file)
• tested browser versions (as I’m always using the latest versions, sometimes my code does not work on older versions)

But if you prefer to debug things by yourself, no problem with that, just check the following:

• The SRI hash is stored in the SH file that install the JS file

• You must have the same SRI hash in the SH file and the line injected in functions.pl

  • You can see the injected line from your browser, on any WUI pages, check the source code and you’ll find it just before </body>
  

• If both SRI does not match, the JS file will not be loaded in the browser.

• You can also check the project on GitHub and see if you have the latest files

If everything match and still have issue with the patch then feel free to send me more details in private and I’ll try my best to debug it.

I had a look in the develop console was is going on there, i did not understand one thing, but it looks quiet normal and harmless

If you check the JS source code, you should find a constant called debugMode set to false. When I turn it to true locally, it will print much more details but it’s totally useless for the users, that’s why the JS file is released with this constant set to false and not true by default.

You can’t neither turn it to true on your side as it would then make the SRI hash invalid and so force your browser to not load the modified file.

These recommendations on security and privacy I follow, the mechanics or reasonableness of the measures I can still follow, but am neither able to check that nor to validate the real effectiveness. Pure trust. The situation is similar here with this project. I make myself available as a tester and try to deliver results as good as I can. If this is enough to become part of the project, please write my nick in addition no problem.

Quite funny to see that the website you’ve mentioned is not protected against JS code injections (I just did a quick test with my “Dark Mode” bookmarklet)

They could have just implemented a basic CSP and it would have protected the website against JS code injections… So I find that funny to see many websites talking about security and privacy measures to follow but fails to follow them on their side…

As a side note, it’s how many browser extensions works, by injecting some JS code inside the page you’ve loaded but I haven’t checked if these extensions still works on websites that has a CSP defined. I’ll try to do some tests and let you know about it here.

If this is enough to become part of the project, please write my nick in addition no problem.

Yes it is, I’m valuing every contributions to the project and you did contributed to the project the way I’m seeing things, by testing and reporting issues and also by sharing your ideas.

Anyway, as now I should have more spare time to work on the project, all the previously reported issues should be fixed in the next releases. I’ll just ask you to be patient as tracking and patching all the tables is sometimes very tricky and takes quite some time

I’ll post here when it’s released

[cfusco]

@jiab77 I have a question, which will show the full extent of my ignorance. If designed from scratch, Is it possible to have a complex project like the IPFire WUI done exclusively in HTML and CCS, no js at all?

[jiab77 (Doctor Who)]

@cfusco, don’t be that mean to you, it’s not ignorance, no one can know everything on everything but to the best of my knowledge, it’s not possible for the following reasons:

• Language capacities:

  • HTML is just like a “container” language, it’s static, you can’t animate things with it
  • CSS is just a design language, think about it a compagnon for HTML, it will give the style and allow you to present your HTML better and additionally with CSS v3, give you the possibility to animate things without Javascript
  • As you might understood now, both languages are not made for interacting outside of the browser and so can’t execute any commands on your machine or remote ones like your IPFire box

• Security:

  • For security reasons, every web browsers will not allow client side code to interact outside of their context which means that client side code can’t read files on your machine or create new ones unless it is malicious and made for exploiting vulnerabilities related to your browser that will then allow the client side malicious code to break these boundaries and so get allowed to mess with your computer or those connected to the same network but this would be possible only with Javascript and not with HTML and CSS. You can probably create some kind of buffer overflow with maliciously crafted CSS rule that will make your browser going nuts but aside of that, I don’t see what very harmful things you can do with just CSS

• Client / Server boundaries:

  • Without malicious intents and without something that listens for commands on a remote server, you can’t interact with things running outside of your browser
  • For a web interface being able to run commands on server side, you then need a server side language like PHP, Python, Perl, NodeJS and so on
  • These server side languages will then use / embed / generate client side languages to then grab user interactions and execute what the user want but only if the logic has been implemented on server side

So, what does all of this means? (you might ask yourself)

Well, basically it means that HTML and CSS are not enough for building a WUI if that WUI must interact / run commands on a machine, local or remote and you will either need Javascript and server side languages to handle user interactions. The work gets even more difficult / challenging when you have to ensure that what you’ve made can’t be turned malicious and allow bad actors to mess with your environment.

If I may say things differently, it’s one of the reason that the IPFire WUI does not store or read anything from client side, it’s to avoid creating any security hole and allow malicious code injected from client side to hit your IPFire box remotely.

In this project, I must pay the same attention and make sure that no malicious code can be injected from where I read the theme preference and not read it blindly without proper sanity and security checks.

Hope to have replied to your question correctly and don’t hesitate to ask questions, I’ll always try my best to reply them as best as I can

[cfusco]

@jiab77 Thank you. Follow up question, actually more a clarification. IPFire uses a lot of Perl code, server side. Is it possible to use just HTML + CSS (client side) and Perl (server side)? If yes, would not be more secure than HTML + CSS + js (client side) and Perl (server side)? Again, if yes can I assume the coding would be more challenging?

[jiab77 (Doctor Who)]

@cfusco, You’re obviously right, not using Javascript would be the best and it’s planned to be removed when I’ll make the necessary work for creating an add-on. Currently the Javascript is used to detect the page that needs to be patched conditionally and apply global CSS overrides for the rest.

Working on the add-on will remove that Javascript dependency but will follow the same override logic and will be more challenging as I’ll then have to patch the IPFire CSS file or create a dedicated one, patch the Perl files that add them to the WUI and also alter other Perl files to add the theme selector.

So all the work will be on server side instead of client side as it is currently and it will ask me also to increase my current knowledge in Perl development. For the moment I just know enough to read Perl code but not enough to write it from scratch.