fix(formatting): Information Security with HelmetJS challenges (#35419)
* fix(formatting): Information Security with HelmetJS challenges fix(formatting): Information Security with HelmetJS challenges fix(formatting): Information Security with HelmetJS challenges fix(formatting): Hetmet JS challenges fix(formatting): Hetmet JS challenges * fix(curriculum): Remove hr * fix(formatting): Helmet JS * Change code to blockquote * fix: indented code in blockquotes
This commit is contained in:
The Coding Aviator
committed by
Randell Dawson
Randell Dawson
parent
87f04caf82
commit
49cc719af8
@ -8,13 +8,12 @@ challengeType: 2
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.
|
||||
HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request.
|
||||
Configure helmet.hsts() to use HTTPS for the next 90 days. Pass the config object {maxAge: timeInMilliseconds, force: true}. Glitch already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Glitch header, after inspecting it for testing.
|
||||
Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TSL Certificate.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
Configure helmet.hsts() to use HTTPS for the next 90 days. Pass the config object {maxAge: timeInMilliseconds, force: true}. Glitch already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Glitch header, after inspecting it for testing.
|
||||
Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TSL Certificate.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,19 +8,21 @@ challengeType: 2
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.
|
||||
app.use(helmet()) will automatically include all the middleware introduced above, except noCache(), and contentSecurityPolicy(), but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object.
|
||||
// Example
|
||||
<code>app.use(helmet({</code>
|
||||
<code> frameguard: { // configure</code>
|
||||
<code> action: 'deny'</code>
|
||||
<code> },</code>
|
||||
<code> contentSecurityPolicy: { // enable and configure</code>
|
||||
<code> directives: {</code>
|
||||
<code> defaultSrc: ["self"],</code>
|
||||
<code> styleSrc: ['style.com'],</code>
|
||||
<code> }</code>
|
||||
<code> },</code>
|
||||
<code> dnsPrefetchControl: false // disable</code>
|
||||
<code>}))</code>
|
||||
<h3>Example:</h3>
|
||||
<blockquote>
|
||||
app.use(helmet({<br>
|
||||
frameguard: { // configure<br>
|
||||
action: 'deny'<br>
|
||||
},<br>
|
||||
contentSecurityPolicy: { // enable and configure<br>
|
||||
directives: {<br>
|
||||
defaultSrc: ["self"],<br>
|
||||
styleSrc: ['style.com'],<br>
|
||||
}<br>
|
||||
},<br>
|
||||
dnsPrefetchControl: false // disable<br>
|
||||
}))
|
||||
</blockquote>
|
||||
We introduced each middleware separately for teaching purpose, and for ease of testing. Using the ‘parent’ helmet() middleware is easiest, and cleaner, for a real project.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,21 +7,27 @@ challengeType: 2
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.
|
||||
As hashing is designed to be computationally intensive, it is recommended to do so asyncronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call <code>bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { /*Store hash in your db*/ });</code>
|
||||
<hr>Add this hashing function to your server(we've already defined the variables used in the function for you to use) and log it to the console for you to see! At this point you would normally save the hash to your database.
|
||||
Now when you need to figure out if a new input is the same data as the hash you would just use the compare function <code>bcrypt.compare(myPlaintextPassword, hash, (err, res) => { /*res == true or false*/ });</code>. Add this into your existing hash function(since you need to wait for the hash to complete before calling the compare function) after you log the completed hash and log 'res' to the console within the compare. You should see in the console a hash then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword' then it should say false.
|
||||
<pre>bcrypt.hash('passw0rd!', 13, (err, hash) => {
|
||||
console.log(hash); //$2a$12$Y.PHPE15wR25qrrtgGkiYe2sXo98cjuMCG1YwSI5rJW1DSJp0gEYS
|
||||
bcrypt.compare('passw0rd!', hash, (err, res) => {
|
||||
console.log(res); //true
|
||||
});
|
||||
});</pre>
|
||||
Submit your page when you think you've got it right.
|
||||
As hashing is designed to be computationally intensive, it is recommended to do so asyncronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call <blockquote>bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => {<br>
|
||||
/*Store hash in your db*/<br>
|
||||
});</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
Add this hashing function to your server(we've already defined the variables used in the function for you to use) and log it to the console for you to see! At this point you would normally save the hash to your database.
|
||||
Now when you need to figure out if a new input is the same data as the hash you would just use the compare function <blockquote>bcrypt.compare(myPlaintextPassword, hash, (err, res) => {<br>
|
||||
/*res == true or false*/<br>
|
||||
});</blockquote>. Add this into your existing hash function(since you need to wait for the hash to complete before calling the compare function) after you log the completed hash and log 'res' to the console within the compare. You should see in the console a hash then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword' then it should say false.
|
||||
<blockquote>
|
||||
bcrypt.hash('passw0rd!', 13, (err, hash) => {<br>
|
||||
console.log(hash);<br>
|
||||
//$2a$12$Y.PHPE15wR25qrrtgGkiYe2sXo98cjuMCG1YwSI5rJW1DSJp0gEYS<br>
|
||||
bcrypt.compare('passw0rd!', hash, (err, res) => {<br>
|
||||
console.log(res); //true<br>
|
||||
});<br>
|
||||
});<br>
|
||||
</blockquote>
|
||||
Submit your page when you think you've got it right.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,15 +7,15 @@ challengeType: 2
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.
|
||||
Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling <code>var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);</code>
|
||||
<hr>Add this method of hashing to your code and then log the result to the console. Again, the variables used are already defined in the server so you wont need to adjust them. You may notice even though you are hashing the same password as in the async function, the result in the console is different- this is due to the salt being randomly generated each time as seen by the first 22 characters in the third string of the hash.
|
||||
Now to compare a password input with the new sync hash, you would use the compareSync method: <code>var result = bcrypt.compareSync(myPlaintextPassword, hash);</code> with the result being a boolean true or false. Add this function in and log to the console the result to see it working.
|
||||
Submit your page when you think you've got it right. If you ran into errors during these challenges you can take a look at the example completed code <a href='https://gist.github.com/JosephLivengood/9a2698fb63e42d9d8b4b84235c08b4c4'>here</a>.
|
||||
Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling <blockquote>var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);</blockquote>
|
||||
Add this method of hashing to your code and then log the result to the console. Again, the variables used are already defined in the server so you wont need to adjust them. You may notice even though you are hashing the same password as in the async function, the result in the console is different- this is due to the salt being randomly generated each time as seen by the first 22 characters in the third string of the hash.
|
||||
Now to compare a password input with the new sync hash, you would use the compareSync method: <blockquote>var result = bcrypt.compareSync(myPlaintextPassword, hash);</blockquote> with the result being a boolean true or false.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
Add the function in and log the result to the console to see it working.
|
||||
Submit your page when you think you've got it right.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -7,12 +7,12 @@ challengeType: 2
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.
|
||||
Helmet helps you secure your Express apps by setting various HTTP headers. Install the package, then require it.
|
||||
Helmet helps you secure your Express apps by setting various HTTP headers.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
Install the Helmet package, then require it.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,12 +8,12 @@ challengeType: 2
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.
|
||||
Your page could be put in a <code><frame></code> or <code><iframe></code> without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained executing your page in a malicious context, by mean of iframing. In that context a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.
|
||||
We don’t need our app to be framed. You should use <code>helmet.frameguard()</code> passing with the configuration object <code>{action: 'deny'}</code>.
|
||||
We don’t need our app to be framed.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
Use <code>helmet.frameguard()</code> passing with the configuration object <code>{action: 'deny'}</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,13 +8,13 @@ challengeType: 2
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-infosec/'>GitHub</a>.
|
||||
This challenge highlights one promising new defense that can significantly reduce the risk and impact of many type of attacks in modern browsers. By setting and configuring a Content Security Policy you can prevent the injection of anything unintended into your page. This will protect your app from XSS vulnerabilities, undesired tracking, malicious frames, and much more. CSP works by defining a whitelist of content sources which are trusted. You can configure them for each kind of resource a web page may need (scripts, stylesheets, fonts, frames, media, and so on…). There are multiple directives available, so a website owner can have a granular control. See HTML 5 Rocks, KeyCDN for more details. Unfortunately CSP is unsupported by older browser.
|
||||
By default, directives are wide open, so it’s important to set the defaultSrc directive as a fallback. Helmet supports both defaultSrc and default-src naming styles. The fallback applies for most of the unspecified directives. In this exercise, use helmet.contentSecurityPolicy(), and configure it setting the defaultSrc directive to ["self"] (the list of allowed sources must be in an array), in order to trust only your website address by default. Set also the scriptSrc directive so that you will allow scripts to be downloaded from your website, and from the domain 'trusted-cdn.com'.
|
||||
Hint: in the "'self'" keyword, the single quotes are part of the keyword itself, so it needs to be enclosed in double quotes to be working.
|
||||
By default, directives are wide open, so it’s important to set the defaultSrc directive as a fallback. Helmet supports both defaultSrc and default-src naming styles. The fallback applies for most of the unspecified directives.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
In this exercise, use helmet.contentSecurityPolicy(), and configure it setting the defaultSrc directive to ["self"] (the list of allowed sources must be in an array), in order to trust only your website address by default. Set also the scriptSrc directive so that you will allow scripts to be downloaded from your website, and from the domain 'trusted-cdn.com'.
|
||||
Hint: in the <code>self</code> keyword, the single quotes are part of the keyword itself, so it needs to be enclosed in double quotes to be working.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -9,13 +9,12 @@ challengeType: 2
|
||||
For the following challenges, you will be working with a new starter project that is different from earlier challenges. This project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-bcrypt/'>GitHub</a>.
|
||||
BCrypt hashes are very secure. A hash is basically a fingerprint of the original data- always unique. This is accomplished by feeding the original data into a algorithm and having returned a fixed length result. To further complicate this process and make it more secure, you can also <em>salt</em> your hash. Salting your hash involves adding random data to the original data before the hashing process which makes it even harder to crack the hash.
|
||||
BCrypt hashes will always looks like <code>$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm</code> which does have a structure. The first small bit of data <code>$2a</code> is defining what kind of hash algorithm was used. The next portion <code>$13</code> defines the <em>cost</em>. Cost is about how much power it takes to compute the hash. It is on a logarithmic scale of 2^cost and determines how many times the data is put through the hashing algorithm. For example, at a cost of 10 you are able to hash 10 passwords a second on an average computer, however at a cost of 15 it takes 3 seconds per hash... and to take it further, at a cost of 31 it would takes multiple days to complete a hash. A cost of 12 is considered very secure at this time. The last portion of your hash <code>$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm</code>, looks like 1 large string of numbers, periods, and letters but it is actually 2 separate pieces of information. The first 22 characters is the salt in plain text, and the rest is the hashed password!
|
||||
<hr>To begin using BCrypt, add it as a dependency in your project and require it as 'bcrypt' in your server.
|
||||
Submit your page when you think you've got it right.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
To begin using BCrypt, add it as a dependency in your project and require it as 'bcrypt' in your server.
|
||||
Submit your page when you think you've got it right.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
Reference in New Issue
Block a user