SPT-02/PM-01/SOP-05/Form-17-Rev.

0
INFORMATION SYSTEMS STUDY PROGRAM
FACULTY OF ENGINEERING AND INFORMATICS
UNIVERSITAS MULTIMEDIA NUSANTARA
EVEN SEMESTER ACADEMIC YEAR 2022-2023

IS556– WEB DESIGN AND DEVELOPMENT

Week 08 – User Authentication and Encryption

Lecturers:
Monika Evelin Johan
Budi Berlinton Sitorus
Nofriyadi Nurdam
Haditya Setiawan

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 1

Weekly Course Learning Outcomes (Sub-CLO):

1. SUB-CLO 09: Students are able to take advantage of Cookies, Session and string encryption to
establish user authentication in information system applications. (C5)

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 2

Sub-topics
• Cookies, session, and string encryption

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 3

Cookies and Session
• By its nature, HTTP is stateless
• What if a login system is maintained on the client side?
• What is the effect on the users?

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 4

Cookies and Session
Technologies to store information about a particular user between
pages.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 5

Cookies
• A cookie is a name–value pair, often used to identify a user.
• A cookie is a small file that the server embeds on the user's computer.
Each time the same computer requests a page with a browser, it will
send the cookie too.
• With PHP, you can both create and retrieve cookie values.
• A cookie is an array of sorts, associated with a given website, and stored
on the computer that runs the client (browser).
• Once set by a website, all future page requests to that same site will send
the information stored in the cookie back to the website until it expires
(or becomes out of date).
• Other websites are unable to access the cookies set by your site, and vice
versa.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 6

PHP Life-cycle
• a web browser requests a URL that corresponds to a PHP script. Within
that script is a call to the setcookie function that’s built into PHP.
• The page produced by the PHP script is sent back to the browser, along
with an HTTP setcookie header that contains the name (for example,
mycookie) and the value of the cookie to be set.
• When it receives this HTTP header, the browser creates and stores the
specified value as a cookie named mycookie.
• Subsequent page requests to that website contain an HTTP cookie
header that sends the name–value pair (mycookie=value) to the script
requested.
• Upon receipt of a page request with a cookie header, PHP automatically
creates an entry in the $_COOKIE array with the name of the cookie
($_COOKIE['mycookie']) and its value.
IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 7
Cookie (example)

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 8

Create Cookies with PHP

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 9

Cookie
• By default, cookies will remain stored by the browser;
• and thus will continue to be sent with page requests until the
browser is closed by the user.
• the cookie to persist beyond the current browser session, if the
expiryTime parameter set to specify the number of seconds from
January 1, 1970 to the time at which you want the cookie to be
deleted automatically.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 10

Cookie to set/to delete

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 11

Cookie to set/to delete

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 12

Check if cookies are enables

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 13

PHP Session
• Cookies are inappropriate for storing large amounts of information.
• If we run an ecommerce website that uses cookies to store items in
shopping carts as users make their way through our site, it can be a
huge problem.
• The bigger a customer’s order, the more likely it will run afoul of a
browser’s cookie restrictions.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 14

PHP Session
• Sessions were developed in PHP as the solution to this issue.
• Instead of storing all our (possibly large) data as cookies in our visitor’s
web browser, sessions let us store the data on our web server.
• The only value that’s stored in the browser is a single cookie containing
the user’s session ID—
• A session is a long string of letters and numbers that serves to identify
that user uniquely for the duration of their visit to our site.
• It’s a variable for which PHP watches on subsequent page requests, and
uses to load the stored data that are associated with that session.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 15

PHP Session
• By default, session variables last until the user closes the browser.
• Session variables hold information about one single user, and are
available to all pages in one application.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 16

PHP Session

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 17

PHP Session

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 18

PHP Session

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 19

Destroy a PHP Session

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 20

Encryption
• Encryption is used to ensure privacy within an organization and on the
Internet.
• Encryption is the conversion of data into an unreadable form, called a
ciphertext.
• Ciphertext cannot be easily understood by unauthorized individuals.
• Decryption is the process of converting the ciphertext into its original
form, called plain text or clear text, so that it can be understood.
• The process of encryption and decryption requires an algorithm and a
key. An algorithm involves a mathematical calculation.
• A key is a numeric code that should be long enough so that its value
cannot easily be guessed.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 21

Encryption
• Encryption is important on the Internet because the information in
a packet can be intercepted as it travels the communications media.
• If a hacker or business competitor intercepts an encrypted packet,
he or she will not be able to use the information (such as a credit
card number or business strategy) because it cannot be read.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 22

Encryption
• A number of types of encryption are commonly used on the
Internet, including symmetric-key encryption and asymmetric-key
encryption

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 23

Symmetric-Key Encryption
• Symmetric-key encryption is also called single-key encryption
because both encryption and decryption use the same key.
• Because the key must be kept secret from others, both the sender
and the receiver must know the key before communicating using
encryption.
• An advantage of symmetric-key encryption is speed.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 24

Asymmetric-Key Encryption
• Asymmetric-key encryption is also called public-key encryption because there is
no shared secret.
• Instead, two keys are created at the same time.
• This key pair contains a public key and a private key.
• The public key and the private key are mathematically related in such a way
that it is unlikely that anyone would guess one of the pair even with knowledge
of the other.
• Only the public key can decrypt a message encrypted with the private key and
only the private key can decrypt a message encrypted with the public key.
• The public key is available via a digital certificate.
• The private key should be kept secure and secret.
• It is stored on the web server (or other computer) of the key owner.
• Asymmetric-key encryption is much slower than symmetric-key encryption.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 25

Encryption

Symmetric-key encryption uses a single key

Asymmetric-key encryption uses a key pair

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 26

Integrity
• The encryption methods described above help to keep the contents of a
message secret.
• A message is said to have integrity if it can be proven that it has not been
altered.
• Hash functions provide a way to ensure the integrity of messages.
• A hash function, or hash algorithm, transforms a string of characters into
a usually shorter, fixed-length value or key, called a digest, which
represents the original string.
• These security methods—especially the techniques of symmetric-key and
asymmetric-key encryption—are used as part of SSL, the technology that
helps to make commerce on the Internet secure.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 27

Secure Sockets Layer (SSL)
• Secure Sockets Layer (SSL) is a protocol that allows data to be privately
exchanged over public networks.
• It was developed by Netscape and is used to encrypt data sent between a
client (usually a web browser) and a web server.
• SSL utilizes both symmetric and asymmetric keys.
• SSL provides secure communication between a client and a server by
using the following:
• Server and (optionally) client digital certificates for authentication
• Symmetric-key cryptography with a “session key” for bulk encryption
• Public-key cryptography for transfer of the session key
• Message digests (hash functions) to verify the integrity of the transmission

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 28

Secure Sockets Layer (SSL)
• You can tell that a website is using SSL by the protocol in the web
browser address text box—it shows https instead of http.
• Also, browsers typically display a lock icon or other indicator of SSL.

Click on the “lock”

icon for certificate
information

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 29

Digital Certificate
• SSL enables two computers to communicate securely by posting a digital
certificate for authentication.
• A digital certificate is a form of an asymmetric key that also contains
information about the certificate, the holder of the certificate, and the
issuer of the certificate.
• The contents of a digital certificate include the following:
• The public key
• The effective date of the certificate
• The expiration date of the certificate
• Details about the certificate authority (the issuer of the certificate)
• Details about the certificate holder
• A digest of the certificate content

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 30

Digital Certificate
• VeriSign (http://www.verisign.com) and Entrust
(http://www.entrust.net) are well-known certificate authorities.
• To obtain a certificate, you will need to generate a certificate signing
request (CSR) and a private/public key pair (see
https://www.digitalocean.com/community/tutorials/how-to-install-an-
ssl-certificate-from-a-commercial-certificate-authority) for an overview
of this process.
• Next, you request a certificate from a certificate authority, pay the
application fee, and provide your CSR and public key.
• The certificate authority verifies your identity. After verification, the
certificate authority signs and issues your certificate.
• You store the certificate in your software, such as a web server, web
browser, or e-mail application.
IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 31
Do I have to apply for a certificate?
• If you are accepting any personal information on your website such as
credit card numbers, you should be using SSL. One option is to contact a
certificate authority (such as VeriSign or Thawte at
http://www.thawte.com) and apply for your own certificate. There may
be a waiting period and you will need to pay an annual fee.
• As an alternative, your web host provider may let you piggyback on its
certificate. Normally, there is a setup and/or monthly fee for this service.
Usually, the web host assigns you a folder on its secure server. You place
the web pages (and associated files such as images) that need to be
securely processed in the folder. When linking to the web pages, you use
“https” instead of “http” on your absolute links. Contact your web host
provider for details.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 32

SSL and Digital Certificates
• A number of steps are involved in the SSL authentication process.
• The web browser and web server go through initial handshaking
steps, exchanging information about the server certificate and keys.
• Once trust is established, the web browser generates and encrypts
the session key (symmetric key) that will be used for the rest of the
communication. From this point on, all data is encrypted through
the session key.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 33

SSL encryption process overview

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 34

Extra: PDO
• The PDO (PHP Data Objects) extension defines a lightweight, consistent
interface for accessing databases in PHP.
• Each database driver that implements the PDO interface can expose
database-specific features as regular extension functions.
• PDO provides a data-access abstraction layer, which means that,
regardless of which database you're using, you use the same functions to
issue queries and fetch data.
• PDO does not provide a database abstraction; it doesn't rewrite SQL or
emulate missing features. You should use a full-blown abstraction layer if
you need that facility.
• PDO ships with PHP.

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 35

Extra: PDO
• Connection Management
Connections are established by creating instances of the PDO base
class. It doesn't matter which driver you want to use; you always use
the PDO class name. The constructor accepts parameters for
specifying the database source (known as the DSN) and optionally for
the username and password (if any).
For example: Connecting to MySQL

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 36

THANK YOU

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 37

References
• Felke-Morris, T. A. (2018). Web Development and Design
Foundations with HTML5, Global Edition (8th ed.). Pearson
International Content.
https://umnlibrary.vitalsource.com/books/9781292164083
• West, A. W., Prettyman, S. (2018). Practical PHP 7, MySQL and
MariaDB Website Database: A Simplified Approach to Developing
Database-Driven Websites. Apress.
• https://www.w3schools.com/
• https://www.php.net/manual/en/book.pdo.php

IS556 –WEB DESIGN AND DEVELOPMENT – 2022/2023 38