Merge pull request #451 from ossf/refine_input1

Refine input1

Author: david-a-wheeler

docs/labs/csp1.html

@@ -201,7 +201,7 @@
 <h1>Lab Exercise csp1</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>
@@ -387,8 +387,8 @@ <h2>Task Information</h2>
 <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <p>
 <form id="lab">
-<pre><code>
-const express = require("express");
+<pre><code
+>const express = require("express");
 <input id="attempt0" type="text" size="60" spellcheck="false" value="const">
 
 const app = express();

docs/labs/hello.html

@@ -120,7 +120,7 @@
 <h1>Lab Exercise hello</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>
@@ -162,8 +162,8 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab">
-<pre><code>
-<input id="attempt0" type="text" size="65" spellcheck="false"
+<pre><code
+><input id="attempt0" type="text" size="60" spellcheck="false"
        value='console.log("Goodbye.");'>
 </code></pre>
 <button type="button" class="hintButton">Hint</button>

docs/labs/input1-emulation.html

@@ -7,7 +7,7 @@
 <h1>Lab Exercise Input1</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>

docs/labs/input1.html

@@ -109,15 +109,13 @@
 <h1>Lab Exercise input1</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>
-<h2>Task</h2>
+<h2>Goal</h2>
 <p>
-<b>Please change the code below so the query parameter
-<tt>id</tt> <i>must</i> be an integer between 1 and 9999 (including
-those numbers).</b>
+Practice validating input of a simple data type.
 
 <p>
 <h2>Background</h2>
@@ -130,18 +128,14 @@ <h2>Background</h2>
 
 <p>
 <!-- https://expressjs.com/en/guide/routing.html -->
-Express allows us to state that when the system receives
-an HTTP <tt>get</tt> request for a given route
-(e.g., <tt>/invoices</tt>), Express will run a list of functions ("handlers").
+Express allows us to state that when the system receives a specific request,
+it will run a list of functions ("handlers").
 The library <tt>express-validator</tt> provides a set of validation functions
 to make it easy to add validation checks.
 
 <p>
 The code below sets up handlers for a <tt>get</tt> request on path
 <tt>/invoices</tt>.
-This code could be triggered, for example, by requesting
-<tt>http://localhost:3000/invoices?id=1</tt>
-(if it was running at <tt>localhost</tt> and responding to port 3000).
 If there are no validation errors, the code is supposed to show the invoice id.
 If there is a validation error, it responds with HTTP
 error code 422 ("Unprocessable Content"), a status code suggesting
@@ -164,25 +158,25 @@ <h2>Background</h2>
 <p>
 <h2>Task Information</h2>
 <p>
-
-<p>
-To complete this task,
-after the first parameter to <tt>app.get</tt>
+To complete this task:
+<ol>
+<li>After the first parameter to <tt>app.get</tt>
 which says <tt>'/invoices'</tt>,
 add a new comma-separated parameter.
-Start this new parameter with
+<li>Start this new parameter with
 <tt>query('id')</tt> to select the
 <tt>id</tt> parameter for validation (we've filled in this part
 to help get you started).
-After <tt>query('id')</tt> (and before the terminating comma),
+<li>After <tt>query('id')</tt> (and before the terminating comma),
 add a period (<tt>.</tt>) and the validation requirement
 <tt>isInt()</tt> (<tt>isInt</tt> validates that the named parameter is
 an integer).
-The <tt>isInt</tt> method takes, as an optional parameter inside
+<li>The <tt>isInt</tt> method takes, as an optional parameter inside
 its parentheses,
 an object providing a minimum and maximum, e.g.,
 <tt>isInt({min: YOUR_MINIMUM, max: YOUR_MAXIMUM})</tt>.
 Set <tt>min</tt> and <tt>max</tt> to specify the allowed range.
+</ol>
 
 <p>
 Note: JavaScript names are case-sensitive, so <tt>isint</tt> won't work.
@@ -197,14 +191,18 @@ <h2>Task Information</h2>
 <p>
 <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <p>
+<b>The code below accepts the query parameter <tt>id</tt> as input.
+Please change it so <tt>id</tt> is only accepted if it is
+an integer between 1 and 9999 (including those numbers).</b>
+<p>
 <!--
 You can use this an example for new labs.
 For multi-line inputs, instead of <input id="attempt0" type="text" ...>, use
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab">
-<pre></code>
-// Set up Express framework and express-validator library
+<pre><code
+>// Set up Express framework and express-validator library
 const express = require("express");
 const app = express();
 const { query, matchedData, validationResult } =

docs/labs/input2.html

@@ -11,7 +11,8 @@
 
 <!-- Sample expected answer -->
 <script id="expected0" type="plain/text">
-  query('id').isLength({max:80}).matches( /^[A-Z]{2}-[0-9]+-[0-9]+$/ ),
+  query('id').isLength({max:80}).
+      matches( /^[A-Z]{2}-[0-9]+-[0-9]+$/ ),
 </script>
 
 <!-- Full pattern of correct answer.
@@ -78,6 +79,11 @@
   text: >
     You need to match one or more digits; * allows 0 or more.
     A + would be better suited for this task.
+- present: |
+    \s*, , $
+  text: >
+    You have two commas at the end. Use only one. You may need to
+    scroll or increase the text area to see both of them.
 successes:
 - - query(`id`).isLength( {max:80}).matches(/^[A-Z]{2}-\d+-[0-9]+$/),
 - - '  query (`id`) . isLength( {max:80}).matches(/^[A-Z]{2}-\d+-[0-9]+$/ ) ,  '
@@ -94,15 +100,16 @@
 <h1>Lab Exercise input2</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>
 <h2>Task</h2>
 <p>
-<b>Please change the code below so the query parameter
-<tt>id</tt> <i>must</i> be no longer than 80 characters
-and meets this application's part id format requirement.</b>
+<b>
+Practice validating specialized text input in a program
+using a regular expression.
+</b>
 
 <p>
 <h2>Background</h2>
@@ -150,17 +157,17 @@ <h2>Task Information</h2>
 another dash (<tt>-</tt>), and another sequence of one or more digits.
 
 <p>
-To do that,
-after the first parameter to <tt>app.get</tt>
-which says <tt>'/parts'</tt>,
-add a new comma-separated parameter.
-Start this new parameter with
+To do that:
+<ol>
+<li>After the first parameter to <tt>app.get</tt>
+which says <tt>'/parts'</tt>, add a new comma-separated parameter.
+<li>Start this new parameter with
 <tt>query('id')</tt> to select the
-<tt>id</tt> parameter for validation (we've have <i>not</i> filled
+<tt>id</tt> parameter for validation (we have <i>not</i> filled
 in this part in this lab).
-Add a period (<tt>.</tt>) and the validation requirement
+<li>Add a period (<tt>.</tt>) and the validation requirement
 <tt>isLength()</tt>
-The <tt>isLength</tt> method takes, as an optional parameter inside
+<li>The <tt>isLength</tt> method takes, as an optional parameter inside
 its parentheses,
 an object providing specific information such as a minimum and a maximum.
 We only want a maximum,
@@ -169,42 +176,55 @@ <h2>Task Information</h2>
 Those familiar with JavaScript will know that the "length" value is
 the length of the string in UTF-16 code units; that's fine
 for our purposes.
+</ol>
 </p>
 
 <p>
 We also need to verify that the input matches our pattern,
 which we can verify using a regular expression.
-In this situation, we can do this by appending another
-period (<tt>.</tt>) and the validation requirement
+In this situation, we can do this by:
+<ol>
+<li>appending another period (<tt>.</tt>) and the validation requirement
 <tt>matches()</tt>.
-Inside those parenthesis you should supply slash (<tt>/</tt>, the
+<li>Inside those parenthesis you should supply slash (<tt>/</tt>, the
 text of the regular expression to match, and another slash (<tt>/</tt>).
 In JavaScript, a pair of slashes (<tt>/</tt>) surrounds a regular expression.
-Remember to match the <i>entire</i> expression
+<li>Remember to match the <i>entire</i> expression
 (in other words, use <tt>^</tt> and <tt>$</tt>).
-Remember, a way to match a single uppercase character is the
-pattern <tt>[A-Z]</tt> ... good luck!
+<li>Also, remember that a way to match a single uppercase character is the
+pattern <tt>[A-Z]</tt>
+</ol>
 
 <p>
 <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <p>
+<b>Please change the code below so the query parameter
+<tt>id</tt> is only accepted if it's no longer than 80 characters
+and meets this application's part id format requirement.
+The format is
+two uppercase Latin letters (each <tt>A</tt> through <tt>Z</tt>),
+then a dash (<tt>-</tt>), a sequence of one or more digits,
+another dash (<tt>-</tt>), and another sequence of one or more digits.
+</b>
+<p>
+
 <!--
 You can use this an example for new labs.
 For multi-line inputs, instead of <input id="attempt" type="text" ...>, use
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab">
-<pre><code>
-// Set up Express framework and express-validator library
+<pre><code
+>// Set up Express framework and express-validator library
 const express = require("express");
 const app = express();
 const { query, matchedData, validationResult } =
     require('express-validator');
 
 // Implement requests, e.g., http://localhost:3000/parts?id=1
 app.get('/parts',
-<input id="attempt0" type="text" size="65" spellcheck="false"
- value="  ,">
+<textarea id="attempt0" rows="2" cols="64" spellcheck="false">
+  ,</textarea>
   (req, res) =&gt; { // Execute this code if /invoices seen
     const result = validationResult(req); // Retrieve errors
     if (result.isEmpty()) { // No errors

docs/labs/regex1.html

@@ -88,6 +88,13 @@
 <script id="info" type="application/yaml">
 ---
 hints:
+- present: |-
+    /
+  text: In JavaScript a constant regular expression is surrounded by
+    forward slashes like /PATTERN/. However, for this exercise we only
+    want the text inside the slashes (the pattern itself).
+  examples:
+  - - "/"
 - absent: |-
     ^\^
   text: For input validation, start with '^' to indicate a full match.
@@ -245,14 +252,13 @@
 <h1>Lab Exercise regex1</h1>
 <p>
 This is a lab exercise on developing secure software.
-For more information, see the <a href="introduction.html">introduction to
+For more information, see the <a href="introduction.html" target="_blank">introduction to
 the labs</a>.
 
 <p>
-<h2>Task</h2>
+<h2>Goal</h2>
 <p>
-<b>Please create various regular expression (regex) patterns
-that meet the criteria below.</b>
+<b>Learn how to create simple regular expressions.</b>
 
 <p>
 <h2>Background</h2>
@@ -262,8 +268,6 @@ <h2>Background</h2>
 Regexes can be used to validate input; when used correctly,
 they can counter many attacks.
 
-<p>
-<h2>Task Information</h2>
 <p>
 Different regex languages have slightly different notations,
 but they have much in common. Here are some basic rules for regex
@@ -294,6 +298,8 @@ <h2>Task Information</h2>
 So for example, "<tt>(yes|no)</tt>" is a way to match either "yes" or "no".
 </ol>
 
+<p>
+<h2>Task Information</h2>
 <p>
 We want to use regexes to <i>validate</i> input.
 That is, the input should <i>completely</i> match the regex pattern.
@@ -344,6 +350,9 @@ <h2>Task Information</h2>
 <p>
 <h2>Interactive Lab (<span id="grade"></span>)</h2>
 
+<b>Please create regular expression (regex) patterns
+that meet the criteria below.</b>
+
 <h3>Part 1</h2>
 <p>
 Create a regular expression, for use in ECMAScript (JavaScript),
@@ -353,9 +362,8 @@ <h3>Part 1</h2>
 For multi-line inputs, instead of <input id="attempt0" type="text" ...>, use
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
-<form id="lab1">
-<pre></code>
-<input id="attempt0" type="text" size="60" spellcheck="false" value="">
+<form id="lab1"><pre><code
+><input id="attempt0" type="text" size="60" spellcheck="false" value="">
 </code></pre>
 <button type="button" class="hintButton">Hint</button>
 <button type="button" class="resetButton">Reset</button>
@@ -372,8 +380,8 @@ <h3>Part 2</h2>
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab2">
-<pre></code>
-<input id="attempt1" type="text" size="60" spellcheck="false" value="">
+<pre><code
+><input id="attempt1" type="text" size="60" spellcheck="false" value="">
 </code></pre>
 <button type="button" class="hintButton">Hint</button>
 <button type="button" class="resetButton">Reset</button>
@@ -390,8 +398,8 @@ <h3>Part 3</h2>
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab3">
-<pre></code>
-<input id="attempt2" type="text" size="60" spellcheck="false" value="">
+<pre><code
+><input id="attempt2" type="text" size="60" spellcheck="false" value="">
 </code></pre>
 <button type="button" class="hintButton">Hint</button>
 <button type="button" class="resetButton">Reset</button>
@@ -409,8 +417,8 @@ <h3>Part 4</h2>
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab4">
-<pre></code>
-<input id="attempt3" type="text" size="60" spellcheck="false" value="">
+<pre><code
+><input id="attempt3" type="text" size="60" spellcheck="false" value="">
 </code></pre>
 <button type="button" class="hintButton">Hint</button>
 <button type="button" class="resetButton">Reset</button>
@@ -429,8 +437,8 @@ <h3>Part 5</h2>
 <textarea id="attempt" rows="2" cols="65">...</textarea>
 -->
 <form id="lab5">
-<pre></code>
-<input id="attempt4" type="text" size="60" spellcheck="false" value="">
+<pre><code
+><input id="attempt4" type="text" size="60" spellcheck="false" value="">
 </code></pre>
 <button type="button" class="hintButton">Hint</button>
 <button type="button" class="resetButton">Reset</button>