20. Oktober 2015

Apache: Force Secure (SSL) Pages

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourdomain.com/$1 [R,L]

RewriteEngine On

RewriteCond %{SERVER_PORT} 80

RewriteRule ^(.*)$ https://yourdomain.com/$1 [R,L]

15. September 2015

First steps to Install a Comodo SSL certificate

Simple SSL certificates are easily obtained and installed these days. Here some simple first steps to get a Comodo SSL certificate installed.

Generate a Certificate Signing Request (CSR) with OpenSSL

openssl genrsa –des3 –out yourdomain_com.key 2048 openssl req -new -key yourdomain_com.key -out yourdomain_com.csr

1
2

openssl genrsa –des3 –out yourdomain_com.key 2048
openssl req -new -key yourdomain_com.key -out yourdomain_com.csr
Choose and register your certificate, with the CSR created.
You will receive your Domain Certificate and the Comodo CA Certificates
Many apps need your Certificate Authority Chain (CA) in a single file, something that you easily forget ! Combine the files from Comodo into a single file:

cat yourdomain_com.crt COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt AddTrustExternalCARoot.crt > cacert.pem

1

cat yourdomain_com.crt COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt AddTrustExternalCARoot.crt > cacert.pem
Now you can install your files and activate SSL. Documentation: Apache / NGINX
Some hosts allow you to add certificates through a simple interface, asking for Certificate, Private Key, CSR and the CA chain.

VERIFY YOUR SSL SETUP

Some options to check your SSL setup:

https://verifysslcertificate.com
https://www.ssllabs.com/ssltest/analyze.html
https://sslanalyzer.comodoca.com/
openssl s_client -showcerts -connect yourdomain.com:443

1

openssl s_client -showcerts -connect yourdomain.com:443

CREATE CERTIFICATE CHAIN AUTOMATICALLY

This can be done manually, as shown above or you can use a shell script, which downloads the certificates for you and combines them. SSL certificate chain resolver – This shell script downloads all intermediate CA certificates for a given SSL server certificate. There is even an online version, but I rather do that on my own machine :) … certificatechain.io

Enjoy coding …

9. September 2015

PHP 5.6 + phpMailer + WordPress + Connection Errors

Since version 5.6+ PHP is verifying peer certificates and host names by default when using SSL/TLS. This is causing problems on some servers / websites, where the config has not been setup correctly. If you can not fix the setup yourself, make sure to talk to your server host to fix that issue.

For PHPMailer (Github) there is a workaround:

$mail->SMTPOptions = array(
    'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false,
        'allow_self_signed' => true
    )
);

$mail->SMTPOptions = array(

'ssl' => array(

'verify_peer' => false,

'verify_peer_name' => false,

'allow_self_signed' => true

)

);

This should only be a workaround until your configuration has been fixed. You are suppressing certificate verification and compromising your security!

As WordPress is using PHPMailer as its main email library, this can be tweaked by using the phpmailer_init hook:

add_action( 'phpmailer_init', 'configure_smtp'  );

function configure_smtp( $phpmailer ){
 $phpmailer->SMTPOptions = array(
    'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false,
        'allow_self_signed' => true
    )
 );
}

add_action( 'phpmailer_init', 'configure_smtp' );

function configure_smtp( $phpmailer ){

$phpmailer->SMTPOptions = array(

'ssl' => array(

'verify_peer' => false,

'verify_peer_name' => false,

'allow_self_signed' => true

)

);

}

Add this to your themes functions.php.

BASIC PHPMAILER SETUP

$phpmailer = new PHPMailer();
$phpmailer->isSMTP();
$phpmailer->CharSet = 'UTF-8';
$phpmailer->SMTPSecure = "ssl"; // or tls
$phpmailer->SMTPAuth = true; 
$phpmailer->Username = _APP_EMAIL_FROM;
$phpmailer->Password = _APP_EMAIL_PASS;
$phpmailer->XMailer =' ';
$phpmailer->Host= "correct email host";

$phpmailer = new PHPMailer();

$phpmailer->isSMTP();

$phpmailer->CharSet = 'UTF-8';

$phpmailer->SMTPSecure = "ssl"; // or tls

$phpmailer->SMTPAuth = true;

$phpmailer->Username = _APP_EMAIL_FROM;

$phpmailer->Password = _APP_EMAIL_PASS;

$phpmailer->XMailer =' ';

$phpmailer->Host= "correct email host";

And here is how phpmailer->smtpOptions should be used, on a properly configured server:

phpmailer->smtpOptions = array(
'ssl' => array(
          'peer_name'		  => 'your.domain.com',
          'verify_peer_name'    => true,
          'capath' 		     => '/path/to/authority/certificates/directory' # Usually /etc/ssl/certs or /usr/lib/ssl/certs/
          'local_cert' 		  => '/path/to/your.domain.com.crt', # Should be a combined cert & key in pem format
          'verify_peer'            => true,
    )
);

phpmailer->smtpOptions = array(

'ssl' => array(

'peer_name' => 'your.domain.com',

'verify_peer_name' => true,

'capath' => '/path/to/authority/certificates/directory' # Usually /etc/ssl/certs or /usr/lib/ssl/certs/

'local_cert' => '/path/to/your.domain.com.crt', # Should be a combined cert & key in pem format

'verify_peer' => true,

)

);

SSL changes in PHP 5.6: http://php.net/manual/en/migration56.openssl.php
SSL context options in PHP: http://php.net/manual/en/context.ssl.php

Enjoy coding…

9. Juni 2015

Saving files in WordPress using the Filesystem_API

When building plugins or addons, sometimes we need to save custom files within WordPress.

These can be custom JavaScript or CSS files that a user edited and are loaded to override core functionality.

In most cases inline styles and scripts are an option, but not always the most elegant way. Everyone has to decide that for themselves. (wp_add_inline_style) Not talking about performance between inline and external files here :)

Another option is the wp_head action:

add_action('wp_head','hook_css');

function hook_css(){
$output="<style> .wp_head_example { background-color : #f1f1f1; } </style>";
echo $output;
}

add_action('wp_head','hook_css');

function hook_css(){

$output="<style> .wp_head_example { background-color : #f1f1f1; } </style>";

echo $output;

}

WHERE

Many ask where can or should I save files created within a plugin.

In the plugin folder ? Bad idea, as that folder will be deleted on each upgrade of the plugin.
In a separate plugin, just for those extra files. That is an option, but many webmasters prevent writing to any other folder than the upload folder. Also adding a blank plugin to just add upload folders is not really optimal.
In the upload folder itself. Just like the name says, its the main folder to upload files to!

SECURITY

When dealing with file creation and uploads, security is always important. That relates to any other platform doing similar operations. A folder created within a plugin directory is not less or more secure than a folder created in the upload directory.

Its important to have the correct file and folder permissions set:

Files should have permissions not higher than 664 (start at 644)
Directories should have permissions not higher than 755 (start at 744) Try what works. The lower the more secure :)

There is a detailed article about permissions over at WordPress as well.

When it comes to creating files in PHP the term cross-site-scripting often comes up. When the system creates a file it is owned by the webserver and on a shared hosting account those files could be altered by another user on the same webserver. This could allow them to inject malicious code and compromise your sever.

That is why the WP_Filesystem was created, to make things more secure and make sure that the owner of files is correct.

CREATING FILES

WordPress provides a nice clean interface to create folders and save files to the upload folder. Here a simple example from one of my current projects.

Prepare the filesystem

require_once( ABSPATH . 'wp-admin/includes/file.php' );
global $wp_filesystem;

1 2	require_once( ABSPATH . 'wp-admin/includes/file.php' ); global $wp_filesystem;

Get upload dir information and prepare directory to save to

$upload_dir = wp_upload_dir();

$dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/';

$upload_dir = wp_upload_dir();

$dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/';

Check if file exists, create folder, delete similar and save.
In my case I am adding a custom key and the page id to the file.

$key = md5($js);

if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) {				
    
    WP_Filesystem(); 
    // Create main folder within upload if not exist
    if(!$wp_filesystem->is_dir($dir) )
    {
        $wp_filesystem->mkdir( $dir ); 
    }
    // Create a subfolder in my new folder if not exist
    if(!$wp_filesystem->is_dir($dir."/subfolder") )
    {
        $wp_filesystem->mkdir( $dir."/subfolder" ); 
    }
    // Delete similar files, might not apply to you
     foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) {
        unlink($filename);
    }   
    // Save file and set permission to 0644
    $wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 ); 
    
}

$key = md5($js);

if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) {

WP_Filesystem();

// Create main folder within upload if not exist

if(!$wp_filesystem->is_dir($dir) )

{

$wp_filesystem->mkdir( $dir );

}

// Create a subfolder in my new folder if not exist

if(!$wp_filesystem->is_dir($dir."/subfolder") )

{

$wp_filesystem->mkdir( $dir."/subfolder" );

}

// Delete similar files, might not apply to you

foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) {

unlink($filename);

}

// Save file and set permission to 0644

$wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 );

}

If the direct way is not possible, you can also use or force the FTP approach
(request_filesystem_credentials).

This will check for the ftp credentials and request them with a form if needed.

if ( ! WP_Filesystem($creds) ) {
      request_filesystem_credentials($url, $method, true, false, $form_fields);
    return true;
}

if ( ! WP_Filesystem($creds) ) {

request_filesystem_credentials($url, $method, true, false, $form_fields);

return true;

}

This is just a very rough outline of how to do it, but should get you started.

Enjoy coding …

22. Mai 2015

Concurrent connections – Server – Cloud & RAM

Multiple connections, happening roughly within a 500 milliseconds timespan, can be called a concurrent connection.

So when looking at new server hardware, you have to think hard, if you will actually hit a certain concurrent connection limit at some point.

REAL LIFE EXAMPLE

So lets say, you publish a campaign in a magazine, promoting a special offer through a single page website.

To calculate the possible concurrent connections, you would need to know roughly how many readers the magazine has.

The chance that all of them reading and visiting at the same time is almost impossible.

So lets say the magazine has 50.000 readers and roughly 1% hit your website at the same time.

In that case you would need a server setup that can handle 500 concurrent users.

MOBILE APPS

These things are more important, when building Mobile Apps. With a popular App you can easily hit those concurrent user limits. This is where cloud solutions become really handy and help to level the traffic requirements. A good example is Parse.

RAM LIMITS

The chance of your server hitting a concurrent connection limit is often not as critical as hitting a RAM limit :)

…enjoy coding

10. Mai 2015

Shield.io – Quality metadata badges for your open source project

Pixel-perfect
Retina-ready
Fast
Consistent
Hackable
No tracking

Shield.IO

5. Mai 2015

Optimizing Typekit font loading

When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that.

Both are using WebFont Loaders to help handle those brief moments.

TypeKit Webfont Loader Example

(function(d) {
    var config = {
      kitId: '***' , // Your Kit ID
      scriptTimeout: 3000
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);

(function(d) {

var config = {

kitId: '***' , // Your Kit ID

scriptTimeout: 3000

h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

})(document);

This adds a class name to the <html> element during loading

<html class="wf-loading">

1	<html class="wf-loading">

This is removed when loading is done. This allows us to hide content until all fonts are loaded.

Webfonts Loading

.wf-loading * {
     opacity: 0;
}

.wf-loading * {

opacity: 0;

}

This also adds classes once the webfonts have been loaded, which allows us to add some transitions to reveal the content again.

Webfonts Loaded

.wf-active *, 
.wf-inactive * {
    -webkit-transition: opacity 1s ease-out;  
    -moz-transition: opacity 1s ease-out; 
    -o-transition: opacity 1s ease-out;  
    transition: opacity 1s ease-out;  
}

.wf-active *,

.wf-inactive * {

-webkit-transition: opacity 1s ease-out;

-moz-transition: opacity 1s ease-out;

-o-transition: opacity 1s ease-out;

transition: opacity 1s ease-out;

}

One last thing. You should add the webfont loader early in your content, so that it can do its magic before anything else is being loaded.

15. April 2015

Check & Add GZIP Browser Compression

Compressing your content saves bandwidth and improves render time, particular on devices with slow internet connections. Compression allows your web server to provide smaller file sizes that load faster for your visitors. Compression of your HTML and CSS files with gzip typically saves around 50 to 70 % of the file size.

Check if GZIP Compression is active on your website

Adding GZIP Compression via your htaccess (Apache)

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

</files>

Adding GZIP Compression on NGINX

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

gzip on;

gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems

gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6

gzip_vary on;

Adding GZIP Compression via a WordPress Plugin

A good candidate is the WP Far Future Expiration Plugin ,which not only activates GZIP compression but adds file expiration for various static file types.
Link

Check speed improvement before and after

28. Februar 2015

Reading up on IMAP specifications

Currently reading up on the IMAP protocol, as one of my customers is using a server without IMAP support compiled :)

RFC 3501

I will be using a simple INBOX check for failed email notifications (sockets are your best friend). That will allow me to set a flag for every new user account that is still unconfirmed and used a broken email address for their registration. These accounts can than be verified manually :)

Happy socket = happy customer.

Btw, here is a nice piece of code to quickly parse the email header in PHP

$parsed  = array();
$blocks  = preg_split('/\n\n/', $response['data']);
$lines   = array();
$matches = array();
foreach ($blocks as $i => $block) {
    $parsed[$i] = array();
    $lines = preg_split('/\n(([\w.-]+)\: *((.*\n\s+.+)+|(.*(?:\n))|(.*))?)/',
                        $block, -1, PREG_SPLIT_DELIM_CAPTURE);
    foreach ($lines as $line) {
        if(preg_match('/^\n?([\w.-]+)\: *((.*\n\s+.+)+|(.*(?:\n))|(.*))?$/',
                      $line, $matches)) {
            $parsed[$i][$matches[1]] = preg_replace('/\n +/', ' ',
                                                    trim($matches[2]));
        }
    }
}

$parsed = array();

$blocks = preg_split('/\n\n/', $response['data']);

$lines = array();

$matches = array();

foreach ($blocks as $i => $block) {

$parsed[$i] = array();

$lines = preg_split('/\n(([\w.-]+)\: *((.*\n\s+.+)+|(.*(?:\n))|(.*))?)/',

$block, -1, PREG_SPLIT_DELIM_CAPTURE);

foreach ($lines as $line) {

if(preg_match('/^\n?([\w.-]+)\: *((.*\n\s+.+)+|(.*(?:\n))|(.*))?$/',

$line, $matches)) {

$parsed[$i][$matches[1]] = preg_replace('/\n +/', ' ',

trim($matches[2]));

}

31. Oktober 2014

Using Web RTC in your web application

web_rtc

IN A PERFECT WORLD

In a perfect world all current browsers would allow the usage of WebRTC natively, but that is as always not the case ;)

WHAT IS WEBRTC ?

„WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need of either internal or external plugins.“ – Wikipedia

Using Web RTC in your web application weiterlesen