Merge pull request #19 from Programeerik/added-csp-removed-inline-style

Added csp header to fix security issues. Now the scripts of only defined websites can be used. And I've removed all inline styling.

Author: Programeerik

ShowcaseProject/ShowcaseAPI/Dockerfile

@@ -1,41 +1,18 @@
-# Base image for running the .NET API
-FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
-WORKDIR /app
-EXPOSE 8080
-EXPOSE 8081
-
-# Development stage (voor dotnet watch)
 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS dev
 WORKDIR /app
+
 COPY ./ShowcaseAPI ./ShowcaseAPI
 WORKDIR /app/ShowcaseAPI
 CMD ["dotnet", "watch", "run", "--no-launch-profile", "--urls", "http://+:80"]
 
-# Build stage (voor productie)
 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
 WORKDIR /src
-COPY ["ShowcaseAPI/ShowcaseAPI.csproj", "ShowcaseAPI/"]
-RUN dotnet restore "ShowcaseAPI/ShowcaseAPI.csproj"
-
-# Copy and build source
 COPY . .
-WORKDIR "/src/ShowcaseAPI"
-RUN dotnet build "ShowcaseAPI.csproj" -c Release -o /app/build
+RUN dotnet restore ./ShowcaseAPI/ShowcaseAPI.csproj
+WORKDIR /src/ShowcaseAPI
+RUN dotnet publish -c Release -o /app/publish /p:UseAppHost=false
 
-# Publish (voor productie)
-FROM build AS publish
-RUN dotnet publish "ShowcaseAPI.csproj" -c Release -o /app/publish /p:UseAppHost=false
-
-# Final production stage
 FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS final
 WORKDIR /app
-
-# Kopieer wait script
-COPY ShowcaseAPI/wait-for-sql.sh .
-RUN chmod +x wait-for-sql.sh
-
-# Kopieer build output
-COPY --from=publish /app/publish .
-
-# Start script dat wacht op SQL Server
-ENTRYPOINT ["./wait-for-sql.sh"]
+COPY --from=build /app/publish .
+ENTRYPOINT ["dotnet", "ShowcaseAPI.dll"]

ShowcaseProject/ShowcaseAPI/Program.cs

@@ -11,7 +11,7 @@
 
 builder.Services.AddCors(options =>
 {
-    options.AddPolicy("AllowFrontend",
+    options.AddPolicy("AllowFrontendDevelopment",
         policy =>
         {
             policy.WithOrigins("http://localhost:8080")
@@ -20,7 +20,19 @@
                   .AllowCredentials();
         });
 });
- 
+
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowFrontendProduction",
+        policy =>
+        {
+            policy.WithOrigins("https://showcaseapi-demo123.eastus.azurecontainer.io")
+                  .AllowAnyHeader()
+                  .AllowAnyMethod()
+                  .AllowCredentials();
+        });
+});
+
 Env.Load();
 
 // Add services to the container.
@@ -73,8 +85,14 @@
 {
     app.UseHttpsRedirection();
 }
+if (app.Environment.IsDevelopment())
+{
+    app.UseCors("AllowFrontendDevelopment");
+}else
+{
+    app.UseCors("AllowFrontendProduction");
 
-app.UseCors("AllowFrontend");
+}
 
 app.MapHub<GameHub>("/hub/game");
 

ShowcaseProject/ShowcaseFrontend/Dockerfile

@@ -1,6 +1,7 @@
 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS dev
 WORKDIR /app
 
+
 COPY . .
 RUN dotnet restore ./ShowcaseFrontend//ShowcaseFrontend.csproj
 

ShowcaseProject/ShowcaseFrontend/Program.cs

@@ -40,7 +40,21 @@
     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
 }
-
+app.Use(async (context, next) =>
+{
+    context.Response.Headers.Append("Content-Security-Policy",
+        "default-src 'self'; " +
+        "script-src 'self' https://cdnjs.cloudflare.com ; " +
+        "style-src 'self' 'sha256-xyz4zkCjuC3lZcD2UmnqDG0vurmq12W/XKM5Vd0+MlQ='; " +
+        "font-src 'self' ; " +
+        "img-src 'self'; " +
+        "object-src 'none'; " +
+        "frame-ancestors 'none'; " +
+        "base-uri 'self'; " +
+        "form-action 'self';"+
+        "connect-src 'self'  ws://localhost:* http://localhost:5001 https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js.map; ");
+    await next();
+});
 if (!app.Environment.IsDevelopment())
 {
     app.UseHttpsRedirection();

ShowcaseProject/ShowcaseFrontend/Views/Game/Index.cshtml

@@ -17,9 +17,9 @@
     <input type="submit" name="submit" value="Create Game" />
 </form>
 
-<button id="StartGame" style="display: none;">Start Game</button>
+<button id="StartGame" class="hide-game-element">Start Game</button>
 
-<div id="GameBoard" style="display: none;">
+<div id="GameBoard" class="hide-game-element">
 
 </div>
 

ShowcaseProject/ShowcaseFrontend/Views/Shared/_Layout.cshtml

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="nl-nl">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="~/css/gdpr.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/profilepage.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/contactpage.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/game.css" asp-append-version="true" />
 </head>
 <body>
     <header>

ShowcaseProject/ShowcaseFrontend/wwwroot/css/game.css

@@ -0,0 +1,33 @@
+.hide-game-element {
+    display: none;
+}
+
+#GameBoard {
+    display: grid;
+    width: 150px;
+    grid-template-columns: auto auto auto;
+    gap: 5px 5px;
+}
+
+#GameBoard div {
+    border:solid #333333 1px;
+    width:50px;
+    height:50px;
+}
+
+#display-block {
+    display: block;
+}
+
+#GameEndPopUp {
+    z-index: 10;
+    width: 50%;
+    position: absolute;
+    top: 20%;
+    left: 25%;
+    background: #333333;
+    opacity: 0.7;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+}

ShowcaseProject/ShowcaseFrontend/wwwroot/js/game.js

@@ -53,7 +53,7 @@
         groupNameElement.innerHTML = groupName;
         createUserListElements(userIds);
         if (userIds.length >= 2) {
-            btnStartGame.setAttribute("style", "display:block;");
+            btnStartGame.classList.remove("hide-game-element");
         }
     });
 
@@ -62,14 +62,14 @@
         groupNameElement.innerHTML = groupName;
         createUserListElements(userIds);
         if (userIds.length >= 2) {
-            btnStartGame.setAttribute("style", "display:block;");
+            btnStartGame.classList.remove("hide-game-element");
         }
     });
 
     await connection.on("ShowUserList", (userIds) => {
         createUserListElements(userIds);
         if (userIds.length >= 2) {
-            btnStartGame.setAttribute("style", "display:block;");
+            btnStartGame.classList.remove("hide-game-element");
         }
     });
 
@@ -132,11 +132,11 @@
 
     async function createGameBoard(groupName,playerSymbol) {
         const board = document.querySelector("#GameBoard");
-        board.setAttribute("style", "display:grid;width: 150px;grid-template-columns: auto auto auto;gap: 5px 5px;");
+        //board.setAttribute("style", "display:grid;width: 150px;grid-template-columns: auto auto auto;gap: 5px 5px;");
         for (let i = 0; i < 9; i++) {
             let span = document.createElement("div");
             span.innerHTML = " ";
-            span.style = "border:solid;#333333;1px;width:50px;height:50px;";
+            //span.style = "border:solid;#333333;1px;width:50px;height:50px;";
             span.id = "cell" + i;
             span.onclick = async () => {
                 let cell = document.getElementById("cell" + i);
@@ -171,7 +171,6 @@
         const popup = document.createElement("div");
         popup.id = "GameEndPopUp";
         popup.innerHTML = message;
-        popup.style = "z-index: 10;width: 50%;position: absolute;top: 20%;left: 25%;background: #333333;opacity: 0.7;color: white;text-align: center;padding: 1rem;"
 
         const button = document.createElement("button");
         button.onclick = () => {

ShowcaseProject/docker-compose.yml

@@ -16,7 +16,7 @@ services:
     build:
       context: .
       dockerfile: ShowcaseFrontend/Dockerfile
-      target: dev
+      target: "dev"
     container_name: showcasefrontend
     ports:
       - "8080:80"