Web Log

Build a raspberry pi webcam server using motion

Tuesday 25 July 2017 by Laposa UK

Install

$ apt install motion

$ vi /etc/motion/motion.conf

Find the following lines and make the following changes.

daemon on

$ vi /etc/default/motion

Make the following change:

start_motion_daemon=no -> start_motion_daemon=yes

Next we need to make sure the motion capture directory is writable

$ chmod 777 /var/lib/motion

Now make sure the camera is connected and start the service with the command:

$ service motion start

To stop the service, the command is:

$ service motion stop

Check locally

Now you can view the camera from a browser on the Pi (or other computer if stream_localhost was set to off) by connecting to your Pi’s IP address and Motion’s default port 8081

http://localhost:8081

Make available from public web server

On motion machine

$ crontab -e

@reboot /usr/local/bin/open_tunel &

$ vi /usr/local/bin/open_tunel

#!/bin/sh -e
autossh -M 0 -f -T -N mywebserver.example.org -g -R 0.0.0.0:8081:localhost:8081

On public web server machine

vi /etc/apache2/sites-available/mywebserver.example.org-ssl.conf

ServerName mywebserver.example.org

VirtualDocumentRoot /srv/mywebserver.example.org/public_html

SSLCertificateFile /etc/letsencrypt/live/mywebserver.example.org/fullchain.pem

SSLCertificateKeyFile /etc/letsencrypt/live/mywebserver.example.org/privkey.pem

Include /etc/letsencrypt/options-ssl-apache.conf

ProxyPass /motion http://localhost:8081

ProxyPassReverse /motion http://localhost:8081

ProxyPass /motion.jpeg http://localhost:8081

ProxyPassReverse /motion.jpeg http://localhost:8081

</VirtualHost>

</IfModule>

Onxshop security design

Monday 3 July 2017 by Laposa UK

One great security feature Onxshop has is the way how user uploaded files are saved. Onxshop is saving all files outside of web folder, which means that it is not possible to execute any files uploaded by users.

Here is an example how effective the Onxshop way is agains this type of security hole.

On our demo site, which is open to public CMS users, somebody tried to upload this .htaccess file, which allows to interpret PNGs as PHP script files.

var/files/.htaccess
AddType application/x-httpd-php .png

The attacker then uploaded a script similar to this:

var/files/png.png
<?php # Web Shell by oRb
$auth_pass = "63a9f0ea7bb98050796b649e85481845";
$color = "#df5";
$default_action = 'FilesMan';
$default_use_ajax = true;
$default_charset = 'Windows-1251';
preg_replace("/.*/e","********");

Of course, it was rendered as completely useless and the attacker didn't gain any access to the website.

For example in Wordpress, backdoors can be hidden in scripts similar to this: /wp-content/upgrade/wp-mails.php

It looks like a genuine Wordpress script, but it's actually a file uploaded under a CMS user. This type of files are then used for sending spams, or executing DDoS attack.

Canvas, WebGL and HTML5 banners

Thursday 12 January 2017 by Hugo Dvorak

Our clients often asks us what is the difference. So here is a short explanation.

Canvas and WebGL are both part of the HTML5 standard.

WebGL is an API for rendering interactive 3D graphics. It provides a special language (similar to C++) which you use to describe a 3D scene (objects, light sources, camera position, textures, etc.). With that language you can describe things like “a sphere with marble texture in the centre of the scene”, “a red directional light pointing from the corner of the scene to the centre” etc.

Canvas is an HTML tag which appears in the browser as a rectangular area on the page. It’s up to you what you show in the area. There is Canvas 2D API for that. You do things like “draw a 1px blue line from 0,0 to 100,200” or "draw a red circle at position 20,30” or "fill canvas with black colour” or “draw image XYZ at position 10,10” etc. That’s what we use for HTML5 banners.

Eventually you can combine both for 3D graphics. You render the 3D scene defined by WebGL in the context of the Canvas. Canvas behave as any other HTML element. You can define it’s position on the page, dimensions and even make it responsive. Each HTML5 banner, for instance, is a separate Canvas element.

Basket