Instructions

1. Understand the case.

Recently, a non-profit cable TV organization hired a web developer to design and produce a new website. The site would host live streamed programs; list a program schedule; allow viewers to submit programs, comments, and questions; solicit and receive donations, and explain the program.

The web developer worked with the organization's President to redesign the organization's brand identity and choose a CMS platform based on their needs. A prototype of this new site was built on the developer's web server. It included the new brand elements combined with a third-party theme inside the CMS. Staff were added as users in varying roles, such as subscribers, writers, editors, and administrators. Staff could add text and media and respond to comments and inquiries.

Once the site was approved for launch, the database and web files were moved to the organization's web host account so the domain name could point there and they could maintain them without outside help. A free SSL certificate was added to the server to protect browser-to-server interactions on the domain. A subdomain was added to the server to promote advertising landing pages.

Each staff received new email addresses using the domain name, and some staff received sFTP accounts for uploading files. One person had super-admin capability to manage the domain name and hosting account as well as the CMS account.

Can you guess how problems might occur?

2. Write down all the problems that might have occurred.

Then, identify preventative measures for each problem. And finally, for each problem, identify after-the-fact solutions to take immediate action. Once you have several ideas documented, add them to the Security page you made earlier.

3. Identify risks.

In an article on the Security page, identify risks and solutions in a definition list.

  1. In the security.php file, add <doctype> tag, character set <meta /> tag, PHP statement with a variable for $pagetitle, a <title> tag, and a <link> tag for the main.css file. Remember to replace Name with your name. If you named the security file with .html, then change it to .php.
  2. In the <body> area of the page, add a <header> and headline 1. Echo the $pagetitle variable in the headline.
  3. Add a <main>, <article>, and <footer> tag before closing the <body> and html tags, and assign the <article> an identifier called security.
  4. In the article tag, add a headline 2 that notes the Risks and Solutions.
  5. Add a paragraph under the headline that describes the list of risks and solutions.
  6. Just under the paragraph, add a definition/description list. To that list, add a <dt> tag for ten risky components (security problems) of the project.
  7. Add new risks you did not think of, based on the following problems that occurred after launch, such as:
    • Within a day of launch, 200 robots had added new subscriber accounts to the user list. When a staff member attempted to thank these new subscribers, the messages were returned by the mail server.
    • Within 2 days of launch, 5 people had written nasty comments about political campaigners in the comment section of the latest streaming program about cats.
    • Within 3 days of launch, the staff recipient of inquiries from the site's contact form received 5000 messages simultaneously, shutting down her email server.
    • Within 4 days of launch another staff began receiving hundreds of Undelivered Mail Returned to Sender messages in her email inbox.
    • Within 5 days of launch, a writer for the group had been fired for misconduct. This person logged into the new site and posted an inappropriate article on the home page before they were escorted from the building.
    • Within 6 days of launch, the staff member with super-admin credentials was hospitalized and unable to work.
    • Within 7 days of launch, the advertising landing pages on the subdomain were blocked by Alerts about how the pages were unsafe. Even if visitors clicked on the Advanced link to get to the 'unsafe' page, they landed on someone else's website.
    • Within 8 days of launch, the webmaster received a cease and desist notice from a media content company stating that one of the movies posted in the site was displaying without permission.
    • Within 9 days of launch, the site had disappeared.

4. Identify preventative measures.

How could the web developer and President have prevented those problems?

  1. In <dd> tags under each risk, note preventative measures that could have been taken.

5. Identify after-the fact solutions.

Damage has been done to the cable company's site and perhaps to their reputation, but not all is lost. What can be done right now to fix the problems?

  1. In a second set of <dd> tags for each risk, add notes about how you could solve the problems now if you had to. Refer to the Manage Passwords tab, the Test tab, and the Resources tab for guidance.

6. Style the page

  1. In the /ecommerce/ project's /css/ folder, locate and open the main.css file. In the mobile area, add numbering and categories to a definition list.
  2. Increment numbers on each of the definition/description list title elements using a class called numbers, the counter reset and increment properties, as well as a period and space in the content property, like this: 
     
    .numbered {
    counter-reset: numbers;
    }
    .numbered dt:before {
    counter-increment: numbers;     
    content: counter(numbers) ". ";  
    }
  3. Just under the numbering declarations, declare content properties for definition/description tags to differentiate prevention and solutions using the <article>'s identifier, like this: 
    
    #security dd::before {content:"Solution: ";}
    #security dd:nth-of-type(even)::before {content:"Prevention: ";}
  4. Style the definition/description title <dt> so that is stands out, using font weight and/or borders and/or color, like this: 
    
    dt {
    font-weight:__;
    color:__;
    border:__;
    }
    Remember to replace the underscores with real values.