diff --git a/certificates.md b/certificates.md index aa7a9ea..ab11e79 100644 --- a/certificates.md +++ b/certificates.md @@ -4,13 +4,13 @@ title: SSL Certificates nav_order: 4 --- -## SSL Certificates +# SSL Certificates SSL certificates are a small data files that cryptographically establish an encrypted link between a web server and a browser. SSL certificates help protect user data by keeping it private and ensuring that this information is passed securely between the web server and browser using the encrypted link. By using SSL certificates on your website, you can prevent hackers from intercepting a user's private information after it has been submitted to the server. SSL certificates are considered a security requirement for most modern websites. As such, the University Technology Services (UTS) at McMaster requires web applications that want to use SSO to have SSL certificates as well. Before registering your SPA on the Microsoft Azure Directory, you will need to request SSL certificates from UTS. This section of the learning module will guide you through the process of generating the required files to request SSL certificates and setting up those certificates on your dockerized Next.js application. -### Create CSR with OpenSSL +## Create CSR with OpenSSL A Certificate Signing Request, CSR, is a file you obtain to request an SSL certificate from a Certificate Authority. @@ -30,13 +30,13 @@ openssl> req -new -key server.key -out server.csr You will be prompted to enter your organization information and one critical attribute, common name. The common name is the fully qualified domain name (FQDN) of your server. -### Submit CSR to Certificate Authority +## Submit CSR to Certificate Authority -#### Create a Support Ticket With UTS +### Create a Support Ticket With UTS Once you have the CSR file ready, you can start a support ticket with UTS using the [Technology Services Jira Portal](https://macservicedesk.mcmaster.ca/plugins/servlet/desk/portal/742). Click on "Submit an IT Request" and fill out the form. Make sure to mention that you are requesting a certificate for your website and that you already generated the CSR file. Remember to attach the CSR file to the ticket before submitting it. -#### Submit Certificate Request Using Sectigo Console +### Submit Certificate Request Using Sectigo Console Assuming you have the permission and credentials for managing certificates using the Sectigo Console, sign onto Sectigo Console and select the SSL Certificates section. Click the green “add+” button. You will then be prompted to select an enrolment method. @@ -57,7 +57,7 @@ Next, upload the CSR file. After the CSR is uploaded, review the content embedde Finally, accept the EULA terms and conditions to complete the request process. This will put the certificate in the queue waiting for approval. For more detail, please visit [McMaster Information Security website](https://informationsecurity.mcmaster.ca/certificate-request-process-for-sectigo-console-users/). -### Using the SSL Certificates +## Using the SSL Certificates When your SSL certificates are ready, you will receive an email from Sectigo with links to download these certificates in various formats. We recommend using the "Certificate (w/ issuer after), PEM encoded" format. diff --git a/local-storage.md b/local-storage.md index 37c23c2..5378162 100644 --- a/local-storage.md +++ b/local-storage.md @@ -4,13 +4,13 @@ title: Secure Local Storage nav_order: 7 --- -## Securely Storing Data in Local Storage in a Next.js SPA +# Securely Storing Data in Local Storage in a Next.js SPA Local storage is a type of client-side web storage that allows web applications to store data locally within the user’s browser. This web API enables developers to store key-value pairs in the browser’s memory without an expiration date. Developers often employ this tool to persist data across browser sessions and page refreshes. Local storage can be useful for storing user preferences (language, theme, etc.) or session data. Storing sensitive user information to the browser's local storage is often discouraged between it can be easily accessed by malicious scripts. User information should always be stored on the server side where it benefits from added security measures. Nevertheless, it is always a good idea to encrypt any information that you store in the local storage especially if you suspect that it can be used for malicious attacks. -### The `react-secure-storage` library +## The `react-secure-storage` library The [`react-secure-storage`](https://www.npmjs.com/package/react-secure-storage) library uses a combination of AES-256 encryption for securing data stored in the browser's local storage. This library generates a secure key for every browser and encrypt the data using this key, which means only the browser which encrypted the data can decrypt it. This added security measure will prevent hackers from using any data that they acquired from a user's local storage. @@ -193,7 +193,7 @@ const handleDelete = () => { } ``` -6. Clearing the local storage: +6. **Clearing the local storage:** Finally, we will add a `handleClear` function that deletes all saved data from the local storage using the `clear()` method provided by `secureLocalStorage`: @@ -369,7 +369,7 @@ export default function Page_1() { {% endraw %} ``` -### Testing +## Testing Navigate to "Page 1" by clicking the corresponding button after logging in. You will be presented with the following page: diff --git a/security-headers.md b/security-headers.md index 0ee9c01..2ebf524 100644 --- a/security-headers.md +++ b/security-headers.md @@ -19,19 +19,19 @@ By adding security headers to the response of our pages, we can minimize the pos Next.js allows you to set security headers from the `next.config.js` file situated in the main folder of your project. We will make use of six different HTTP security headers to help protect our application. -#### `X-Frame-Options` header +### `X-Frame-Options` header The `X-Frame-Options` header is designed to prevent clickjacking attempts on a website by ensuring that the site’s content is not embedded in other websites. We will set the value of the `X-Frame-Options` header to `DENY` in order to prevent browsers from loading our website in an `