Skip to content

Csp1 no yaml #749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 29, 2025
Merged

Csp1 no yaml #749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a54c04b
Lab csp1: Change from YAML to JavaScript
david-a-wheeler Jan 29, 2025
80ac567
csp1: Move answers to JavaScript
david-a-wheeler Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 1 addition & 189 deletions docs/labs/csp1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,199 +7,11 @@
<link rel="stylesheet" href="checker.css">
<script src="js-yaml.min.js"></script>
<script src="checker.js"></script>
<script src="csp1.js"></script>
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">

<!-- See create_labs.md for how to create your own lab! -->

<!-- Sample expected answer -->
<script id="expected0" type="plain/text">
const helmet = require("helmet");
</script>
<!--
-->
<script id="expected1" type="plain/text">
app.use(helmet({
contentSecurityPolicy: {
directives: {
"script-src": ["'self'", "https://example.com"],
"style-src": ["'self'"]
},
}
}));
</script>

<!-- Full pattern of correct answer -->
<script id="correct0" type="plain/text">
\s* const\s+helmet = require \( ("helmet"|'helmet'|`helmet`) \) ; \s*
</script>
<!--
\s* const helmet = require \( ("helmet"|'helmet'|`helmet`) \) ; \s*
-->
<script id="correct1" type="plain/text">
\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{
"script-src": \[ "'self'" , "https://example\.com" \] ,
"style-src": \[ "'self'" \] ,?
\} ,?
\} ,?
\} \) \) ;
\s*
</script>
<!--
\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{
"script-src": \[ "'self'" ,
(["'`])https://example\.com\1 \] ,
"style-src": \[ "'self'" \]
\} ,?
\}
\} \) \) ;
-->

<script id="info" type="application/yaml">
---
hints:
- present: "import"
text: Yes, many JavaScript implementations support an import statement.
However, in this exercise we will use a require form. Please use that
instead.
examples:
- - 'import express from "express";'
- absent: "const"
text: Start with const.
- absent: 'const\s+helmet ='
text: Create a constant name named helmet using the form const helmet = ...
examples:
- - 'const'
- - 'consthelmet = '
- present: 'require \( helmet \)'
text: The parameter of a requirement statement must be string.
Surround the term helment with double-quotes.
examples:
- - ' const helmet = require(helmet);'
- absent: "; $"
text: JavaScript doesn''t require semicolon terminators, but the rest of
the code uses them. You should try to match a coding style when modifying
existing code unless there''s an important reason not to.
Please update the first statment.
examples:
- - ' const helmet = require("helmet")'
- absent: '\s* app \. use \( helmet \( \{'
index: 1
text: Your code should begin with app.use(helmet({
- absent: |
\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{ \s*
index: 1
text: |
Your code should begin with:
app.use(helmet({
contentSecurityPolicy: {
- absent: |
\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{ \s*
index: 1
text: |
Your code should begin with:
app.use(helmet({
contentSecurityPolicy: {
directives: {
- absent: |
\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{
"script-src": \[ "'self'" , ["']https://example.com["'] \] , \s*
index: 1
text: |
Your code should continue with:
app.use(helmet({
contentSecurityPolicy: {
directives: {
"script-src": ["'self'", "https://example.com"],
- absent: |
"style-src": \[ "'self'" \]
index: 1
text: |
Don't forget to include "style-src": ["'self'"]
- absent: '; $'
index: 1
text: JavaScript doesn''t require semicolon terminators, but the rest of
the code uses them. You should try to match a coding style when modifying
existing code unless there''s an important reason not to.
Please update the second statement to use a semicolon terminator.
- absent: |-
\} \} \) \) ; $
index: 1
text: The correct answer is expected to end with `} } ) ) ;` ignoring
whitespace. Check that you have matching parentheses and braces.
- text: I do not have more specific hints to provide. Please ensure that
the parentheses, braces, and brackets pair correctly, as that is
often the problem.
# debug: true
</script>


<!-- More examples:
- absent: query \( ["'`]id["'`] \)
text: Add query("id") to verify its value.
examples:
- - ","
- - " query(),"
- present: query \( ["'`]id["'`] \) [^. ]
text: After query("id") use a period to invoke a verification method.
examples:
- - " query('id'),"
- present: "(isint|Isint|IsInt|ISINT)"
text: JavaScript is case-sensitive. Use isInt instead of the case you have.
examples:
- - " query('id').isint(),"
- - " query('id').IsInt(),"
- absent: isInt
text: Use isInt to determine if the parameter is an integer.
examples:
- - " query('id').,"
- present: ' query \( ["''`]id["''`] \).*\([^)]*$'
text: After query("id") you have an ( but there's no matching ).
examples:
- - " query('id').isInt(,"
- absent: isInt \(.*\)
text: isInt should be followed by (...).
examples:
- - " query('id').isInt,"
- present: "\\{[^}]*$"
text: You have started an object using { but there's no matching }.
examples:
- - " query('id').isInt({),"
- absent: isInt \( \{.*\} \)
text: Inside the parenthesis of isInt() you should have an object like {...}.
examples:
- - " query('id').isInt(),"
- absent: min
text: 'Use min: to specify a minimum value.'
examples:
- - " query('id').isInt({}),"
- absent: max
text: 'Use max: to specify a minimum value.'
examples:
- - " query('id').isInt({min: 1}),"
- present: max.*min
text: JavaScript allows hash entries to be in any order,
but this can be confusing to humans. Conventionally minimum values
are given before maximum values; please follow that convention.
examples:
- - " query('id').isInt({max: 9999, min: 1}),"
successes:
- - " query ( 'id' ) . isInt ( {min: 1 , max: 9999 } ) ,"
- - " query ( `id` ) . isInt ( {min: 1 , max: 9_999 } ) , "
- - 'query ( "id" ) . isInt ( {min: 1 , max: 9_999 } ) ,'
failures:
- - " query,"
- - 'query(''id'').isint({min: 1, max: 9999})'
- - 'query(''id'').isInt({min: 1, max: 9999})'
-->
</head>
<body>
<!-- For GitHub Pages formatting: -->
Expand Down
110 changes: 110 additions & 0 deletions docs/labs/csp1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
info =
{
hints: [
{
present: "import",
text: "Yes, many JavaScript implementations support an import statement. However, in this exercise we will use a require form. Please use that instead.",
examples: [
[
"import express from \"express\";"
]
]
},
{
absent: "const",
text: "Start with const."
},
{
absent: String.raw`const\s+helmet =`,
text: "Create a constant name named helmet using the form const helmet = ...",
examples: [
[ "const" ],
[ "consthelmet = " ]
]
},
{
present: String.raw`require \( helmet \)`,
text: "The parameter of a requirement statement must be string. Surround the term helment with double-quotes.",
examples: [
[ " const helmet = require(helmet);" ]
]
},
{
absent: "; $",
text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the first statment.",
examples: [
[ " const helmet = require(\"helmet\")" ]
]
},
{
absent: String.raw`\s* app \. use \( helmet \( \{`,
index: 1,
text: "Your code should begin with app.use(helmet({"
},
{
absent: String.raw`\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{ \s*
`,
index: 1,
text: "Your code should begin with:\napp.use(helmet({\n contentSecurityPolicy: {\n"
},
{
absent: String.raw`\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{ \s*
`,
index: 1,
text: "Your code should begin with:\napp.use(helmet({\n contentSecurityPolicy: {\n directives: {\n"
},
{
absent: String.raw`\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{
"script-src": \[ "'self'" , ["']https://example.com["'] \] , \s*
`,
index: 1,
text: "Your code should continue with:\napp.use(helmet({\n contentSecurityPolicy: {\n directives: {\n \"script-src\": [\"'self'\", \"https://example.com\"],\n"
},
{
absent: String.raw`"style-src": \[ "'self'" \]
`,
index: 1,
text: "Don't forget to include \"style-src\": [\"'self'\"]\n"
},
{
absent: "; $",
index: 1,
text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the second statement to use a semicolon terminator."
},
{
absent: String.raw`\} \} \) \) ; $`,
index: 1,
text: "The correct answer is expected to end with `} } ) ) ;` ignoring whitespace. Check that you have matching parentheses and braces."
},
{
text: "I do not have more specific hints to provide. Please ensure that the parentheses, braces, and brackets pair correctly, as that is often the problem."
}
],
expected: [
'const helmet = require("helmet");',
`app.use(helmet({
contentSecurityPolicy: {
directives: {
"script-src": ["'self'", "https://example.com"],
"style-src": ["'self'"]
},
}
}));`
],
correct: [
String.raw`\s* const\s+helmet = require \( ("helmet"|'helmet'|${BACKQUOTE}helmet${BACKQUOTE}) \) ; \s*`,
String.raw`\s* app \. use \( helmet \( \{
contentSecurityPolicy: \{
directives: \{
"script-src": \[ "'self'" , "https://example\.com" \] ,
"style-src": \[ "'self'" \] ,?
\} ,?
\} ,?
\} \) \) ; \s*`
],
}