diff --git a/code/final/HmsBlazor/HmsBlazor.Client/HmsBlazor.Client.csproj b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/HmsBlazor.Client.csproj similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/HmsBlazor.Client.csproj rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/HmsBlazor.Client.csproj diff --git a/code/final/HmsBlazor/HmsBlazor.Client/Pages/Counter.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/Pages/Counter.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/Pages/Counter.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/Pages/Counter.razor diff --git a/code/final/HmsBlazor/HmsBlazor.Client/Program.cs b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/Program.cs similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/Program.cs rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/Program.cs diff --git a/code/final/HmsBlazor/HmsBlazor.Client/_Imports.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/_Imports.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/_Imports.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/_Imports.razor diff --git a/code/final/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.Development.json b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.Development.json similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.Development.json rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.Development.json diff --git a/code/final/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.json b/code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.json similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.json rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.Client/wwwroot/appsettings.json diff --git a/code/final/HmsBlazor/HmsBlazor.sln b/code/final/forms_migrated/HmsBlazor/HmsBlazor.sln similarity index 100% rename from code/final/HmsBlazor/HmsBlazor.sln rename to code/final/forms_migrated/HmsBlazor/HmsBlazor.sln diff --git a/code/final/HmsBlazor/HmsBlazor/Components/App.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/App.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/App.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/App.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor.css b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor.css similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor.css rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/MainLayout.razor.css diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor.css b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor.css similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor.css rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Layout/NavMenu.razor.css diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/AddRoom.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/AddRoom.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/AddRoom.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/AddRoom.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/BillHistory.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/BillHistory.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/BillHistory.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/BillHistory.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/CustomerDetails.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/CustomerDetails.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/CustomerDetails.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/CustomerDetails.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/Error.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Error.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/Error.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Error.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/ExtraService.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/ExtraService.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/ExtraService.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/ExtraService.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/FoodMenu.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/FoodMenu.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/FoodMenu.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/FoodMenu.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/Home.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Home.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/Home.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Home.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/Login.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Login.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/Login.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Login.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Pages/Reservation.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Reservation.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Pages/Reservation.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Pages/Reservation.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/Routes.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Routes.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/Routes.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/Routes.razor diff --git a/code/final/HmsBlazor/HmsBlazor/Components/_Imports.razor b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/_Imports.razor similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Components/_Imports.razor rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Components/_Imports.razor diff --git a/code/final/HmsBlazor/HmsBlazor/DataAccess.cs b/code/final/forms_migrated/HmsBlazor/HmsBlazor/DataAccess.cs similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/DataAccess.cs rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/DataAccess.cs diff --git a/code/final/HmsBlazor/HmsBlazor/HmsBlazor.csproj b/code/final/forms_migrated/HmsBlazor/HmsBlazor/HmsBlazor.csproj similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/HmsBlazor.csproj rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/HmsBlazor.csproj diff --git a/code/final/HmsBlazor/HmsBlazor/Program.cs b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Program.cs similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Program.cs rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Program.cs diff --git a/code/final/HmsBlazor/HmsBlazor/Properties/launchSettings.json b/code/final/forms_migrated/HmsBlazor/HmsBlazor/Properties/launchSettings.json similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/Properties/launchSettings.json rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/Properties/launchSettings.json diff --git a/code/final/HmsBlazor/HmsBlazor/appsettings.Development.json b/code/final/forms_migrated/HmsBlazor/HmsBlazor/appsettings.Development.json similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/appsettings.Development.json rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/appsettings.Development.json diff --git a/code/final/HmsBlazor/HmsBlazor/appsettings.json b/code/final/forms_migrated/HmsBlazor/HmsBlazor/appsettings.json similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/appsettings.json rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/appsettings.json diff --git a/code/final/HmsBlazor/HmsBlazor/wwwroot/app.css b/code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/app.css similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/wwwroot/app.css rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/app.css diff --git a/code/final/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css b/code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css diff --git a/code/final/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css.map b/code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css.map similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css.map rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/bootstrap/bootstrap.min.css.map diff --git a/code/final/HmsBlazor/HmsBlazor/wwwroot/favicon.png b/code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/favicon.png similarity index 100% rename from code/final/HmsBlazor/HmsBlazor/wwwroot/favicon.png rename to code/final/forms_migrated/HmsBlazor/HmsBlazor/wwwroot/favicon.png diff --git a/labs/Lab-1--Migrating-forms.md b/labs/Lab-1--Migrating-forms.md deleted file mode 100644 index d32d943..0000000 --- a/labs/Lab-1--Migrating-forms.md +++ /dev/null @@ -1,53 +0,0 @@ -In this Hands on Lab you are going to migrate the existign windows Forms application into a Blazor application. - -For each form we have in the exisitng forms application we are hoing to use chat GPT4-o large language model to help us with the conversion. For this you need to have access to the OpenAI playground. - -We need to create a system prompt, to instruct the Large Language Model to help us with the conversion. Use the following prompt for the system prompt: - -``` text -You are an AI programming assistant. Follow the user's requirements carefully and to the letter. First, think step-by-step and describe your plan for what to build in pseudocode, written out in great detail. Then, output the code in a single code block. Minimize any other prose. You specialize in converting Windows forms 4.8 files to Blazor .NET 8.0 pages with rendermode InteractiveServer. The data access code that is in the source files is kept the same and the data access class is injected using dependency injection. -Each user prompt contains the windows forms file to convert and the output is c# and .NET framework 8, no markdown and no explanation. -You are only allowed to use standard controls and the blazor bootstrap controls. -``` -When we are using the Large Language model we need to set a couple of parameters. You can find these parameters on the right hand side of the playground. Set the parameters as shown in the follwoing screenshot: -![model configuration](images/image.png) -Select the `Model` to be gpt-4o, `Max Response` to 4096, `Temperature` to 0.1 and `Top P` also to 0.1 - -Setting the `Max response` higher than 4096 will result in an error, since the gpt-4o model can not do more tokens than this amount. By setting the `Temprature` to a low value, we limit the randomness of the response we will get. The same goes for the `Top P` parameter. We keep these values low, so we get somewhat predicatable outcomes. Feel free during the lab to experiment with various values. - -## Converting AddRoom.cs -You select all the code that is in the file `AddRoom.cs` in the windows forms project. -Paste this code in the user prompt in the playground environment. Hit enter, so you feed the request to the model and wait for the output response. The result of the response is what we are going to add to our newly creted Blazor project. We will add the generated pages as server side components in the components folder. - -Copy the output and paste this in a new file with the name `addroom.razor` and place this in the components folder in the server project. - -### Fixing up the generated code -The code that gets generated will contain some minor things that we still need to fix. First of all we need inject the `DataAccess` class, so all data access code that is in the code will be able to compile. Add to the top of the file the following statement: `@inject Project_HMS.DataAccess Da` -Next we need to add a reference `System.Data` so we can resolve types like `DataTable`and `DataSet` which are used in the data access code. This is by adding the `@using System.Data` directive to the page. - -### Making the UI look modern -Depending on how the model generated the code you will find that it created buttons using a css class. For each button ensure there is a `class='btn btn-primary'` stylesheet reference. This ensures the buttons are shown using the default blazor css markup that is available in the project. - -### Testing our first converted page -Compile the blazor project and the moment you see the home scren of the application, type on the url the name of the navigatable component you created. You can see how you can navigate to the page, by looking at the `@page ` directive. Now on the URL add the `` at the end of the URL and see if you can view the page. - -The result of the page should be something like the following: - -![alt text](images/image-1.png) - -When you double click one of the rowns in the table, you will see the text fields are filled and when you click the clear button the fields will be empty. The moment you double click a row of a room that has not been booked, you can click delete and it will be removed from the database. When you fill in the Category, Is Booked and Room Cost fields and add Save, the room will be added to the database. - -## Converting BillHistory.cs -Here we take the exact same approach, we copy all the windows forms code we find in the `BillHistory.cs` file and we paste it in the user prompt in our AI Playground. Since we already set the parameters and the system prompt, the only thing we need to do is after pasting, hit enter and wait for the result. - -Copy the results into a new file called BillHistry.razor and put it in the server project in the components folder. - -We need to do the similar fixup of the code after generation. You add the `@inject Project_HMS.DataAccess Da` after the page directive, so we can use the data access class. Next we add the `@using System.Data` directive so we can use the types for data access. And you see if you can add some css classes to the generated buttons so they look nice. - -### Testing Bill History.cs -Here you do the same, you compile the project, start it and then navigate to the page by adding the page name as stated in the `@page` directive. - -## converting subsequent files -You do exactly the same steps for all subsequent forms you have in the `Project_HMS` project we provided. After generating the output, you create a corresponding razor page in the server project and you fx some minor things so the code compiles. After each page you test the page, so you end with all pages workking. - -# :clock: If Time Permits: diff --git a/labs/Lab-2--Creating-APIs.md b/labs/Lab-2--Creating-APIs.md deleted file mode 100644 index 8f1f143..0000000 --- a/labs/Lab-2--Creating-APIs.md +++ /dev/null @@ -1,121 +0,0 @@ -# Creating an API for data access and clientside use -In this HOL, you will use the generated razor pages and extract the API that can be used to access the database. By creating an API, we introduce the option to start using the webassembly version of the pages we created, makign the application less resource intensive on the server and hence making it easyer to scale the number of users of your application. - -## Generating an API -For this we are again using the OpenAI playground that we used in the previosu labs. You will keep the paramters of the model the same, but we are going to change the system prompt. For the system prompt you are going to use the following instructions: - -``` text -You are an AI programming assistant. Follow the user's requirements carefully and to the letter. First, think step-by-step and describe your plan for what to build in pseudocode, written out in great detail. Then, output the code in a single code block. Minimize any other prose. You specialize in extracting ASP.NET API controllers out of Blazor .NET 8.0 pages. The APIs you create are Restfull and abstract the dataaccess code you find in the blazor pages. Ensure the results from the queries are mapped to types before returned. - -Each user prompt contains the blazor file from which you extract the API. You respond with no markdown and no explanation. -``` -You can see that we now change the prompt to make it only focus on generating an API controller for each file we feed it. Since all current generated pages contain code to acccess the database, we ask it to take that code and make an API for it. By instructing it to create a `restfull` API we ensure the API makes use of HTTP directives like `Get`, `Put`, `Post` in stead of generating method names for each call. - -### Creating an API for AddRooms.razor -We copy all the code that is currently in the `AddRooms.razor` file. And after we hit enter we wait for the repsonse. Thsi response contains now an API controller that we want to host in the Server project. - -Create a new folder in the server project with the name `Controllers` -Add a new file with the name `RoomController.cs` and paste generated results from the LArge Language Model in this file and save it. - -### Enabling the Blazor Server to host an API -Now we have the controller code available in the project, but the server project also needs to understand the fact it is going to host a webAPI. We also want the API to contain documentation in the OpenAPI specification format, so tools can use this information to generate code to access the API. For this we need to make some changes to the project. -### Host the API controllers - -in the `program.cs` file add the follwoing lines of code: -``` c# -builder.Services.AddControllers(); - -app.MapControllers(); - -app.MapRazorComponents() - .AddInteractiveServerRenderMode() - .AddInteractiveWebAssemblyRenderMode() - .AddAdditionalAssemblies(typeof(Client._Imports).Assembly); -``` - -### add OpenAPI documentation -To add the documentation we need to take the follwoing steps: - -Add references in the project to the following two packages: -``` xml - - -``` -In the `program.cs` file add the following statements: - -``` c# -using Microsoft.AspNetCore.OpenApi; -.... -builder.Services.AddEndpointsApiExplorer(); -builder.Services.AddSwaggerGen(); -... -if (app.Environment.IsDevelopment()) -{ - app.UseSwagger(); - app.UseSwaggerUI(); -} - -``` -### Testing the Controller -After making these changes, start the blazor application and then navigate to the api. -e.g. for our `RoomsController.cs` api, we can browse to the location: `https://localhost:7000/api/room` and this wll result in a list of rooms returned in a json document. - -> **Fixing SQL Injection issues** -The code that we now have, has some serious sequrity vulnerabilities. This has to do with API methods that accept user input from the querystring and without checkign and validation concatenating it to the SQL statements that are used to access the database. We will adress this in later lab, but be aware this is the case and we need to fix this before we would deploy our application! - -## Creating subsequent controllers -Now repeat this process for all razor pages that we have in the project, so we have API controllers for each resource that we can access in our application. - -# Rewiring the razor pages -Now we have API controllers, but our razor pages are still working with direct access to the database. In order to make the razor pages use the controllers that we just created we are going to use CoPIlot in our IDE, since Copilot has much more context about our application and can help us with creating these changes. - -> Note: This part of the HOL expect that you have activated your Copilot voucher, so you can use copilot in the codespace environment. - -### Prompting Copilot chat to make the required changes -Copilot chat has the option to reference files when you give it a prompt. We are going to make a very specific prompt for each razor page that we have. The prompt in the chat is as follows: - -``` text -convert the file # and change all the code refering to data access code to use the api that is created in # -``` -In this prompt we refer to the blazor page that we want to convert using the `#` symbol. This gives Copilot extra contextand now knows it needs to make changes to only this specific file. We also pass it in a reference to one or more controllers that we generated in the previous excersise. With this copilot knows exactly what code is required to retrieve the same data from the API as the date it is now getting from the data access code that is in the razor pages. - -## Change the AddRooms.razor to use the API -As descibed, open Copilot Chat and give it the follwoing prompt: -``` text -convert the file #AddRoom.razor and change all the code refering to data access code to use the api that is created in #RoomController.cs -``` - -Next Copilot will suggest the changes needed and you can click the preview button to see the suggested changes. -Accept the changes and see how it converted the data access code to code that now will use HttpClient to access the API controller and then get the data from there. - -In order to use this code, we also need to make a few changes, since the HttpClient is not yet available as an injected class. For this we are registering this in the `program.cs` file with the following statements: - -``` c# -var baseAddress = builder.Configuration.GetValue("BaseUrl"); - -builder.Services.AddScoped(http => new HttpClient -{ - BaseAddress = new Uri(baseAddress) -}); -``` -This code retrieves the base URI of the appliction from the configuration context. This configuration needs to be provided. For this we change the `appsettings.json` file to contain the extra line with the BaseUrl configuration. This looks as follows: -``` json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "BaseUrl": "https://localhost:7000" -} -``` -Now compile the application and navigate tot the addroom blazor component as we did in the previous hands-on. -Now you will see the exact same page, but the data is now comming from the WebAPI that we are hosting. - -## Finalizing API usage -For all the subsequent razor pages do exactly the same. Prompt Copilot to make the changes to use the API controllers. If there is a page that requires more then one controller, provide the additional references to the othe controllers where the data is to be retrieved from. - -# Conclusion -We now used **OpenAI** to first generate our controller classes and then used **Copilot** to make the code changes we need to use the API. We now have our application using a multi tier approach where the UI is generated on the server, to retrieve data or modify data we use an API that is hosted on the server and we now have a web application that uses less resources then using a citrix server or Azure virtual Desktop to host our windows forms application. Giving us scalabillty and much cheaper hosting then we had in the past. \ No newline at end of file diff --git a/labs/Lab-3---Security.md b/labs/Lab-3---Security.md deleted file mode 100644 index 09faf8a..0000000 --- a/labs/Lab-3---Security.md +++ /dev/null @@ -1,18 +0,0 @@ -# Fixing potential security issues in our codebase -The code that we have created at the moment is vulnerable and can be misused by malicious users. For this we need to find those vulerabilities and then fix them. In this lab we are going to use GitHub advanced Security to help us find known vulnerabilites in our code and we are going to use Copilot to help us resolve these issues. - -## Discovering known vulnerabilities -We could of course go through the code line by line ourseves, and then see if we can find code that is vulnerable. This is in some cases very obvious, e.g. sql injection problems where we concatenate sql statements before we execute them and without checking the input we got from the user. - -To help us find also the less obvious security vulnerabilities, we can use GitHub advanced security to help us with this. -This is done using gitHub actions and results in a nice list of items found, with detailed descriptions on what the issue might be. Lets start with enabling this in our repository. - -GitHub advanced security is comprised out of three parts. -- Vulnerability scanning of dependencies -- Code Scanning of own code on known vulnerabilities -- Secret scanning, ensuring you don't add secrets to your source repository - -The next three labs will help you enable this for our project. - - [Lab-3.1-‐-Enabling-and-using-Dependabot-on-your-repository](Lab-3.1-‐-Enabling-and-using-Dependabot-on-your-repository.md) -- [Lab-3.2-‐-Enabling-Code-Scanning](Lab-3.2-‐-Enabling-Code-Scanning.md) -- [Lab-3.3-‐-Enable-Secret-Scanning](Lab-3.3-‐-Enable-Secret-Scanning.md) \ No newline at end of file diff --git "a/labs/Lab-3.1-\342\200\220-Enabling-and-using-Dependabot-on-your-repository.md" "b/labs/Lab-3.1-\342\200\220-Enabling-and-using-Dependabot-on-your-repository.md" deleted file mode 100644 index bcda6c0..0000000 --- "a/labs/Lab-3.1-\342\200\220-Enabling-and-using-Dependabot-on-your-repository.md" +++ /dev/null @@ -1,67 +0,0 @@ -## Objective - -This lab has the goal to teach you about supply chain management and in particular dependency management. You will learn about depency management in GitHub and about Dependabot. How to enable this and practice with Dependabot's ability to update your dependencies automatically. First, you will enable the Dependency Management features, and then you will dive into Dependabot alerts, gaining insights into their crucial role in software security and updates. For those with extra time and dedication to thorough dependency management, there's an optional step about assigning Dependabot alerts to a person for review. - -## Steps -### Step 1: :dependabot: Enabling the Dependency features -Let's start with enabling the Dependency Scanning features in your repository. These features are available in GitHub Advanced Security. This is a paid extension to GitHub but is also free for public repositories. - -- Navigate to the `Settings` tab on your repository -- Under the `Security` category in the menu, click `Code security and analysis features`. -- Click `Enable` for each of these features: - * Dependency graph - * Dependabot alerts - * Dependabot security updates - -![Dependabot - Enabling settings](./images/dependabotsettings.png) - -Now you have enabled the Dependecy Management features. - -### Step 2: :rotating_light: Dependabot alerts -Dependabot alerts tracks security vulnerabilities that apply to your repository’s dependencies. Dependebot proactively scans your repository manifes files for dependencies youcode has on other libraries. For example NuGet, NPM or Ruby packages. Becuase the security experts at GitHub continuously scan and update the vulnerabilities and put this in a database, Dependabot can recognize vulnerable packages and alert on this. It also adds Pull Requests for the found vulnerability with a proposed fix. - - -- Navigate to the `Security` tab on your repository, and click `Dependabot alerts`. Now you can see the active alerts generated by Dependabot. -- Click on an alert. You can see the details on that alert. Dependabot will show you details on the vulnerability and a suggested remediation. -- Review the details of the vulnerability and, if available, the pull request containing the automated security update. -- Optionally, if there isn't already a Dependabot security updates update for the alert, to create a pull request to resolve the vulnerability, click `Create Dependabot security update`. - -### Step 3: :speech_balloon: View Pull Request -A pull request with regards to a security update will always be generated by the Dependabot bot user. Navigate to the pull request that was generated by the Dependabot bot user. - -- Navigate to the `Pull Request` Tab -- Open a Pull Request and view the suggested changes -- When you are happy with the changes and ready to update your dependency and resolve the vulnerability, merge the pull request. -- Check out what you can do with Dependabot by opening the commands an options section in the PR. With some `@dependabot` commands you can quickly interact with the dependabot features. - -## Recommended Bonus: :bulb: Always assign Dependabot alerts to a person for review -By default, Dependabot raises pull requests without any reviewers or assignees. Let's make use of the ability to configure Dependabot to always assign Dependabot alerts to a person. You can perform this kind of configuration using the `dependabot.yml` file. You must store this file in the `.github` directory of your repository. When you add or update the `dependabot.yml` file, this triggers an immediate check for version updates. - -You can use reviewers and assignees to specify reviewers and assignees for all pull requests raised. You can also specify a team but when you specify a team, you must use the full team name, as if you were @mentioning the team (including the organization). - -The example `dependabot.yml` file below changes the npm configuration so that all pull requests opened with version and security updates for npm will have two reviewers and one assignee. -**@@TODO: Change to look at NuGet!** -``` -# dependabot.yml file with -# reviews and an assignee for all npm pull requests - -version: 2 -updates: - # Keep npm dependencies up to date - - package-ecosystem: "npm" - directory: "/" - schedule: - interval: "daily" - # Raise all npm pull requests with reviewers - reviewers: - - "my-org/team-name" - - "octocat" - # Raise all npm pull requests with an assignee - assignees: - - "user-name" -``` - -- Create a file that always assigns Dependabot alerts to yourself using configuration via the `dependabot.yml` file. - -For more information, please refer to: -- [https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates](https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates) diff --git "a/labs/Lab-3.2-\342\200\220-Enabling-Code-Scanning.md" "b/labs/Lab-3.2-\342\200\220-Enabling-Code-Scanning.md" deleted file mode 100644 index f2835db..0000000 --- "a/labs/Lab-3.2-\342\200\220-Enabling-Code-Scanning.md" +++ /dev/null @@ -1,50 +0,0 @@ -## Objective - -This hands-on lab has the goal to teach you how you can set up Code Scanning for your repository and to let you experience how its features help you to find security vulnerabilities and code errors in the code in your repository. Good luck! 👍 - -## Steps - -### Step 1: :shield: Enable Code Scanning -Code scanning is a feature that you use to analyze the code in a GitHub repository to find security vulnerabilities and coding errors. Any problems identified by the analysis are shown in GitHub. - -You can use code scanning to find, triage, and prioritize fixes for existing problems in your code. Code scanning also prevents developers from introducing new problems. You can schedule scans for specific days and times, or trigger scans when a specific event occurs in the repository, such as a push. If code scanning finds a potential vulnerability or error in your code, GitHub displays an alert in the repository. After you fix the code that triggered the alert, GitHub closes the alert. - -- Navigate to the `Settings` of your repository, click `Code Security & analysis` click `Set up | Default` for the `Code Scanning` feature. - -![Code Scanning - Set up](./images/codescanningsetup.PNG) - -- A screen pop ups where you can enable Code Scanning. -- Keep the defaults and click the button Enable CodeQL -- After this step, a GitHub action is triggered in the background. - -### Step 2: :eyeglasses: View Code Scanning Results -Now we want to see the results of the various Code Scanning builds - -- Navigate to the `actions` tab and click the CodeQL workflow. - -From here, you can see the list of workflows with the CodeQL workflow and the run history of the CodeQL workflow. In the default CodeQL analysis workflow, code scanning is configured to analyze your code each time you either push a change to the default branch or any protected branches, or raise a pull request against the default branch. As a result, code scanning will now commence. As you can see on the below screenshot, the workflow is currently running. - -### Step 3: :mag: Analyzing Code Scanning outcomes -- Navigate to the `Security` tab on your repository, and click `Code Scanning alerts`, you can see the active alerts for Code Scanning. From this view, you can view, fix, dismiss, or delete alerts for potential vulnerabilities or errors in your project's code. - -- Each alert highlights a problem with the code and the name of the tool that identified it. You can see the line of code that triggered the alert, as well as properties of the alert, such as the severity, security severity, and the nature of the problem. Alerts also tell you when the issue was first introduced. For alerts identified by CodeQL analysis, you will also see information on how to fix the problem. - -### Fixing SQL Injection issues -In the results you will find a couple of SQL injection vulnerabilities that have been found. You can use GitHub copilot to help you resule these issues quite easily. e.g. in the `RoomsController.cs` file there is an API call that can retrieve one room based on the id of the room. This id is passed as parameter in the query string and then it is used without any validation and concatenated to a SQL query. ->**This is extreemly dangerous and an ideal way of an attacker to get all your data from the database and even delete data if they want !** - -When you go to this file and select the implementation of the API call you can bring up the Copilot chat and give it the following prompt: -``` console -Can you rewrite this code so it is not succeptible anymore to a SQL injection attack -``` - -the result will be a suggestion to rewrite the code, including the explanation on how it changed the code. Accept the code and test the application, to see if it still works as expected. Now on the query string add the following, to see if it is still vulnerable: @@TODO FIND HACK On CURRENT IMPLEMENTATION. - - -## More Information -- [Managing code scanning alerts for your repository](https://docs.github.com/en/code-security/secure-coding/managing-code-scanning-alerts-for-your-repository]). - -- [https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning) - -- For more detailed information on managing the Code Scanning alerts, refer to: [https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/managing-code-scanning-alerts-for-your-repository](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/managing-code-scanning-alerts-for-your-repository) - diff --git "a/labs/Lab-3.3-\342\200\220-Enable-Secret-Scanning.md" "b/labs/Lab-3.3-\342\200\220-Enable-Secret-Scanning.md" deleted file mode 100644 index 242d3e9..0000000 --- "a/labs/Lab-3.3-\342\200\220-Enable-Secret-Scanning.md" +++ /dev/null @@ -1,67 +0,0 @@ -## Objective - -This hands-on lab has the goal to teach you how you can set up and enable Secret Scanning and will experience how it is able to scan your repository for known types of secrets and what its capabilities are in order to prevent fraudulent use. Good luck! 👍 - -## Steps - -### Step 1: :shield: Secret Scanning -If your project communicates with an external service, you might use a token or private key for authentication. Tokens and private keys are examples of secrets that a service provider can issue. If you check a secret into a repository, anyone who has read access to the repository can use the secret to access the external service with your privileges. We recommend that you store secrets in a dedicated, secure location outside of the repository for your project. - -Secret scanning will scan your entire Git history on all branches present in your GitHub repository for any secrets. Service providers can partner with GitHub to provide their secret formats for scanning. For more information, see [Secret scanning partner program](https://docs.github.com/en/code-security/secret-scanning/secret-scanning-partner-program). - -If someone checks a secret with a known pattern into a public or private repository on GitHub, secret scanning catches the secret as it's checked in, and helps you mitigate the impact of the leak. Repository administrators are notified about any that contains a secret, and they can quickly view all detected secrets in the Security tab for the repository. - -- Navigate to the `Settings` of your repository, click `Code Security & analysis` click `Enable` for the `Secret Scanning` feature. - -Secret Scanning is now enabled for your repository. - -GitHub performs secret scanning on public and private repositories for secret patterns provided by GitHub and GitHub partners. However, there can be situations where you want to scan for other secret patterns in your private repositories. For example, you might have a secret pattern that is internal to your organization. For these situations, you can define custom secret scanning patterns in your enterprise, organization, or private repository on GitHub. - -You can define up to 20 custom patterns for each private repository, organization, or enterprise account and options to define these are enabled after you enable the `Secret Scanning` feature in your `Security & analysis` settings. We'll not go into the custom patterns in this lab, but for more information refer to: [https://docs.github.com/en/code-security/secret-scanning/defining-custom-patterns-for-secret-scanning](https://docs.github.com/en/code-security/secret-scanning/defining-custom-patterns-for-secret-scanning) - -Now that you've set up Secret Scanning, let's understand where you can view the Secret Scanning alerts and ultimately try it out and trigger it ourselves by inserting a connection string in the next parts of the lab exercise. - -### Step 2: :lock_with_ink_pen: Managing Secret Scanning alerts -- Navigate to the `Security` tab on your repository, and click `Secret Scanning alerts`, you can see the active alerts for Secret Scanning. Here, you can view and close alerts for secrets checked in to your repository. -- When you click on a Secret Scanning alert, you can see it's details. - -### Step 3: :rotating_light: Secret Scanning: Alert notifications -When a new secret is detected, GitHub notifies all users with access to security alerts for the repository according to their notification preferences. You will receive alerts if you are watching the repository, have enabled notifications for security alerts or for all the activity on the repository, are the author of the commit that contains the secret and are not ignoring the repository. - -Once a secret has been committed to a repository, you should consider the secret compromised. GitHub recommends the following actions for compromised secrets: - -* For a compromised GitHub personal access token, delete the compromised token, create a new token, and update any services that use the old token. -* For all other secrets, first verify that the secret committed to GitHub is valid. If so, create a new secret, update any services that use the old secret, and then delete the old secret. - -### :bulb: Triggering Secret Scanning by inserting a connection string -You can trigger the Secret Scanning functionality by inserting a secret in your repository yourself. To do so, try if you can manage to execute the following steps: -* Go to the [Azure Portal](https://portal.azure.com/) -* Create, for example, a storage account within your own subscription -* Once this is created, copy the connection string to the storage account (navigate to `Access keys`) -* Go back to your code -* Open the file `/frontend/appsettings.json`, -* At the end of the file, append the file with a `StorageAccountConnectionString` element and paste the copied connection string. -* Commit your changes and see whether you have been able to trigger a Secret Scanning alert (give the workflow some time to run after the commit) - -### :pilot: Using Copilot to generate a custom secret pattern -What if you have some patterns within your company that you never want to commit to your source contol system. You can also use GHAS Secret scanning to add custom patterns. This is all based on Regular Expressions. So, let's as Copilot to generate a Regular Expression for a custom patterns. - -- Open Copilot chat in your Codespace by pressing the chat balloons in your left hand command bar -- Ask Copilot to generate a regular expression for this demo data - - bcmp_aaht5564papqq-dsd9229s - - bcmp_983wejxnczldd-dfihdsf3 - - bcmp_3489jdsblzdvh-ewrvc3dc - - bcmp_bhb87wejkdvje-asdvne3r - - bcmp_okdf9cm8i4kdd-sdfgd3ss -- Ask `Generate a RegEx to match this data` and paste this data -- In you repository, open Settings and navigate to Code Security & Analysis -- Scroll to the Secret settings and press `New Custom Pattern` -- Use the RegEx and save the custom pattern -- Take one of the examples above and try to check this in, by modifying a codefile - - -## More Information - -- For GitHub Secret Scanning documentation, please refer to: [https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning](https://docs.github.com/en/code-security/secret-scanning/about-secret-scanning) - -- For more information, please refer to: [https://docs.github.com/en/code-security/secret-scanning/managing-alerts-from-secret-scanning](https://docs.github.com/en/code-security/secret-scanning/managing-alerts-from-secret-scanning) diff --git a/labs/create-blazor-app.md b/labs/create-blazor-app.md deleted file mode 100644 index e9b5b52..0000000 --- a/labs/create-blazor-app.md +++ /dev/null @@ -1,52 +0,0 @@ -# Lab XX: Create the Blazor application - -First, scaffold a new Blazor application. Later in the labs, we want to leverage the automatic interactivity mode that allows us to seamlessly switch between Server or Client side rendering. Therefore, we use the `blazor` template with the `auto` interactivity mode. - -- In the Terminal in your Codespace, type: - -```bash -dotnet new blazor -int auto -o code/start/HmsBlazor -``` - -Now, we will start the migration. In this first iteration, we will reuse the existing `DataAccess` logic from the Forms application. - -- Copy the `DataAccess.cs` file from the `code/start/legacy/Project_HMS/Project_HMS` folder into your new Blazor app (in `code/start/HmsBlazor/HmsBlazor`). If you like, you can change the namespace the class is in, or leave it as is. For this lab, we assume that the fully qualified class name will remain `Project_HMS.DataAccess`. -- For interacting with SQL Server, the old code uses the `System.Data.SqlClient` library. This has been replaced by Microsoft by a more modern implementation called `Microsoft.Data.SqlClient` which comes as a Nuget package. We need to install it: - -```bash -dotnet add code/start/HmsBlazor/HmsBlazor/HmsBlazor.csproj package Microsoft.Data.SqlClient -``` - -- Now we just need to change 1 `using` statement at the top of the `DataAccess.cs` file that you copied: - -~~`using System.Data.SqlClient`~~ - -Now becomes: - -`using Microsoft.Data.SqlClient;` - -Now you can compile your Blazor application again. - -In Blazor, we can use Dependency Injection for using the `DataAccess` class in our pages. Therefore, we need to register it in the DI Container. - -- Open `Program.cs` in your `HmsBlazor` project -- Find the following line: - -```csharp -var app = builder.Build(); -``` - -- Just _before_ this line, add: - -```csharp -builder.Services.AddScoped(); -``` - -Since we're using a development container for SQL Server, we need to tweak the connection string in `DataAccess.cs` so that we don't run into connection errors. - -- On `line 43` in `DataAccess.cs`, at the end of the connection string, add: - -`;TrustServerCertificate=True` - -This will make the `SqlConnection` accept the development certificate that the SQL Docker container returns. - diff --git a/labs/create-codespace-with-containers.md b/labs/create-codespace-with-containers.md deleted file mode 100644 index 074da0b..0000000 --- a/labs/create-codespace-with-containers.md +++ /dev/null @@ -1,3 +0,0 @@ - - -## TODO: copy from last year's workshop diff --git a/labs/images/codescanningsetup.png b/labs/images/codescanningsetup.png deleted file mode 100644 index 54c4d85..0000000 Binary files a/labs/images/codescanningsetup.png and /dev/null differ diff --git a/labs/images/dependabotsettings.png b/labs/images/dependabotsettings.png deleted file mode 100644 index efa9b78..0000000 Binary files a/labs/images/dependabotsettings.png and /dev/null differ diff --git a/labs/images/image-1.png b/labs/images/image-1.png deleted file mode 100644 index e4c91bf..0000000 Binary files a/labs/images/image-1.png and /dev/null differ diff --git a/labs/images/image.png b/labs/images/image.png deleted file mode 100644 index b7d25ee..0000000 Binary files a/labs/images/image.png and /dev/null differ