Site Blog

13
Feb

Testing Free-Source.net from mobile phone

in Thoughts
 SonicE      Comments: 0    
I'm just sitting in a public area and testing veskoto's new nokia phone and its browser. Well, I need to say 'Good job to all from the FS Team'. There are some small JS bugs, but I'll fix them in a zero time :). It is a time that we need to start optimize all of our work not only for all major browsers, but also for mobile phones. Until then - it's party time!

PS: Sorry for any typos, I'm typing on phone keyboard.
03
Feb

Start using 960 grid system in your e107 themes

in Design
 SonicE      Comments: 0    
Start using 960 grid system in your e107 themes

Overview


The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem (source http://960.gs)

In addition to this I need to say that you can use this great grid system not only with 12 or 16 columns grid. You can also create your own grid based on 18, 20, 22, 24 ... XX columns. The point of 960px is that it subdivides nicely into lots of equal column sizes so is a very versatile width. It also happens to be slightly less than the minimum width you can actually use when a browser is maximized on a 1024 pixel wide display. As you might have heard, we've already created an e107 theme Blue City using this great concept. In this blog post I'll try to explain you how to use 960 Grid System in your e107 themes.

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Why using a grid sytem?


The answer is very simple. It saves time when writing your HTML and CSS code and is easy to use. It is also very useful in creating the graphic design for your theme.

Tools


You can use various tools in your theme creation process.


Graphic Design


Well I'm not a guru in creating graphic concepts, because we have one of the best designers in e107 (and not only e107) Stoewarius, nevertheless I'll show you how to use 960 Grid System in your graphic design. I my all day work I prefer to use Adobe Fireworks for slicing but you can also us Adobe Photoshop. Go to http://960.gs and download the template package.



Inside this package you can find useful templates for your preferred graphic software. I'll use the 12 column one for Fireworks. Browse the package to /templates/fireworks and open 960_grid_12_col.png. As you can see there are 12 red columns and this is your working grid. Every column is 60px wide with 10px left and 10px right margin. The whole width is 960px and the real content width is 940px.



With this template you can easy create you layout. Let say you need in your header logo and banner areas, left column, center column and two menu areas after the header area. I'll not create a real design for a theme, I'll only show you how to use this grid system for your layout.

Full view


Using 960.css


The ZIP you've already downloaded (download again) comes with a lot of stuff to help you design with the 960 system, including PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop, Visio, and CSS framework with demo HTML. We'll only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.

  • 960.css – Sets up the grid system, the 12-, and 16-column containers, alpha, omega, and prefix. This file is necessary to the grid system.
  • reset.css - “Initializes” the system so that all margins and paddings are 0, outline is 0, etc… This file is necessary to the grid system.
  • text.css - Sets the font sizes including headers, adds margins to lists, etc… This file is not technically needed for the 960 grid system - we can ignore this file

960.css uses the following classes to structure the page:

  • container_XX is used in the outermost box to determine how many columns. You can use container_12 or container_16.
  • grid_XX is the bread and butter of the system. XX is for how many columns you want the block to be. For example, grid_10 will be 10 columns wide. The exact pixel width is determined by how many columns you’ve divided the grid into.
  • prefix_XX allows you to add in blank columns before a block. XX specifies how many blank columns you want.
  • sufix_XX allows you to add in blank columns aftera block. XX specifies how many blank columns you want.
  • push_xx and pull_xx. These classes can be used for "Content first" layouts.
  • alpha is for if you have children blocks. If you do this, you’ll want the first child to have no margin on the left side. alpha makes that happen.
  • omega is similar to alpha, except that it gives no margin on the right side. Use it for the last child
  • clearfix and clear - Clear Floated Elements, more info at http://sonspring.com/journal/clearing-floats and http://perishablepress.com/press/2009/12/06/new-clearfix-hack


There are lot of tutorials over the web on how to combine and use all this classes.

960 in action


Now it is a time to start creating your first 960gs based theme. Copy 960.css to your theme folder. Open theme.php and add these lines to the theme_head function.

  1.  
  2. function theme_head() {
  3. echo '
  4.         <link rel="stylesheet" href="'.THEME_ABS.'960.css" type="text/css" media="all" />
  5. ';
  6. }
  7.  


Because theme_head function will load after the main style.css file we need to put the contents of reset.css at the top of your style.css. Copy the code from reset.css and paste it to the top of style.css

The last step is to create your $HEADER and $FOOTER. You can easy create your HTML code for the layout without any line of CSS code. Everthing is don by 960.css.

  1. //In the code below remove the empty space after the " { " (left curly brace )
  2. $HEADER = '
  3. <div class="container_12 clearfix">
  4.         <!-- HEADER BOF -->
  5.         <div class="grid_5">
  6.                 <!-- Add your LOGO and SITENAME content here -->
  7.         </div>
  8.         <div class="grid_7">
  9.                 <!-- Add your BANNER SHORCODE here -->
  10.         </div>
  11.         <div class="clear"></div>
  12.         <!-- HEADER EOF -->
  13.        
  14.         <!-- AREA 2 BOF -->
  15.         <div class="grid_6">
  16.                 { SETSTYLE=menu_area}
  17.                 { MENU=2}
  18.         </div>
  19.         <!-- AREA 2 EOF -->
  20.         <!-- AREA 3 BOF -->
  21.         <div class="grid_6">
  22.                 { SETSTYLE=menu_area}
  23.                 { MENU=3}
  24.         </div>
  25.         <!-- AREA 3 EOF -->
  26.         <div class="clear"></div>
  27.        
  28.         <!-- AREA 1 BOF -->
  29.         <div class="grid_4">
  30.                 { SETSTYLE=menu_area}
  31.                 { MENU=1}
  32.         </div>
  33.         <!-- AREA 1 EOF -->
  34.         <!-- MAIN CONTENT BOF -->
  35.         <div class="grid_8">
  36.                 { SETSTYLE=center}
  37. ';
  38.  
  39. $FOOTER = '    
  40.         </div>
  41.         <!-- MAIN CONTENT EOF -->
  42.         <div class="clear"></div>
  43.        
  44.         <!-- FOOTER BOF -->
  45.         <div class="grid_12">
  46.                 <!-- Add your footer content here -->
  47.         </div>
  48.         <div class="clear"></div>
  49.         <!-- FOOTER EOF -->
  50. </div>
  51. ';
  52.  


As you can see your layout is done by these few lines. The only thing you need to remember is that you always need to add DIV with class CLEAR after every grid column combination. Every grid_xx is floated to the left and you need to clear these floats to start a new "row" with columns.

I hope this post was helpful. Just try 960.gs and you'll find how easy to use is this grid system and how many time you'll save when writing your code. Happy coding !!!
29
Jan

eCheck Security PHP tool - find malware on your site

in Security
 SecretR      Comments: 7    

Overview


eCheck Seciruty is a tiny tool for detecting malicious PHP scripts and code portions on your website. It was originally build to check e107 CMS based sites, but it can be actually used on any kind of PHP based projects.
This tool is licensed under GNU General Public License - http://www.gnu.org/licenses/gpl.txt

Before you start using the tool, I have to warn you - DON'T PANIC when you first see the 'suspicious' results. Be sure you read the 'Analyzing the results' chapter.

Download most recent version of eCheck Seciruty here

Shell script (echeck.php)


Copy echeck.php somewhere on your server. In this example I'm copying it in /home/secretr/
  1. [secretr@SecretR /]$ cd /home/secretr/
  2. [secretr@SecretR ~]$ ./echeck.php -v
  3. eCheck 1.0 beta
  4. Report issues or get help on http://free-source.net or irc://irc.freenode.org/e107
  5. [secretr@SecretR ~]$


You can always get quick help
  1. [secretr@SecretR ~]$ ./echeck.php -v
  2. eCheck 1.0 beta
  3. Report issues or get help on http://free-source.net or irc://irc.freenode.org/e107
  4.  
  5. [secretr@SecretR ~]$ ./echeck.php -h
  6. This is a command line PHP script for checking for/cleaning PHP malicious code.
  7.  
  8. Usage:./echeck.php [options] /path/to/wwwroot
  9. Options:
  10. -v                      Script version
  11. -I                      Output a list with infected files only
  12. -S                      Output a list with suspected files only
  13. -C                      Clean files (MAKE A BACKUP BEFORE DOING THIS), confirmation is required
  14. -r number            Directory depth level
  15.  
  16. [secretr@SecretR ~]$


Now, the only thing you need to know is the path to your web root (e107 root for e107 user). In my case this is /home/secretr/public_html and my e107 Installation is located in e107_0.7 folder. There are two alternatives. You could let eCheck know the path to your web root:
  1. $ ./echeck.php -I -S ./public_html/e107_0.7/

or the opposite - navigate to web root and call the script with the proper path:
  1. [secretr@SecretR ~]$ cd public_html/e107_0.7/
  2. [secretr@SecretR e107_0.7]$ /home/secretr/./echeck.php -I -S ./


Here is the output of eCheck scan on fresh e107 v0.7 CVS copy:
  1. [secretr@SecretR ~]$ ./echeck.php -I -S -r 10 ./public_html/e107_0.7/
  2. Directory depth set to 10
  3.  
  4. ./public_html/e107_0.7/backend.php...SUSPECTED (shell execution)
  5. ./public_html/e107_0.7/e107_plugins/pdf/pdf.sc...SUSPECTED (shell execution)
  6. ./public_html/e107_0.7/e107_handlers/resize_handler.php...SUSPECTED (shell execution)
  7.  
  8. Files checked: 1040
  9. Files suspected: 3
  10. Files infected: 0
  11. Files cleaned: 0
  12. Clean errors: 0
  13. Clean warnings: 0
  14.  
  15. NOTE: SUSPECTED DOES N0T MEAN INFECTED! DIFF AGAINST TRUSTED COPY OF SUSPECTED FILES TO BE SURE EVERYTHING IS OK.
  16. SUSPECTED FILES ARE NOT CLEANED!
  17.  
  18. [secretr@SecretR ~]$

There is (still experimental) cleanup option you could try if eCheck finds files marked as INFECTED. I recommend to make a backup of your files first. Additionally, you need write permission on all checked files (e.g. run eCheck as root) and your PHP version should be at least 5.0.
I'll put infected and real malicious files inside my local e107 system to show you what happens:
  1. [secretr@SecretR ~]$ ./echeck.php -C -I -S ./public_html/e107_0.7/
  2. Directory depth set to 100
  3.  
  4. Did you make a backup? Be sure you did it!  Type 'yes' to continue:
  5.  

You need to confirm (type yes and press enter) to continue the operation
  1. [secretr@SecretR ~]$ ./echeck.php -C -I -S ./public_html/e107_0.7/
  2. Directory depth set to 100
  3.  
  4. Did you make a backup? Be sure you did it!  Type 'yes' to continue: yes
  5. ./public_html/e107_0.7/echeckwww.php...SUSPECTED (eval/base64_decode found)
  6. ./public_html/e107_0.7/backend.php...SUSPECTED (shell execution)
  7. ./public_html/e107_0.7/index.php...INFECTED...CLEANED
  8. ./public_html/e107_0.7/e107_plugins/pdf/pdf.sc...SUSPECTED (shell execution)
  9. ./public_html/e107_0.7/e107_files/public/shell.php...SUSPECTED (eval/base64_decode found)
  10. ./public_html/e107_0.7/e107_handlers/resize_handler.php...SUSPECTED (shell execution)
  11.  
  12. Files checked: 1043
  13. Files suspected: 5
  14. Files infected: 1
  15. Files cleaned: 1
  16. Clean errors: 0
  17. Clean warnings: 0
  18.  
  19. NOTE: SUSPECTED DOES NOT MEAN INFECTED! DIFF AGAINST TRUSTED COPY OF SUSPECTED FILES TO BE SURE EVERYTHING IS OK.
  20. SUSPECTED FILES ARE NOT CLEANED!
  21.  
  22. [secretr@SecretR ~]$

Our index.php was infected with known infection, so eCheck was able to clean it. Note we have one new line - './public_html/e107_0.7/e107_files/public/shell.php'. We'll talk about this one later.

One last example - let's execute eCheck as root (your current user should be sudoer), output everything (all checked files) and write the output to a file - log.txt in our case.
  1. [secretr@SecretR ~]$sudo ./echeck.php ./public_html/e107_0.7/ > ./log.txt
  2. [secretr@SecretR ~]$cat log.txt | more
  3. Directory depth set to 100
  4.  
  5. ./public_html/e107_0.7/install_.php....CHECKING...OK
  6. ./public_html/e107_0.7/user.php....CHECKING...OK
  7. ./public_html/e107_0.7/rate.php....CHECKING...OK
  8. ./public_html/e107_0.7/search.php....CHECKING...OK
  9. ./public_html/e107_0.7/online.php....CHECKING...OK
  10. ./public_html/e107_0.7/fpw.php....CHECKING...OK
  11. ./public_html/e107_0.7/print.php....CHECKING...OK
  12. ./public_html/e107_0.7/upload.php....CHECKING...OK
  13. ./public_html/e107_0.7/page.php....CHECKING...OK
  14. ./public_html/e107_0.7/links.php....CHECKING...OK
  15. ./public_html/e107_0.7/e107_languages/English/lan_notify.php....CHECKING...OK
  16. ./public_html/e107_0.7/e107_languages/English/lan_np.php....CHECKING...OK
  17. ./public_html/e107_0.7/e107_languages/English/lan_usersettings.php....CHECKING...OK
  18. ./public_html/e107_0.7/e107_languages/English/lan_membersonly.php....CHECKING...OK
  19. ./public_html/e107_0.7/e107_languages/English/lan_sitelinks.php....CHECKING...OK
  20. ./public_html/e107_0.7/e107_languages/English/lan_upload_handler.php....CHECKING...OK
  21. ./public_html/e107_0.7/e107_languages/English/lan_fpw.php....CHECKING...OK
  22. ./public_html/e107_0.7/e107_languages/English/lan_download.php....CHECKING...OK
  23. --More--
  24.  



Scan via a browser (echeckwww.php)


For those who don't have shell access to their sites (most common case for shared hosting) there is an alternative.
Copy echeckwww.php to your site root (in my case /home/secretr/public_html/e107_0.7/) and just call it in your favorite browser like this:
yoursite.com/echeckwww.php
You should see something like this (click to enlarge)
Full view


Keep in mind you don't have any options you can set in this case. Auto-clean is not available as well


Analyzing the results


Scripts are analyzed in two ways:
  • Known infections - based on hackers code infection that I inspected in the time - files are added to output list as INFECTED, auto-cleaning is possible in some cases - on your responsibility though ;)
  • Suspected infections (heuristics) - based on most common hackers habits - files are added to output list as SUSPECTED, cleaning is not possible


Suspected doesn't mean files are infected in some way. Most of the phrases (generic php functions) are used in all kind of software. The process of analyzing the results is your responsibility. If you know the structure of your site, and you have generic knowledge of 'what, where happens', it would be easy to identify the problems (if there are any).

I'll use the example above, more precisely this line from our latest shell example:
  1. ./public_html/e107_0.7/e107_files/public/shell.php...SUSPECTED (eval/base64_decode found)

Every e107 user should know that /e107_files/public/ folder should not contain any scripts. Experienced admins would know what to do from now on - checking the file last modified date and investigating the Apache logs to find out how was this file uploaded on the server, eventually reporting the problem to e107 core team.
In other hand we see
  1. ./public_html/e107_0.7/backend.php...SUSPECTED (shell execution)
  2. ./public_html/e107_0.7/e107_plugins/pdf/pdf.sc...SUSPECTED (shell execution)
  3. ./public_html/e107_0.7/e107_handlers/resize_handler.php...SUSPECTED (shell execution)

lines are appearing on and on. These are the false positives I'm talking about. You'll have many of them on a live site with a lot of 3rd party code. You just need to investigate all you see - it's pretty easy to distinguish malicious from creative code.

Where can I get help?



Showing posts 1 to 3 from 3

Blog categories

Security (1)
Design (1)
Thoughts (1)

All categories