🚧 WIP

SECURITY.md

@@ -2,30 +2,4 @@
 
 ## Reporting a Vulnerability
 
-We take the security of this project seriously. If you have discovered
+Please report security issues to `support@penpot.app`
-a security vulnerability, please do **not** open a public issue.
-
-Please report vulnerabilities via email to: **[support@penpot.app]**
-
-
-### What to include:
-
-* A brief description of the vulnerability.
-* Steps to reproduce the issue.
-* Potential impact if exploited.
-
-We appreciate your patience and your commitment to **responsible disclosure**.
-
----
-
-## Security Contributors
-
-We are incredibly grateful to the following individuals and
-organizations for their help in keeping this project safe.
-
-* **Ali Maharramli** – for identifying critical path traversal vulnerability
-
-
-> **Note:** This list is a work in progress. If you have contributed
-> to the security of this project and would like to be recognized (or
-> prefer to remain anonymous), please let us know.

backend/scripts/_env

@@ -29,6 +29,8 @@ export PENPOT_FLAGS="\
        enable-user-feedback \
        disable-secure-session-cookies \
        enable-smtp \
+       enable-cors \
+       disable-secure-session-cookies \
        enable-prepl-server \
        enable-urepl-server \
        enable-rpc-climit \

backend/src/app/http/middleware.clj

@@ -213,14 +213,14 @@
       (assoc "access-control-allow-origin" origin)
       (assoc "access-control-allow-methods" "GET,POST,DELETE,OPTIONS,PUT,HEAD,PATCH")
       (assoc "access-control-allow-credentials" "true")
-      (assoc "access-control-expose-headers" "x-requested-with, content-type, cookie")
+      (assoc "access-control-expose-headers" "content-type, set-cookie")
-      (assoc "access-control-allow-headers" "x-frontend-version, content-type, accept, x-requested-width")))
+      (assoc "access-control-allow-headers" "x-frontend-version, x-client, x-requested-width, content-type, accept, cookie")))
 
 (defn wrap-cors
   [handler]
   (fn [request]
     (let [response (if (= (yreq/method request) :options)
-                     {::yres/status 200}
+                     {::yres/status 204}
                      (handler request))
           origin   (yreq/get-header request "origin")]
       (update response ::yres/headers with-cors-headers origin))))

docker/images/docker-compose.yaml

@@ -198,6 +198,13 @@ services:
       ## Valkey (or previously Redis) is used for the websockets notifications.
       PENPOT_REDIS_URI: redis://penpot-valkey/0
 
+  penpot-mcp:
+    image: penpotapp/mcp:${PENPOT_VERSION:-latest}
+    restart: always
+
+    networks:
+      - penpot
+
   penpot-postgres:
     image: "postgres:15"
     restart: always

plugins/.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "prettier.singleQuote": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "prettier.prettier-vscode",
   "editor.formatOnSave": true
 }

plugins/apps/colors-to-tokens-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build colors-to-tokens-plugin && pnpm run build:plugin",
+    "build": "ng build colors-to-tokens-plugin",
     "build:dev": "ng build colors-to-tokens-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin --watch",
     "serve": "ng serve colors-to-tokens-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/contrast-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build contrast-plugin && pnpm run build:plugin",
+    "build": "ng build contrast-plugin",
     "build:dev": "ng build contrast-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin --watch",
     "serve": "ng serve contrast-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/create-palette-plugin/eslint.config.js

@@ -3,7 +3,6 @@ import baseConfig from '../../eslint.config.js';
 export default [
   ...baseConfig,
   {
-    files: ['**/*.ts', '**/*.tsx'],
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -23,5 +22,5 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
-  { ignores: ['**/assets/*.js', 'vite.config.ts'] },
+  { ignores: ['vite.config.ts'] },
 ];

plugins/apps/create-palette-plugin/package.json

@@ -8,7 +8,6 @@
     "build": "vite build",
     "build:watch": "vite build --watch --mode development",
     "preview": "vite preview",
-    "init": "concurrently --kill-others --names build,serve \"pnpm run build:watch\" \"pnpm run preview\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/e2e/src/plugins.spec.ts

@@ -11,7 +11,7 @@ import comments from './plugins/create-comments';
 import { Agent } from './utils/agent';
 
 describe('Plugins', () => {
-  it('create board - text - rectable', async () => {
+  it.only('create board - text - rectable', async () => {
     const agent = await Agent();
     const result = await agent.runCode(testingPlugin.toString(), {
       screenshot: 'create-board-text-rect',

plugins/apps/e2e/src/utils/agent.ts

@@ -56,10 +56,13 @@ export async function Agent() {
   console.log('File URL:', fileUrl);
 
   console.log('Launching browser...');
-  const browser = await puppeteer.launch({});
+  const browser = await puppeteer.launch({args: ['--ignore-certificate-errors']});
   const page = await browser.newPage();
 
   await page.setViewport({ width: 1920, height: 1080 });
+  await page.setExtraHTTPHeaders({
+    'X-Client': 'plugins/e2e:puppeter',
+  });
 
   console.log('Setting authentication cookie...');
   page.setCookie({

plugins/apps/e2e/src/utils/api.ts

@@ -1,27 +1,38 @@
 import { FileRpc } from '../models/file-rpc.model';
 
-const apiUrl = 'http://localhost:3449';
+const apiUrl = 'https://localhost:3449';
 
 export async function PenpotApi() {
   if (!process.env['E2E_LOGIN_EMAIL']) {
     throw new Error('E2E_LOGIN_EMAIL not set');
   }
 
+  const body = JSON.stringify({
+    'email': process.env['E2E_LOGIN_EMAIL'],
+    'password': process.env['E2E_LOGIN_PASSWORD'],
+  });
+
   const resultLoginRequest = await fetch(
-    `${apiUrl}/api/rpc/command/login-with-password`,
+    `${apiUrl}/api/main/methods/login-with-password`,
     {
+      credentials: 'include',
       method: 'POST',
       headers: {
-        'Content-Type': 'application/transit+json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify({
+      body: body
-        '~:email': process.env['E2E_LOGIN_EMAIL'],
-        '~:password': process.env['E2E_LOGIN_PASSWORD'],
-      }),
     },
   );
 
+  console.log("AAAAAAAAAAAA", 1, apiUrl)
+  // console.log("AAAAAAAAAAAA", 2, resultLoginRequest);
+
+  console.dir(resultLoginRequest.headers, {depth:20});
+  console.log('Document Cookies:', window.document.cookie);
+
   const loginData = await resultLoginRequest.json();
+
+
   const authToken = resultLoginRequest.headers
     .get('set-cookie')
     ?.split(';')
@@ -35,7 +46,7 @@ export async function PenpotApi() {
     getAuth: () => authToken,
     createFile: async () => {
       const createFileRequest = await fetch(
-        `${apiUrl}/api/rpc/command/create-file`,
+        `${apiUrl}/api/main/methods/create-file`,
         {
           method: 'POST',
           headers: {
@@ -65,7 +76,7 @@ export async function PenpotApi() {
     },
     deleteFile: async (fileId: string) => {
       const deleteFileRequest = await fetch(
-        `${apiUrl}/api/rpc/command/delete-file`,
+        `${apiUrl}/api/main/methods/delete-file`,
         {
           method: 'POST',
           headers: {

plugins/apps/e2e/vite.config.ts

@@ -14,6 +14,6 @@ export default defineConfig({
       reportsDirectory: '../coverage/e2e',
       provider: 'v8',
     },
-    setupFiles: ['dotenv/config'],
+    setupFiles: ['dotenv/config', 'vitest.setup.ts']
   },
 });

plugins/apps/e2e/vitest.setup.ts

@@ -0,0 +1,3 @@
+// import { vi } from 'vitest';
+
+window.location.href = 'https://localhost:3449';

plugins/apps/icons-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build icons-plugin && pnpm run build:plugin",
+    "build": "ng build icons-plugin",
     "build:dev": "ng build icons-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin --watch",
     "serve": "ng serve icons-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/lorem-ipsum-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build lorem-ipsum-plugin && pnpm run build:plugin",
+    "build": "ng build lorem-ipsum-plugin",
     "build:dev": "ng build lorem-ipsum-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin --watch",
     "serve": "ng serve lorem-ipsum-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/poc-state-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build poc-state-plugin && pnpm run build:plugin",
+    "build": "ng build poc-state-plugin",
     "build:dev": "ng build poc-state-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-state-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-state-plugin --watch",
     "serve": "ng serve poc-state-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/poc-tokens-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build poc-tokens-plugin && pnpm run build:plugin",
+    "build": "ng build poc-tokens-plugin",
     "build:dev": "ng build poc-tokens-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-tokens-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-tokens-plugin --watch",
     "serve": "ng serve poc-tokens-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "exit 0"
   }

plugins/apps/rename-layers-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build rename-layers-plugin && pnpm run build:plugin",
+    "build": "ng build rename-layers-plugin",
     "build:dev": "ng build rename-layers-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=rename-layers-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=rename-layers-plugin --watch",
     "serve": "ng serve rename-layers-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/table-plugin/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build table-plugin && pnpm run build:plugin",
+    "build": "ng build table-plugin",
     "build:dev": "ng build table-plugin --configuration development",
-    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=table-plugin",
-    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=table-plugin --watch",
     "serve": "ng serve table-plugin",
-    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/docs/test-e2e.md

@@ -4,7 +4,7 @@
 
 1. **Configure Environment Variables**
 
-   Create and populate the `.env` file with a valid user mail & password:
+   Create and populate the `apps/e2e/.env` file with a valid user mail & password:
 
    ```env
    E2E_LOGIN_EMAIL="test@penpot.app"
@@ -24,7 +24,7 @@
 
 1. **Adding Tests**
 
-   Place your test files in the `/apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file:
+   Place your test files in the `apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file:
 
    ```ts
    import testingPlugin from './plugins/create-board-text-rect';

plugins/eslint.config.js

@@ -27,21 +27,13 @@ export default [
         sourceType: 'module',
       },
     },
-    rules: {
-      'no-multiple-empty-lines': ['error', { max: 1 }],
-      quotes: ['error', 'single', { avoidEscape: true }],
-    },
-  },
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    plugins: {
-      '@typescript-eslint': tseslint.plugin,
-    },
     rules: {
       '@typescript-eslint/no-unused-vars': [
         'error',
         { argsIgnorePattern: '^_' },
       ],
+      'no-multiple-empty-lines': ['error', { max: 1 }],
+      quotes: ['error', 'single', { avoidEscape: true }],
     },
   },
   {

plugins/package.json

@@ -8,15 +8,15 @@
     "start": "pnpm run start:app:runtime",
     "start:app:runtime": "concurrently --kill-others --names build,server \"pnpm --filter @penpot/plugins-runtime run build:watch\" \"pnpm --filter @penpot/plugins-runtime run preview\"",
     "start:app:styles-example": "pnpm --filter example-styles dev",
-    "start:plugin:poc-state": "pnpm --filter poc-state-plugin run init",
+    "start:plugin:poc-state": "pnpm --filter poc-state-plugin serve",
-    "start:plugin:contrast": "pnpm --filter contrast-plugin run init",
+    "start:plugin:contrast": "pnpm --filter contrast-plugin serve",
-    "start:plugin:icons": "pnpm --filter icons-plugin run init",
+    "start:plugin:icons": "pnpm --filter icons-plugin serve",
-    "start:plugin:loremipsum": "pnpm --filter lorem-ipsum-plugin run init",
+    "start:plugin:loremipsum": "pnpm --filter lorem-ipsum-plugin serve",
-    "start:plugin:palette": "pnpm --filter create-palette-plugin run init",
+    "start:plugin:palette": "pnpm --filter create-palette-plugin build:watch & pnpm --filter create-palette-plugin preview",
-    "start:plugin:table": "pnpm --filter table-plugin run init",
+    "start:plugin:table": "pnpm --filter table-plugin serve",
-    "start:plugin:renamelayers": "pnpm --filter rename-layers-plugin run init",
+    "start:plugin:renamelayers": "pnpm --filter rename-layers-plugin serve",
-    "start:plugin:colors-to-tokens": "pnpm --filter colors-to-tokens-plugin run init",
+    "start:plugin:colors-to-tokens": "pnpm --filter colors-to-tokens-plugin serve",
-    "start:plugin:poc-tokens": "pnpm --filter poc-tokens-plugin run init",
+    "start:plugin:poc-tokens": "pnpm --filter poc-tokens-plugin serve",
     "build:runtime": "pnpm --filter @penpot/plugins-runtime build",
     "build:plugins": "pnpm --filter './apps/*-plugin' --filter '!poc-state-plugin' build",
     "build:styles-example": "pnpm --filter example-styles build",

plugins/tools/scripts/build-plugin.mjs

@@ -1,92 +0,0 @@
-import esbuild from 'esbuild';
-import { existsSync } from 'fs';
-import { readdir } from 'fs/promises';
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const rootDir = resolve(__dirname, '../..');
-const appsDir = resolve(rootDir, 'apps');
-
-const watch = process.argv.includes('--watch');
-const filterPlugin = process.argv
-    .find((arg) => arg.startsWith('--plugin='))
-    ?.replace('--plugin=', '');
-
-async function getPluginEntryPoints() {
-    const entries = await readdir(appsDir, { withFileTypes: true });
-    const entryPoints = [];
-
-    for (const entry of entries) {
-        if (!entry.isDirectory()) continue;
-
-        if (filterPlugin && entry.name !== filterPlugin) continue;
-
-        const pluginTs = resolve(appsDir, entry.name, 'src/plugin.ts');
-        const tsconfigPlugin = resolve(
-            appsDir,
-            entry.name,
-            'tsconfig.plugin.json',
-        );
-
-        if (existsSync(pluginTs) && existsSync(tsconfigPlugin)) {
-            entryPoints.push({
-                name: entry.name,
-                entryPoint: pluginTs,
-                tsconfig: tsconfigPlugin,
-                outdir: resolve(appsDir, entry.name, 'src/assets'),
-            });
-        }
-    }
-
-    return entryPoints;
-}
-
-async function buildPlugin(plugin) {
-    const options = {
-        entryPoints: [plugin.entryPoint],
-        bundle: true,
-        outfile: resolve(plugin.outdir, 'plugin.js'),
-        minify: !watch,
-        format: 'esm',
-        tsconfig: plugin.tsconfig,
-        logLevel: 'info',
-    };
-
-    if (watch) {
-        const ctx = await esbuild.context(options);
-        await ctx.watch();
-        console.log(`[buildPlugin] Watching ${plugin.name}...`);
-        return ctx;
-    } else {
-        await esbuild.build(options);
-        console.log(`[buildPlugin] Built ${plugin.name}`);
-    }
-}
-
-async function main() {
-    const plugins = await getPluginEntryPoints();
-
-    if (plugins.length === 0) {
-        console.warn('[buildPlugin] No plugins found to build.');
-        return;
-    }
-
-    console.log(
-        `[buildPlugin] ${watch ? 'Watching' : 'Building'} ${plugins.length} plugin(s): ${plugins.map((p) => p.name).join(', ')}`,
-    );
-
-    const results = await Promise.all(plugins.map(buildPlugin));
-
-    if (watch) {
-        process.on('SIGINT', async () => {
-            await Promise.all(results.map((ctx) => ctx?.dispose()));
-            process.exit(0);
-        });
-    }
-}
-
-main().catch((err) => {
-    console.error(err);
-    process.exit(1);
-});