Skip to content

Fix splash page styling issues #7

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

Jump to bottom
Merged
jerome3o-anthropic merged 1 commit into from
Aug 27, 2025
Merged

Fix splash page styling issues #7

jerome3o-anthropic merged 1 commit into from
Aug 27, 2025
+198 −187

Conversation

@jerome3o-anthropic
Copy link
Member

@jerome3o-anthropic jerome3o-anthropic commented Aug 27, 2025

Summary

  • Fixed CSP blocking inline styles by moving CSS to external stylesheet
  • Made white MCP logo visible by adding black background
  • Updated specification link to dated version
  • Renamed from "Everything Server" to "Example Server"

Changes

  • Extracted inline CSS from index.html to new styles.css file
  • Added route in index.ts to serve the CSS file with proper content-type
  • Added black background with rounded corners to logo container
  • Updated specification link to point to /specification/2025-06-18
  • Changed title and header text from "MCP Everything Server" to "MCP Example Server"

Test plan

  • Build the project with npm run build
  • Start the server with npm start
  • Navigate to http://localhost:3000
  • Verify the page displays with proper styling
  • Confirm the white MCP logo is visible on black background
  • Check that all links work correctly
  • Test responsive design on mobile viewport

🤖 Generated with Claude Code

@jerome3o-anthropic @claude
Fix splash page styling issues
72fcc29 
- Moved inline CSS to external stylesheet to comply with CSP
- Added black background to logo area for visibility of white MCP logo
- Updated specification link to point to dated version (2025-06-18)
- Changed "MCP Everything Server" to "MCP Example Server"
- Added route to serve styles.css file

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-security bot found potential problems Aug 27, 2025
View reviewed changes
src/index.ts
Comment on lines +170 to +174
app.get("/styles.css", (req, res) => {
const cssPath = path.join(__dirname, "static", "styles.css");
res.setHeader('Content-Type', 'text/css');
res.sendFile(cssPath);
});

Check failure

Code scanning / CodeQL

Missing rate limiting High

This route handler performs
a file system access
Loading
, but is not rate-limited.

Copilot Autofix

AI 5 months ago

To address the missing rate limiting in the /styles.css route handler at line 170, we should apply a rate-limiting middleware to restrict how frequently a client can request this resource. The simplest way is to use the popular express-rate-limit package, which is well maintained and purpose-built for this scenario. We'll need to:

  • Import express-rate-limit
  • Create a rate limiter instance, e.g., 100 requests per 15 minutes per IP (similar to the background example).
  • Apply the rate limiter as middleware for the /styles.css route (at line 170) before the handler.

Changes to make:

  • Add a new import for express-rate-limit at the top.
  • Define a rate limiting middleware before route handlers.
  • Apply it directly to the /styles.css route.
    No other changes are needed, and we should not interfere with any existing functionality for other routes.
Suggested changeset 2
src/index.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/src/index.ts b/src/index.ts
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@
 import cors from "cors";
 import express from "express";
 import path from "path";
+import rateLimit from "express-rate-limit";
 import { fileURLToPath } from "url";
 import { EverythingAuthProvider } from "./auth/provider.js";
 import { BASE_URI, PORT } from "./config.js";
@@ -15,6 +16,11 @@
 
 const app = express();
 
+// Set up rate limiter for static assets: max 100 requests per 15 minutes per IP
+const staticAssetLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // limit each IP to 100 requests per windowMs
+});
 // Get the directory of the current module
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -167,7 +173,7 @@
   res.sendFile(logoPath);
 });
 
-app.get("/styles.css", (req, res) => {
+app.get("/styles.css", staticAssetLimiter, (req, res) => {
   const cssPath = path.join(__dirname, "static", "styles.css");
   res.setHeader('Content-Type', 'text/css');
   res.sendFile(cssPath);
EOF
@@ -3,6 +3,7 @@
import cors from "cors";
import express from "express";
import path from "path";
import rateLimit from "express-rate-limit";
import { fileURLToPath } from "url";
import { EverythingAuthProvider } from "./auth/provider.js";
import { BASE_URI, PORT } from "./config.js";
@@ -15,6 +16,11 @@

const app = express();

// Set up rate limiter for static assets: max 100 requests per 15 minutes per IP
const staticAssetLimiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100, // limit each IP to 100 requests per windowMs
});
// Get the directory of the current module
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
@@ -167,7 +173,7 @@
res.sendFile(logoPath);
});

app.get("/styles.css", (req, res) => {
app.get("/styles.css", staticAssetLimiter, (req, res) => {
const cssPath = path.join(__dirname, "static", "styles.css");
res.setHeader('Content-Type', 'text/css');
res.sendFile(cssPath);
package.json
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
-    "raw-body": "^3.0.0"
+    "raw-body": "^3.0.0",
+    "express-rate-limit": "^8.0.1"
   },
   "overrides": {
     "@types/express": "^5.0.0",
EOF
@@ -32,7 +32,8 @@
"cors": "^2.8.5",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"raw-body": "^3.0.0"
"raw-body": "^3.0.0",
"express-rate-limit": "^8.0.1"
},
"overrides": {
"@types/express": "^5.0.0",
This fix introduces these dependencies
Package Version Security advisories
express-rate-limit (npm) 8.0.1 None
Copilot is powered by AI and may make mistakes. Always verify output.
@jerome3o-anthropic jerome3o-anthropic merged commit 4015781 into main Aug 27, 2025
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jerome3o-anthropic