星期二, 8月 30, 2011

XAMPP: SSL Encrypt the Transmission of Passwords with https

XAMPP: SSL Encrypt the Transmission of Passwords with https

Rob July 15th, 2007

This article is part of a series of articles about making XAMPP more secure. See the overview page for all the security measures.

If you don’t have encryption enabled on a password protected folder, the password will be sent in cleartext - meaning that it can be seen by anyone using a network sniffer. It is a good idea to encrypt the transmission of these passwords. There are 2 steps to this process, first we need to create SSL certificates, and then we need to make sure that the password protected pages are only accessed with encryption. It’s also a good idea to import your certificates into any browsers on all machines that you plan to use to access your server, otherwise you’ll get a warning about an untrusted certificate authority.

Create SSL Certificate and Server Private Key

In order to enable the encryption of your password, you must create an SSL certificiate (containing your public key) and a server private key. XAMPP provides a default certificate/key that can be used, but it is better to create a new one since the default key is available to anyone who downloads XAMPP. If someone knows your key, they can decrypt your packets.

XAMPP provides a batch file for creating a new certificate/key with random encryption keys. To execute this batch file, do the following:

  1. Open a command window (Start->Run, type “cmd” and press “OK)
  2. cd c:\xampp\apache
  3. makecert

You will then see this:

C:\xampp\apache>newcert
Loading 'screen' into random state - done
Generating a 1024 bit RSA private key
............................++++++
.....................................++++++
writing new private key to 'privkey.pem'
Enter PEM pass phrase:

Enter in a pass phrase for decrypting your private server key, and press Enter. Write down this passphrase so you don’t forget it. Now you will be asked to verify it:

Verifying - Enter PEM pass phrase:

Enter your passphrase a second time and hit Enter. Now, you’ll see this:

-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:

Enter in your 2 letter country code. You’ll be asked for a few more items (shown below). Enter is what you think is most appropriate, but stop when you are asked for “Common Name”

State or Province Name (full name) [Some-State]:NY
Locality Name (eg, city) []:New York
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Rob's Great Company
Organizational Unit Name (eg, section) []:
Common Name (eg, YOUR name) []:

For “Common Name”, you need to enter in the DNS name or IP address of your website. The name that you enter in here will need to match the server name that is entered into the browser that is accessing the page. It is important that this common name match the address that goes into a browser, otherwise you will get extra warnings when navigating to your secure web pages. If you are running this website over the public internet on an IP address that changes sometimes, you can use a Dynamic DNS service such as dyndns.org to get a free domain name that always points to your server. After you enter in the “Common Name”, you are asked for more information. Fill in what you think is appropriate, but it is OK to just hit ENTER to accept the defaults. Eventually, you will be asked for the pass phrase for privkey.pem:

Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
Enter pass phrase for privkey.pem:

Enter the pass phrase that you created earlier, and now you will see this:

writing RSA key
Loading 'screen' into random state - done
Signature ok
subject=/C=xx/ST=xx/L=xxxx/O=xxx/CN=commonname
Getting Private key

—–
Das Zertifikat wurde erstellt.
The certificate was provided.

Press any key to continue . . .

C:\xampp\apache>

You are now finished creating your SSL certificate and private key. The makecert.bat script will move your server private key and certificates in the appropriate directories for you.

Import the certificate into the browser for each client

Since this certificate is self signed, and is not signed by a well known Certificate Authority (CA), when you browse to the protected pages you’ll get a warning. To turn off this warning, the certificate should be imported as a trusted CA into any browsers that you will use to access your server.

Importing the certificate into IE 7

Here are the steps to import the certificate into IE 7:

Tools->Internet Options
Content Tab->Certificates Button
Trusted Root Certification Authorities Tab->Import Button

Now you’ll see the “Certificate Import Wizard”
Click Next
Provide file name: c:\xampp\apache\conf\ssl.crt\server.crt
Click Next
Leave default to Place all Certificates in Certificate store: Trusted Root Certification Authorities, and click Next
Click Finish

Importing the certificate into Firefox 2:

Here are the steps to import the certificate into Firefox 2:

Tools->Options
Advanced->Encryption Tab->View Certificates Button
Authorities Tab->Import Button
Select file: c:\xampp\apache\conf\ssl.crt\server.crt, and click “Open”
Check “Trust this CA to identify web sites”
Click “OK’
Click “OK” in Certificate manager
Click “OK” In original Options window to get back into Firefox

Edit Apache config for encryption only access to password protected folders.

Now we will instruct Apache to access the password protected folders with SSL encryption exclusively. This is done in 2 steps. First, we setup the Apache config files for these folders to say they can only be accessed with SSL encryption. Next, we redirect any “http” traffic to these pages to “https” (this is optional).

Make folders accessible with SSL encryption only

First, we need to inform Apache that the folders you want to encrypt should use always use encryption (and never go in the clear). This is accomplished by putting an SSLRequireSSL directive inside of each desired <Directory> listing in the config files (it is ok to put it at the end, just before the </Directory>). The red text below shows what to do.

    Alias /web_folder_name “C:/xampp/foldername
<Directory “C:/xampp/foldername“>


SSLRequireSSL
</Directory>

I suggest doing this for the following folders (if you still have them):

  • Config File: c:\xampp\apache\conf\extra\httpd-xampp.conf
    • c:\xampp\phpmyadmin
    • c:\xampp\htdocs\xampp
    • c:\xampp\webalizer
    • c:\xampp\security\htdocs
  • Config File: c:\xampp\webdav
    • c:\xampp\webdav

Redirect “http” to “https” for certain folders

This next optional step is to redirect “http” requests to “https” requests for the pages we want to secure. This is more user friendly and allows you to still use http when you type in the address (and automatically switch to https:// and encryption). If you don’t do this, and you used SSLRequireSSL, you will only be able to access these pages by typing https://. This is fine and probably a little bit more secure, but is not so user friendly. To accomplish the redirection, we will use mod_rewrite so that we don’t have to use the server name in this part of the config file. This helps keep small the number of places in the config files where the server name is written (making your config files more maintainable).

First, we need to make sure that mod_rewrite is enabled. To do this, edit c:\xampp\apache\conf\httpd.conf and get rid of the comment (# character) in this line:

#LoadModule rewrite_module modules/mod_rewrite.so

to make it look like this:

LoadModule rewrite_module modules/mod_rewrite.so

Now, paste the following text into the top of c:\xampp\apache\conf\extra\httpd-xampp.conf:

<IfModule mod_rewrite.c>
RewriteEngine On

# Redirect /xampp folder to https
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} xampp
RewriteRule ^(.*) https://%{SERVER_NAME}$1 [R,L]

# Redirect /phpMyAdmin folder to https
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} phpmyadmin
RewriteRule ^(.*) https://%{SERVER_NAME}$1 [R,L]

# Redirect /security folder to https
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} security
RewriteRule ^(.*) https://%{SERVER_NAME}$1 [R,L]

# Redirect /webalizer folder to https
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} webalizer
RewriteRule ^(.*) https://%{SERVER_NAME}$1 [R,L]
</IfModule>

If you have other folders you want to redirect to https://, add the generic text below (but substitute your folder name):

    # Redirect /folder_name folder to https
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} folder_name
RewriteRule ^(.*) https://%{SERVER_NAME}$1 [R,L]

If you are going to host a webdav server, it is probably best to not have this redirection and to just require https://. This way, people can only use https:// when addressing your webdav folder. I tried using redirection for a webdav server and giving http:// in both XP and MAC OS X, and it didn’t work when encryption is required.

One thing to keep in mind with this redirection is that if you have virtual hosts, you need to place the redirection code (with the RewriteCond and RewriteRule) inside of your virtual host declarations, otherwise the redirection won’t work.

星期一, 8月 29, 2011

FlexSlider 的參數與使用

http://flex.madebymufffin.com/

 

Step 1 - Link Files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Step 2 - Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class="flexslider"> in this example. Then, create a <ul class="slides">. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

Step 3 - Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

...and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 - Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

animation: "fade",              //Select your animation type (fade/slide/show)
slideshow: true,                //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000,           //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 500,         //Set the speed of animations, in milliseconds
directionNav: true,             //Create navigation for previous/next navigation? (true/false)
controlNav: true,               //Create navigation for paging control of each clide? (true/false)
keyboardNav: true,              //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true,               //Touch swipe gestures for left/right slide navigation (true/false)
prevText: "Previous",           //Set the text for the "previous" directionNav item
nextText: "Next",               //Set the text for the "next" directionNav item
randomize: false,                //Randomize slide order on page load? (true/false)
slideToStart: 0,                //The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true,            //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
pauseOnHover: false,            //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
controlsContainer: "",          //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: ""              //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav li a" or "#tabs-nav li", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously).