33 |
34 |
35 | {/if}
36 |
37 |
49 |
51 |
2 | 👋
3 |
5 |
6 |
42 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/panes/Browser.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | Hello World!
4 |
9 |
17 |
18 |
19 |
20 |
38 |
--------------------------------------------------------------------------------
/packages/lessons/json-injection/prisma/seed.js:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client';
2 |
3 | const prisma = new PrismaClient();
4 | const generateApiKey = () =>
5 | Buffer.from(crypto.getRandomValues(new Uint8Array(8))).toString('hex');
6 |
7 | await prisma.user.create({
8 | data: {
9 | firstName: 'Alice',
10 | lastName: 'Smith',
11 | email: 'alice@example.com',
12 | apiKey: generateApiKey(),
13 | },
14 | });
15 |
16 | await prisma.user.create({
17 | data: {
18 | firstName: 'Bob',
19 | lastName: 'Johnson',
20 | email: 'bob@example.net',
21 | apiKey: generateApiKey(),
22 | },
23 | });
24 |
25 | await prisma.user.create({
26 | data: {
27 | firstName: 'Charlie',
28 | lastName: 'Williams',
29 | email: 'c.williams@example.com',
30 | apiKey: generateApiKey(),
31 | },
32 | });
33 |
--------------------------------------------------------------------------------
/packages/app/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-node';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 | import { mdsvex } from 'mdsvex';
4 | import rehypeExternalLinks from 'rehype-external-links';
5 |
6 | /** @type {import('@sveltejs/kit').Config} */
7 | const config = {
8 | extensions: ['.md', '.svelte'],
9 | preprocess: [
10 | mdsvex({
11 | extension: '.md',
12 | // @ts-expect-error The types are broken
13 | rehypePlugins: [[rehypeExternalLinks, { target: '_blank' }]],
14 | }),
15 | vitePreprocess(),
16 | ],
17 |
18 | kit: {
19 | adapter: adapter(),
20 | alias: {
21 | $assets: './src/assets',
22 | $lessons: './src/lessons',
23 | },
24 | paths: {
25 | base: '/academy',
26 | },
27 | },
28 | };
29 |
30 | export default config;
31 |
--------------------------------------------------------------------------------
/packages/app/src/lib/categories.ts:
--------------------------------------------------------------------------------
1 | export const categories = [
2 | {
3 | label: 'Access Control',
4 | component: 'AccessControl',
5 | color: '#ff9b7f',
6 | bg: '#f5d7d7',
7 | },
8 | { label: 'HTTP', component: 'Http', color: '#e3fcf8', bg: '#76ccbb' },
9 | {
10 | label: 'Information Disclosure',
11 | component: 'InformationDiclosure',
12 | color: '#fff184',
13 | bg: '#b7e0e6',
14 | },
15 | {
16 | label: 'Complexity',
17 | component: 'Complexity',
18 | color: '#E0D1EF',
19 | bg: '#f7aba7',
20 | },
21 | {
22 | label: 'Injection',
23 | component: 'Injection',
24 | color: '#ff9797',
25 | bg: '#ffefbe',
26 | },
27 | { label: 'DoS', component: 'Dos', color: '#ffc3ff', bg: '#aee8ff' },
28 | ];
29 |
30 | export const categoryMap = new Map(
31 | categories.map((category) => [category.label, category]),
32 | );
33 |
--------------------------------------------------------------------------------
/packages/lessons/broken-function-level-authorization/src/resolvers.js:
--------------------------------------------------------------------------------
1 | import { GraphQLError } from 'graphql';
2 | import { createPost, deletePost, getUserPosts, getUsers } from './database.js';
3 |
4 | export const Query = {
5 | users: getUsers,
6 | me: (_, args, context) => context.user,
7 | };
8 |
9 | export const Mutation = {
10 | createPost: (_, args, context) => {
11 | if (!context.user) throw new GraphQLError('Not authorized');
12 | return createPost(args.title, context.user.id);
13 | },
14 | deletePost: (_, args) => {
15 | return deletePost(args.id);
16 | },
17 | };
18 |
19 | export const User = {
20 | id: (user) => user.id,
21 | name: (user) => user.name,
22 | posts: (user) => getUserPosts(user),
23 | };
24 |
25 | export const Post = {
26 | id: (post) => post.id,
27 | authorId: (post) => post.authorId,
28 | title: (post) => post.title,
29 | };
30 |
--------------------------------------------------------------------------------
/packages/lessons/cors/src/server.js:
--------------------------------------------------------------------------------
1 | import { ApolloServer } from '@apollo/server';
2 |
3 | const users = [{ name: 'Alice' }, { name: 'Bob' }];
4 |
5 | export const server = new ApolloServer({
6 | typeDefs: /* GraphQL */ `
7 | type Query {
8 | users: [User]
9 | }
10 | type Mutation {
11 | createUser(name: String!): User
12 | }
13 | type User {
14 | id: ID
15 | name: String
16 | }
17 | `,
18 | resolvers: {
19 | Query: {
20 | users: () => users.map((user, id) => ({ id, ...user })),
21 | },
22 | Mutation: {
23 | createUser: (_, { name }) => {
24 | const user = { name };
25 | users.push(user);
26 | const id = users.indexOf(user);
27 | return { id, ...user };
28 | },
29 | },
30 | User: {
31 | id: (user) => user.id,
32 | name: (user) => user.name,
33 | },
34 | },
35 | });
36 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/panes/index.ts:
--------------------------------------------------------------------------------
1 | import type { Terminal } from '@xterm/xterm';
2 | import type { ComponentType } from 'svelte';
3 | import Browser from './Browser.svelte';
4 | import File from './File.svelte';
5 | import Markdown from './Markdown.svelte';
6 | import Xterm from './Xterm.svelte';
7 |
8 | export interface Contexts {
9 | markdown: { contents: ComponentType };
10 | file: { contents: string; path: string; extension: string };
11 | browser: { url: string };
12 | terminal: {
13 | command?: string;
14 | attach(terminal: Terminal): unknown;
15 | };
16 | }
17 | export interface PaneChild
7 |
8 |
%sveltekit.body%
38 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/packages/lessons/sql-injection/src/database.js:
--------------------------------------------------------------------------------
1 | import sqlite3 from 'sqlite3';
2 |
3 | // Create a new database in memory
4 | const db = new sqlite3.Database(':memory:').run(
5 | 'CREATE TABLE users (id INTEGER PRIMARY KEY, email TEXT, password TEXT, admin INTEGER)',
6 | );
7 |
8 | /** Returns all users. */
9 | export const getUsers = async () =>
10 | new Promise((resolve, reject) => {
11 | db.all('SELECT * FROM users', (err, rows) => {
12 | if (err) reject(err);
13 | else resolve(rows);
14 | });
15 | });
16 |
17 | /** Creates a new user with the credentials provided. */
18 | export const createUser = async (email, password) =>
19 | new Promise((resolve, reject) => {
20 | db.run(
21 | `INSERT INTO users (email, password, admin) VALUES ('${email}', '${password}', 0)`,
22 | (err) => {
23 | if (err) reject(err);
24 | else resolve(undefined);
25 | },
26 | );
27 | });
28 |
29 | /** Finds a user by their email. */
30 | export const getUserByEmail = async (email) =>
31 | new Promise((resolve, reject) => {
32 | db.all(`SELECT * FROM users WHERE email = '${email}'`, (err, rows) => {
33 | if (err) reject(err);
34 | if (rows.length === 0) reject(new Error('No user found'));
35 | else resolve(rows[0]);
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/packages/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app",
3 | "version": "0.0.1",
4 | "type": "module",
5 | "private": true,
6 | "scripts": {
7 | "build": "yarn check && vite build",
8 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
9 | "dev": "vite dev",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@neoconfetti/svelte": "^2.2.1",
14 | "@webcontainer/api": "^1.4.0",
15 | "@xterm/addon-fit": "^0.10.0",
16 | "@xterm/xterm": "^5.5.0",
17 | "chalk": "^5.3.0",
18 | "monaco-editor": "^0.52.0"
19 | },
20 | "devDependencies": {
21 | "@fontsource-variable/inter": "^5.1.0",
22 | "@iconify-json/ri": "^1.2.1",
23 | "@iconify-json/simple-icons": "^1.2.8",
24 | "@sveltejs/adapter-node": "^5.2.8",
25 | "@sveltejs/kit": "^2.7.1",
26 | "@sveltejs/vite-plugin-svelte": "^3.1.2",
27 | "lessons": "workspace:^",
28 | "mdsvex": "^0.12.3",
29 | "modern-normalize": "^3.0.1",
30 | "rehype-external-links": "^3.0.0",
31 | "sass": "^1.80.2",
32 | "svelte": "^4.2.19",
33 | "svelte-check": "^4.0.5",
34 | "tslib": "^2.8.0",
35 | "typescript": "^5.6.3",
36 | "unplugin-icons": "^0.19.3",
37 | "vite": "^5.4.9"
38 | },
39 | "volta": {
40 | "extends": "../../package.json"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/lessons/sql-injection/src/resolvers.js:
--------------------------------------------------------------------------------
1 | import argon2 from 'argon2-browser';
2 | import { GraphQLError } from 'graphql';
3 | import { webcrypto as crypto } from 'node:crypto';
4 | import { createUser, getUserByEmail, getUsers } from './database.js';
5 |
6 | export const Query = {
7 | users: getUsers,
8 | };
9 |
10 | export const Mutation = {
11 | login: async (_, args) => {
12 | try {
13 | const user = await getUserByEmail(args.email);
14 | if (!user) throw new Error('No user found');
15 | // argon2.verify() throws on invalid password
16 | await argon2.verify({ encoded: user.password, pass: args.password });
17 | return user;
18 | } catch {
19 | throw new GraphQLError('Invalid credentials');
20 | }
21 | },
22 | register: async (_, args) => {
23 | if (args.password.length < 8) {
24 | throw new GraphQLError('Password must be at least 8 characters');
25 | }
26 | const { encoded } = await argon2.hash({
27 | pass: args.password,
28 | salt: crypto.getRandomValues(new Uint8Array(16)),
29 | });
30 | await createUser(args.email, encoded);
31 | return true;
32 | },
33 | };
34 |
35 | export const User = {
36 | id: (user) => user.id,
37 | email: (user) => user.email,
38 | admin: (user) => Boolean(user.admin),
39 | };
40 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/panes/Xterm.svelte:
--------------------------------------------------------------------------------
1 |
37 |
38 |
46 | Unknown extension {context.extension}
47 |
52 |
53 | {/if}
54 |
55 |
61 |
--------------------------------------------------------------------------------
/packages/lessons/broken-object-level-authorization/src/index.js:
--------------------------------------------------------------------------------
1 | import { ApolloServer } from '@apollo/server';
2 | import { expressMiddleware } from '@apollo/server/express4';
3 | import { renderGraphiQL } from '@graphql-yoga/render-graphiql';
4 | import bodyParser from 'body-parser';
5 | import express from 'express';
6 | import { getContext } from './context.js';
7 | import * as resolvers from './resolvers.js';
8 |
9 | const server = new ApolloServer({
10 | typeDefs: /* GraphQL */ `
11 | type User {
12 | id: ID!
13 | name: String!
14 | posts: [Post!]!
15 | }
16 |
17 | type Post {
18 | id: ID!
19 | authorId: ID!
20 | title: String!
21 | published: Boolean!
22 | }
23 |
24 | type Query {
25 | users: [User!]!
26 | user(id: ID!): User!
27 | post(id: ID!): Post!
28 | me: User
29 | }
30 | `,
31 | resolvers,
32 | });
33 |
34 | await server.start();
35 |
36 | const app = express();
37 | app.get('/', (req, res) => {
38 | res.redirect('/graphql');
39 | });
40 | app.get('/graphql', (req, res) => {
41 | res.send(
42 | renderGraphiQL({
43 | defaultQuery: 'query {\n\tusers {\n\t\tname\n\t\tposts { title }\n\t}\n}',
44 | headers: JSON.stringify({ Authorization: 'Bearer 3' }, undefined, 2),
45 | }),
46 | );
47 | });
48 | app.post(
49 | '/graphql',
50 | bodyParser.json(),
51 | expressMiddleware(server, {
52 | context: async ({ req }) => getContext(req),
53 | }),
54 | );
55 |
56 | app.listen(4000, () => {
57 | console.info('Server ready on port 4000');
58 | });
59 |
--------------------------------------------------------------------------------
/packages/lessons/broken-function-level-authorization/src/index.js:
--------------------------------------------------------------------------------
1 | import { ApolloServer } from '@apollo/server';
2 | import { expressMiddleware } from '@apollo/server/express4';
3 | import { renderGraphiQL } from '@graphql-yoga/render-graphiql';
4 | import bodyParser from 'body-parser';
5 | import express from 'express';
6 | import { getContext } from './context.js';
7 | import * as resolvers from './resolvers.js';
8 |
9 | const server = new ApolloServer({
10 | typeDefs: /* GraphQL */ `
11 | type User {
12 | id: ID!
13 | name: String!
14 | posts: [Post!]!
15 | }
16 |
17 | type Post {
18 | id: ID!
19 | authorId: ID!
20 | title: String!
21 | }
22 |
23 | type Query {
24 | users: [User!]!
25 | me: User
26 | }
27 |
28 | type Mutation {
29 | createPost(title: String!): Post!
30 | deletePost(id: ID!): Boolean!
31 | }
32 | `,
33 | resolvers,
34 | });
35 |
36 | await server.start();
37 |
38 | const app = express();
39 | app.get('/', (req, res) => {
40 | res.redirect('/graphql');
41 | });
42 | app.get('/graphql', (req, res) => {
43 | res.send(
44 | renderGraphiQL({
45 | defaultQuery: 'query {\n\tusers {\n\t\tname\n\t\tposts { title }\n\t}\n}',
46 | headers: JSON.stringify({ Authorization: 'Bearer 3' }, undefined, 2),
47 | }),
48 | );
49 | });
50 | app.post(
51 | '/graphql',
52 | bodyParser.json(),
53 | expressMiddleware(server, {
54 | context: async ({ req }) => getContext(req),
55 | }),
56 | );
57 |
58 | app.listen(4000, () => {
59 | console.info('Server ready on port 4000');
60 | });
61 |
--------------------------------------------------------------------------------
/packages/app/src/routes/Filters.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | Categories:
10 | {#each categories as { label }}
11 |
15 | {/each}
16 | {#if filter}
17 |
24 | {/if}
25 |
26 |
27 |
70 |
--------------------------------------------------------------------------------
/packages/lessons/unrestricted-resource-consumption/src/index.js:
--------------------------------------------------------------------------------
1 | import { ApolloServer } from '@apollo/server';
2 | import { expressMiddleware } from '@apollo/server/express4';
3 | import { renderGraphiQL } from '@graphql-yoga/render-graphiql';
4 | import bodyParser from 'body-parser';
5 | import express from 'express';
6 |
7 | /** A mock database table of users. */
8 | const users = [
9 | { name: 'Alice', friends: [1, 3, 4] },
10 | { name: 'Bob', friends: [0, 2, 3] },
11 | { name: 'Charlie', friends: [1, 3, 4] },
12 | { name: 'Dan', friends: [0, 1, 2, 4] },
13 | { name: 'Eve', friends: [0, 2, 3] },
14 | ];
15 |
16 | const getUser = (id) => ({ id, name: users[id].name });
17 |
18 | const typeDefs = /* GraphQL */ `
19 | type Query {
20 | user(id: ID!): User
21 | }
22 |
23 | type User {
24 | id: ID!
25 | name: String
26 | friends: [User]
27 | }
28 | `;
29 |
30 | const resolvers = {
31 | Query: {
32 | user: (_, { id }) => ({ id, name: users[id].name }),
33 | },
34 | User: {
35 | id: (user) => user.id,
36 | name: (user) => user.name,
37 | friends: (user) => users[user.id].friends.map(getUser),
38 | },
39 | };
40 |
41 | const server = new ApolloServer({
42 | typeDefs,
43 | resolvers,
44 | });
45 |
46 | await server.start();
47 |
48 | const app = express();
49 | app.get('/', (req, res) => {
50 | res.redirect('/graphql');
51 | });
52 | app.get('/graphql', (req, res) => {
53 | res.send(
54 | renderGraphiQL({
55 | defaultQuery:
56 | 'query {\n\tuser(id: 1) {\n\t\tname\n\t\tfriends { name }\n\t}\n}',
57 | }),
58 | );
59 | });
60 | app.post('/graphql', bodyParser.json(), expressMiddleware(server));
61 |
62 | app.listen(4000, () => {
63 | console.info('Server ready on port 4000');
64 | });
65 |
--------------------------------------------------------------------------------
/packages/lessons/cors/evil/evil.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Evil website
10 | 17 | 18 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /packages/lessons/broken-authentication/src/index.js: -------------------------------------------------------------------------------- 1 | import { ApolloServer } from '@apollo/server'; 2 | import { expressMiddleware } from '@apollo/server/express4'; 3 | import { renderGraphiQL } from '@graphql-yoga/render-graphiql'; 4 | import argon2 from 'argon2-browser'; 5 | import bodyParser from 'body-parser'; 6 | import express from 'express'; 7 | 8 | /** A mock database table of users. */ 9 | const users = [ 10 | { 11 | name: 'alice', 12 | password: 13 | '$argon2d$v=19$m=1024,t=1,p=1$T0lOVENSSENPSTxI$jTAGsml0jkSgZF4mIKF8zZuUW1+CW3X9uZxWj1y8KRQ', 14 | }, 15 | ]; 16 | 17 | const typeDefs = /* GraphQL */ ` 18 | type Query { 19 | users: [User!]! 20 | } 21 | 22 | type Mutation { 23 | login(name: String!, password: String!): String 24 | } 25 | 26 | type User { 27 | name: String! 28 | } 29 | `; 30 | 31 | const resolvers = { 32 | Query: { 33 | users: () => users, 34 | }, 35 | Mutation: { 36 | login: async (_, args) => { 37 | try { 38 | const user = users.find((user) => user.name === args.name); 39 | if (!user) throw new Error('No user found'); 40 | // argon2.verify() throws on invalid password 41 | await argon2.verify({ encoded: user.password, pass: args.password }); 42 | return 'Login successful!'; 43 | } catch { 44 | return null; 45 | } 46 | }, 47 | }, 48 | User: { 49 | name: (user) => user.name, 50 | }, 51 | }; 52 | 53 | const server = new ApolloServer({ 54 | typeDefs, 55 | resolvers, 56 | }); 57 | 58 | await server.start(); 59 | 60 | const app = express(); 61 | app.get('/', (req, res) => { 62 | res.redirect('/graphql'); 63 | }); 64 | app.get('/graphql', (req, res) => { 65 | res.send( 66 | renderGraphiQL({ 67 | defaultQuery: 'query {\n\tusers {\n\t\tname\n\t}\n}', 68 | }), 69 | ); 70 | }); 71 | app.post('/graphql', bodyParser.json(), expressMiddleware(server)); 72 | 73 | app.listen(4000, () => { 74 | console.info('Server ready on port 4000'); 75 | }); 76 | -------------------------------------------------------------------------------- /packages/app/src/routes/Newsletter.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
27 |
54 |
55 |
80 |
--------------------------------------------------------------------------------
/packages/app/src/assets/prism.scss:
--------------------------------------------------------------------------------
1 | pre,
2 | code {
3 | font-size: 1em;
4 | color: var(--prism-color);
5 | background: var(--prism-bg);
6 | }
7 |
8 | a code {
9 | color: inherit;
10 | }
11 |
12 | pre {
13 | padding: 1em;
14 | overflow: auto;
15 | line-height: 1.5;
16 | tab-size: 4;
17 | white-space: pre;
18 |
19 | > code {
20 | display: block;
21 | width: max-content;
22 | min-width: 100%;
23 | }
24 | }
25 |
26 | .token.cdata,
27 | .token.comment,
28 | .token.doctype,
29 | .token.namespace,
30 | .token.operator,
31 | .token.prolog,
32 | .token.punctuation,
33 | .token.url {
34 | color: var(--prism-comment);
35 | }
36 |
37 | .token.boolean,
38 | .token.entity,
39 | .token.number,
40 | .token.symbol {
41 | color: var(--prism-scalar);
42 | }
43 |
44 | .token.builtin,
45 | .token.class-name,
46 | .token.constant,
47 | .token.selector,
48 | .token.tag {
49 | color: var(--prism-class);
50 | }
51 |
52 | .token.attr-value,
53 | .token.char,
54 | .token.important,
55 | .token.regex,
56 | .token.string {
57 | color: var(--prism-string);
58 | }
59 |
60 | .token.keyword,
61 | .token.atrule {
62 | color: var(--prism-keyword);
63 | }
64 |
65 | .token.attr-name,
66 | .token.function,
67 | .token.property {
68 | color: var(--prism-function);
69 | }
70 |
71 | .token.bold,
72 | .token.important {
73 | font-weight: 700;
74 | }
75 |
76 | .token.italic {
77 | font-style: italic;
78 | }
79 |
80 | .token.entity {
81 | cursor: help;
82 | }
83 |
84 | .token.deleted {
85 | opacity: 0.5;
86 | }
87 |
88 | .token.inserted {
89 | position: relative;
90 | display: block;
91 | background-color: var(--prism-highlight);
92 |
93 | &::before,
94 | &::after {
95 | position: absolute;
96 | top: 0;
97 | bottom: 0;
98 | width: 1em;
99 | content: '';
100 | background-color: inherit;
101 | }
102 |
103 | &::before {
104 | left: -1em;
105 | }
106 |
107 | &::after {
108 | right: -1em;
109 | }
110 | }
111 |
112 | .token.prefix {
113 | display: none;
114 | }
115 |
--------------------------------------------------------------------------------
/packages/lessons/cors/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Want to get notified about new lessons?
28 | 44 | {#if state === 'success'} 45 |46 | Thank you for subscribing! 47 |
48 | {:else if state === 'error'} 49 |50 | Something went wrong. Please try again later. 51 |
52 | {/if} 53 |Super forum
10 |Users:
11 |Server origin:
{error}
56 | {/await}
57 |
58 |
86 |
--------------------------------------------------------------------------------
/packages/lessons/build.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This module builds lessons into the app.
3 | *
4 | * @module
5 | */
6 |
7 | import type { FileSystemTree } from '@webcontainer/api';
8 | import {
9 | copyFile,
10 | mkdir,
11 | readdir,
12 | readFile,
13 | writeFile,
14 | } from 'node:fs/promises';
15 |
16 | /** Computes a path relative to this file. */
17 | const relative = (path: string) => new URL(path, import.meta.url);
18 | const dest = '../app/src/lessons/';
19 |
20 | /** Main build function, builds all directories in `lessons`. */
21 | const build = async () => {
22 | const entries = await readdir(relative('.'), { withFileTypes: true });
23 | const dirs = entries.filter((entry) => entry.isDirectory());
24 | await copyFile(relative('authors.json'), `${dest}authors.json`);
25 | return Promise.all(
26 | dirs.map((dir) => buildLesson(dir.name, relative(`${dir.name}/`))),
27 | );
28 | };
29 |
30 | /** Build a single lesson. */
31 | const buildLesson = async (name: string, dir: URL) => {
32 | console.log(`Building lesson ${name}...`);
33 | try {
34 | const files = await buildLessonFiles(dir);
35 | await mkdir(relative(`${dest}${name}`), { recursive: true });
36 | await copyFile(new URL('README.md', dir), `${dest}${name}/README.md`);
37 | await writeFile(`${dest}${name}/files.json`, JSON.stringify(files));
38 | } catch (error) {
39 | console.error(`Error building lesson ${name}: ${error}`);
40 | }
41 | };
42 |
43 | /**
44 | * Serialize all files in a format compatible with
45 | * [WebContainers](https://webcontainers.io).
46 | */
47 | const buildLessonFiles = async (dir: URL): Promise
50 | ' }),
36 | bodyParser.json(),
37 | expressMiddleware(server),
38 | );
39 | ```
40 |
41 | This header tells all browsers to block requests coming from any website other than the right one. The evil website has a different origin (which is the combination of HTTP scheme, hostname and port) than the vulnerable server, so the browser will block the request.
42 |
43 | The vulnerable server should restart automatically. Try to perform the attack again from the evil website: the request fails with a network error. **Our server is now safe from CSRF attacks!**
44 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/icons/categories/Injection.svelte:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # API Security Academy by Escape.tech
2 |
3 | ## What is it?
4 |
5 | API Security Academy provides hands-on, interactive lessons that teach various vulnerabilities and best practices in GraphQL security. Discover its full learning potential directly in your browser. Each lesson features a WebContainer with a live GraphQL application, demonstrating not just the risks but also how to **exploit** and **fix** them.
6 |
7 | > 💡 The [API Security Academy](https://www.escape.tech/academy?utm_source=github&utm_medium=social&utm_campaign=description-call-out) is accessible for free. We initially chose to prioritize GraphQL, as it’s at the core of our expertise, but anticipate introducing additional API types in the future!
8 |
9 | ## Why learn with API Security Academy?
10 |
11 | - 📚 Comprehensive lessons: Covering everything from basic to advanced GraphQL security topics.
12 | - 💻 Interactive: Each lesson includes a WebContainer for a real-world experience.
13 | - 🧑💻 For Developers and Security Engineers: Whether you're building or securing GraphQL apps, there's always more to explore and learn.
14 | - 🆓 Free and Open Source: Learn at your own pace, and even contribute to make it better!
15 |
16 | ## Features
17 |
18 | - 🌐 Browser-Based learning: no downloads, installs, or account creation. Start learning immediately right within your browser.
19 | - 🛠 Hands-on experience: apply your knowledge in real-world GraphQL app scenarios.
20 |
21 | ## How to contribute
22 |
23 | We're thrilled that you're interested in contributing to the API Security Academy! Contributions are essential for keeping this project informative, up-to-date, and, most importantly, beneficial for everyone interested in GraphQL and Application security.
24 |
25 | This project consists of two main components:
26 |
27 | - [`app`](./packages/app/): A Svelte-based IDE that operates directly in your web browser.
28 | - [`lessons`](./packages/lessons/): This directory houses all the tutorial content.
29 |
30 | ### What is a "Lesson"?
31 |
32 | A lesson in API Security Academy is structured as a regular `npm` package, containing at least a `package.json` file and a `README.md` file. The README is Svelte-enhanced markdown that drives the lesson content.
33 |
34 | ### Quick Start Guide
35 |
36 | If you're eager to contribute, here's how you can get started:
37 |
38 | ```bash
39 | # Clone the GitHub repository
40 | git clone https://github.com/Escape-Technologies/graphql-security-academy.git
41 | cd academy
42 | # Use yarn to install all necessary dependencies
43 | yarn install
44 | # Launch the development environment
45 | yarn dev
46 | ```
47 |
48 | Now, you should have a local instance of API Security Academy running. Feel free to make any changes and test them out.
49 |
50 | ### Contribution ideas
51 |
52 | - Writing new lessons or updating existing ones.
53 | - Enhancing the UI/UX of the `app` component.
54 | - Reporting bugs and suggesting new features.
55 |
56 | Feel free to submit a pull request or create an issue to discuss any changes you have in mind.
57 |
58 | Thank you for contributing to making GraphQL more secure!
59 |
60 | > And hurry up to start your first lesson [here](https://escape.tech/academy/broken-authentication?utm_source=github&utm_medium=social)!
61 |
--------------------------------------------------------------------------------
/packages/app/src/app.scss:
--------------------------------------------------------------------------------
1 | @use '@fontsource-variable/inter';
2 | @import 'modern-normalize/modern-normalize.css';
3 |
4 | :root {
5 | // Theme
6 | --dark: #eee;
7 | --main: #fff;
8 | --inactive: #35314c10;
9 | --focused: #fff;
10 | --hovered: #6c678f40;
11 | --text: #333;
12 | --accent: #05e2b7;
13 | --secondary-accent: #6762d5;
14 | --weak-color: #babbbb;
15 | --bg-secondary: #f2f2f2;
16 | --bg-hover: #e7e7e7;
17 |
18 | // Main colors
19 | --bg: var(--main);
20 | --color: var(--text);
21 | --link: var(--accent);
22 |
23 | // Markdown colors
24 | --prism-color: #1c1b1d;
25 | --prism-bg: #fafaff;
26 | --prism-highlight: #e9e9ff;
27 | --prism-function: #0077bf;
28 | --prism-keyword: #5c33bd;
29 | --prism-class: #ab6000;
30 | --prism-scalar: #bd2a33;
31 | --prism-string: #4e7e06;
32 | --prism-comment: #355454;
33 |
34 | line-height: 1.5;
35 | cursor: default;
36 | scrollbar-width: thin;
37 | }
38 |
39 | ::selection {
40 | background-color: #05e2b780;
41 | }
42 |
43 | ::-webkit-scrollbar {
44 | width: 4px;
45 | height: 4px;
46 | }
47 |
48 | ::-webkit-scrollbar-track {
49 | background: transparent;
50 | }
51 |
52 | ::-webkit-scrollbar-thumb {
53 | background-color: rgb(155 155 155 / 35%);
54 | border: transparent;
55 | border-radius: 20px;
56 | }
57 |
58 | * {
59 | outline: 0 solid transparent;
60 | transition: outline 0.1s ease-out;
61 |
62 | &:focus-visible {
63 | outline: 0.125em solid #07c9ac80;
64 | }
65 | }
66 |
67 | body {
68 | font-family: Inter, sans-serif;
69 | color: var(--color);
70 | background-color: var(--bg);
71 | }
72 |
73 | h1,
74 | h2,
75 | h3,
76 | h4,
77 | h5,
78 | h6 {
79 | font-family: Inter, sans-serif;
80 | }
81 |
82 | h1 {
83 | font-size: 1.8em;
84 | line-height: 1.25;
85 | }
86 |
87 | h2 {
88 | font-size: 1.5em;
89 | line-height: 1.33;
90 | }
91 |
92 | h3 {
93 | font-size: 1.25em;
94 | }
95 |
96 | a {
97 | color: inherit;
98 |
99 | &:hover,
100 | &:focus {
101 | color: var(--link);
102 | }
103 | }
104 |
105 | .icon {
106 | flex-shrink: 0;
107 | vertical-align: bottom;
108 |
109 | h1 &,
110 | h2 &,
111 | h3 & {
112 | width: 1.25em;
113 | height: 1.25em;
114 | }
115 | }
116 |
117 | :where(button, input) {
118 | display: inline-flex;
119 | gap: 0.25em;
120 | align-items: center;
121 | padding: 0.375em;
122 | color: #838383;
123 | background: #f2f2f2;
124 | border: 0.125em solid #f2f2f2;
125 | border-radius: 0.25em;
126 | outline: 0 solid transparent;
127 | transition: all 0.1s ease-in-out;
128 | }
129 |
130 | input {
131 | border-color: #e2e2e2;
132 |
133 | &:enabled {
134 | color: #000;
135 | background: #fff;
136 |
137 | &:hover,
138 | &:focus {
139 | border-color: #acacac;
140 | }
141 |
142 | &:focus-visible {
143 | outline: 0.25em solid #e2e2e280;
144 | }
145 | }
146 | }
147 |
148 | :where(button:enabled) {
149 | color: var(--text);
150 | background: #05e2b7;
151 | border-color: #05e2b7;
152 |
153 | &:where(:hover) {
154 | background: #04c19c;
155 | border-color: #04c19c;
156 | }
157 |
158 | &:where(:active) {
159 | background: #06ab8a;
160 | border-color: #06ab8a;
161 | }
162 |
163 | &:where(:focus-visible) {
164 | outline: 0.25em solid #05e2b780;
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/packages/lessons/broken-authentication/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Prevent Mutation Brute-Force Attacks'
3 | description: 'Understand how to mitigate brute-force attacks targeting GraphQL authentication mutations for enhanced security.'
4 | category: 'Access Control'
5 | difficulty: 'Easy'
6 | owasp: 'API2:2023'
7 | authors: ['escape']
8 | ---
9 |
10 | Because the authentication mechanisms are exposed and complex, they are a target of choice for attackers. This lesson will show you how lesser-known GraphQL features can be used against your application.
11 |
12 | Start the GraphQL server with `npm install` and `npm start` to get started.
13 |
14 | ## GraphQL Aliasing
15 |
16 | Aliasing is a GraphQL feature allowing a developer to rename a field in the resulting object. For example, the following query:
17 |
18 | ```graphql
19 | query {
20 | myAlias: users {
21 | name
22 | }
23 | }
24 | ```
25 |
26 | Will return the following object:
27 |
28 | ```json
29 | {
30 | "data": {
31 | "myAlias": [
32 | {
33 | "name": "alice"
34 | }
35 | ]
36 | }
37 | }
38 | ```
39 |
40 | In the results, the field is now named `myAlias` instead of its original name `users`. This also allows a developer to query the same field several times, for different purposes:
41 |
42 | ```graphql
43 | query {
44 | users {
45 | name
46 | myAlias: name
47 | }
48 | }
49 | ```
50 |
51 | This query will show `"alice"` twice in the results.
52 |
53 | An attacker can exploit aliasing to run the same mutation several times:
54 |
55 | ```graphql
56 | mutation {
57 | attempt1: login(name: "alice", password: "password1")
58 | attempt2: login(name: "alice", password: "password2")
59 | attempt3: login(name: "alice", password: "password3")
60 | attempt4: login(name: "alice", password: "password4")
61 | attempt5: login(name: "alice", password: "password5")
62 | # ...
63 | }
64 | ```
65 |
66 | An attacker is able to send several login attempts in a single request, effectively brute-forcing Alice's password.
67 |
68 | ## Installing GraphQL Armor
69 |
70 | [GraphQL Armor](https://github.com/Escape-Technologies/graphql-armor) is a library that helps you protect your GraphQL API from malicious queries and mutations. It runs on all major GraphQL engines without configuration, and adds various security features to your GraphQL API.
71 |
72 | This attack is one of the many that GraphQL Armor can protect you from.
73 |
74 | Your goal is to install GraphQL Armor and protect your server from the attack: install GraphQL Armor with `npm install @escape.tech/graphql-armor`.
75 |
76 | Having GraphQL Armor to work is as simple as two lines of code:
77 |
78 | ```js
79 | import { ApolloArmor } from '@escape.tech/graphql-armor';
80 |
81 | // Instantiate GraphQL Armor
82 | const armor = new ApolloArmor({
83 | // Completely disable aliases for this lesson
84 | maxAliases: { n: 0 },
85 | });
86 |
87 | const server = new ApolloServer({
88 | typeDefs,
89 | resolvers,
90 | // Add the protections to the server
91 | ...armor.protect(),
92 | });
93 | ```
94 |
95 | You can try to re-run the attack, it should now fail, with an error stating that your query contains too many aliases. **Our server is now protected from aliasing brute-force!** You can read more about GraphQL Armor and all its protections [on GitHub](https://github.com/Escape-Technologies/graphql-armor).
96 |
97 | > Need extra help to get started with GraphQL Armor? Check out [GraphQL Armor docs](https://escape.tech/graphql-armor/docs/getting-started).
98 |
--------------------------------------------------------------------------------
/packages/lessons/unrestricted-resource-consumption/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Limit Query Complexity'
3 | description: 'Discover techniques to restrict expensive queries using GraphQL Armor, enhancing performance and security.'
4 | category: 'Complexity'
5 | difficulty: 'Easy'
6 | owasp: 'API4:2023'
7 | authors: ['escape']
8 | ---
9 |
10 | GraphQL engines ship without complexity limits by default, allowing you to ship complex applications rapidly, but also enabling attackers to perform expensive queries. Cycles in the graph [can lead to arbitrarily deep queries](https://escape.tech/blog/cyclic-queries-and-depth-limit/), which cause degraded performance or even denial of service.
11 |
12 | This lesson contains a _very_ simple social network with users and friends. Because users have friends and friends have friends, it is possible to construct a query that will cause the server to run out of memory:
13 |
14 | ```graphql
15 | query {
16 | user(id: 1) {
17 | friends {
18 | friends {
19 | friends {
20 | friends {
21 | friends {
22 | # ... as deep as the attacker wants
23 | }
24 | }
25 | }
26 | }
27 | }
28 | }
29 | }
30 | ```
31 |
32 | Let's start this lesson by performing this attack:
33 |
34 | - Install the server and its dependencies by running `npm install` in a terminal.
35 | - Start the server by running `npm start` in a terminal. It starts in development mode, so it will restart automatically when you make changes to the code.
36 |
37 | A GraphQL ID should open, use it to send a deep query to the server.
38 |
39 | Note: the server is running directly inside your browser, don't make it crash!
40 |
41 | ## Installing GraphQL Armor
42 |
43 | [GraphQL Armor](https://github.com/Escape-Technologies/graphql-armor) is a library that helps you protect your GraphQL API from malicious queries and mutations. It runs on all major GraphQL engines without configuration, and adds various security features to your GraphQL API.
44 |
45 | This attack is one of the many that GraphQL Armor can protect you from.
46 |
47 | Your goal is to install GraphQL Armor and protect your server from the attack: install GraphQL Armor with `npm install @escape.tech/graphql-armor`.
48 |
49 | Having GraphQL Armor work is as simple as two lines of code:
50 |
51 | ```js
52 | import { ApolloArmor } from '@escape.tech/graphql-armor';
53 |
54 | // Instantiate GraphQL Armor
55 | const armor = new ApolloArmor();
56 |
57 | const server = new ApolloServer({
58 | typeDefs,
59 | resolvers,
60 | // Add the protections to the server
61 | ...armor.protect(),
62 | });
63 | ```
64 |
65 | Try running the following query now that you have Armor installed:
66 |
67 | ```graphql
68 | query {
69 | user(id: 1) {
70 | friends {
71 | friends {
72 | friends {
73 | friends {
74 | friends {
75 | name
76 | }
77 | }
78 | }
79 | }
80 | }
81 | }
82 | }
83 | ```
84 |
85 | You should now see an error stating that your query is too deep.
86 |
87 | The default limit is 6, which is enough for most applications. You can change it by passing a configuration object to `ApolloArmor`:
88 |
89 | ```js
90 | // Set maximum depth to 10
91 | const armor = new ApolloArmor({ maxDepth: { n: 10 } });
92 | ```
93 |
94 | **Our server is now safe from arbitrary deep queries!** You can read more about GraphQL Armor and all its protections [on GitHub](https://github.com/Escape-Technologies/graphql-armor).
95 |
--------------------------------------------------------------------------------
/packages/app/src/routes/[lesson]/Readme.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 | {#if showConfetti}
29 |
94 |
95 |
133 |
--------------------------------------------------------------------------------
/packages/lessons/broken-function-level-authorization/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Implement Resolver-Level Authorization'
3 | description: 'Master techniques for setting up authorization specifically tailored for GraphQL mutations, enhancing both data integrity and security.'
4 | category: 'Access Control'
5 | difficulty: 'Hard'
6 | owasp: 'API5:2023'
7 | authors: ['escape']
8 | ---
9 |
10 | This lesson is about [properly setting up](https://escape.tech/blog/authentication-authorization-access-control/#access-control-best-practices-to-secure-your-graphql-api) function-level authorization in GraphQL with Apollo. The server code is given, with authentication developed following [Apollo's recommendations](https://www.apollographql.com/docs/apollo-server/security/authentication/). Small oversights have made **the authorization mechanism vulnerable**. Our goal is to exploit it and then fix it.
11 |
12 | ## The vulnerable server
13 |
14 | The GraphQL server of this lesson has the same structure as _Broken Object-Level Authorization_. The data it severs is a list of users, each user authoring posts. Let's take a look at the data served by starting the server:
15 |
16 | - Open a new terminal.
17 | - Run `npm install` to install the dependencies.
18 | - Run `npm start` to start the server. It starts in development mode, so it will restart automatically when you make changes to the code.
19 |
20 | You should now see GraphQL IDE with the following query:
21 |
22 | ```graphql
23 | query {
24 | users {
25 | name
26 | posts {
27 | title
28 | }
29 | }
30 | }
31 | ```
32 |
33 | Running this query allows you to see the list of users and their posts.
34 |
35 | You can also, when logged in (you should be logged in as Eve with `Authorization: Bearer 3`), create and delete posts:
36 |
37 | ```graphql
38 | # Create a post
39 | mutation {
40 | createPost(title: "New post from Eve") {
41 | id # This should return 3
42 | authorId
43 | title
44 | }
45 | }
46 |
47 | # And delete it
48 | mutation {
49 | deletePost(id: "3")
50 | }
51 | ```
52 |
53 | ## Missing authorization
54 |
55 | While developing the `deletePost` mutation, the developer forgot to add authorization to the resolver. This means that anyone can delete any post, even if they are not the author. This is a **broken function-level authorization**.
56 |
57 | You can try deleting Alice's and Bob's posts while logged in as Eve:
58 |
59 | ```graphql
60 | mutation {
61 | alice: deletePost(id: "1")
62 | bob: deletePost(id: "2")
63 | }
64 | ```
65 |
66 | To prevent this, we need to add authorization to the resolver.
67 |
68 | Our server already features a simple authentication mechanism. For instance, it is used when creating posts:
69 |
70 | ```js
71 | export const Mutation = {
72 | // `context` contains a `user` key if the user is logged in
73 | createPost: (_, args, context) => {
74 | // If the user is not logged in, throw an error
75 | if (!context.user) throw new GraphQLError('Not authorized');
76 | // Otherwise, create the post with the current user as the author
77 | return createPost(args.title, context.user.id);
78 | },
79 | // ...
80 | };
81 | ```
82 |
83 | We can leverage `context.user` to ensure that the user that tries to delete the post is the author:
84 |
85 | ```js
86 | import { getPost } from './database.js';
87 |
88 | export const Mutation = {
89 | // ...
90 | deletePost: (_, args, context) => {
91 | const post = getPost(args.id);
92 |
93 | // If the user is not the author, throw an error
94 | if (post && post.authorId !== context.user?.id)
95 | throw new GraphQLError('Not authorized');
96 |
97 | return deletePost(args.id);
98 | },
99 | };
100 | ```
101 |
102 | You can try deleting Alice's post again, it won't work anymore. You can only delete your own posts, **our broken function-level authorization is now fixed!**
103 |
--------------------------------------------------------------------------------
/packages/app/src/assets/cup.svg:
--------------------------------------------------------------------------------
1 |
67 |
--------------------------------------------------------------------------------
/packages/lessons/json-injection/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Validate JSON Inputs'
3 | description: 'Explore techniques for validating JSON input objects to mitigate the risk of injection vulnerabilities.'
4 | category: 'Injection'
5 | difficulty: 'Medium'
6 | owasp: 'API8:2019'
7 | authors: ['escape']
8 | ---
9 |
10 | Using `JSON` as a GraphQL input object can lead to vulnerabilities. This tutorial will show how one can exploit a `JSON` input object to **perform arbitrary SQL queries** with [Prisma](https://www.prisma.io) ORM, and **how to prevent it.**
11 |
12 | This lesson does not currently work in the browser for security reasons. You can run it locally with the following steps:
13 |
14 | - Clone the repository: `git clone https://github.com/Escape-Technologies/graphql-security-academy.git`
15 | - Run `cd learn/packages/lessons/json-injection`
16 | - Install dependencies with `yarn install`
17 | - Continue from here with `yarn start`, `yarn exploit`, etc.
18 |
19 | _More details on [prisma#17710](https://github.com/prisma/prisma/issues/17710)_
20 |
21 | ## The vulnerability
22 |
23 | This tutorial contains a GraphQL API that uses [Prisma](https://www.prisma.io) ORM to perform search queries in a SQLite database. It has one single resolver, `findUsers`, that takes a `JSON` input object as argument. The `JSON` input object is used to filter the users in the database.
24 |
25 | ```graphql
26 | # GraphQL schema
27 | type Query {
28 | findUsers(where: JSON): [User]
29 | # ^^^^ arbitrary JSON input object
30 | }
31 | ```
32 |
33 | ```js
34 | // GraphQL resolver
35 | Query: {
36 | findUsers: (_, { where }) => prisma.user.findMany({ where }),
37 | // ^^^^^ arbitrary object...
38 | // ...leading to arbitrary queries ^^^^^
39 | }
40 | ```
41 |
42 | Our database table contains more columns than what the API exposes. Indeed, there is an `apiKey` used for authentication purposes, and while an attack cannot read it directly, it can leverage Prisma's API to get it.
43 |
44 | ```graphql
45 | # Legitimate query
46 | query {
47 | findUsers(where: { email: { endsWith: "@example.com" } }) {
48 | email
49 | }
50 | }
51 |
52 | # Malicious query
53 | query {
54 | findUsers(where: { apiKey: { startsWith: "0" } }) {
55 | email
56 | }
57 | }
58 | ```
59 |
60 | - Start the API with `npm install` and `npm start`.
61 | - Run the exploit in `exploit/index.ts` with `npm run exploit`.
62 |
63 | ## How to prevent it
64 |
65 | We will use [zod](https://zod.dev/) to validate the `JSON` input object. Zod is a TypeScript library that allows to define a schema for a JavaScript object, and to validate it.
66 |
67 | ```ts
68 | Query: {
69 | findUsers: (_, { where }) => {
70 | // Allows equality, contains, startsWith and endsWith filters on columns
71 | const filterSchema = z.union([
72 | z.string(),
73 | z
74 | .object({
75 | contains: z.string(),
76 | startsWith: z.string(),
77 | endsWith: z.string(),
78 | })
79 | .partial(),
80 | ]);
81 | // Restrict to firstName, lastName and email
82 | const whereSchema = z
83 | .object({
84 | firstName: filterSchema,
85 | lastName: filterSchema,
86 | email: filterSchema,
87 | })
88 | .partial();
89 |
90 | // Validate the input object
91 | const results = whereSchema.safeParse(where);
92 |
93 | if (results.success) {
94 | // Use the safe version of the input objects
95 | return prisma.user.findMany({ where: results.data });
96 | } else {
97 | // Return an error in case the input object is invalid
98 | return new GraphQLError('Validation error');
99 | }
100 | },
101 | }
102 | ```
103 |
104 | - Install zod with `npm install zod`.
105 | - Use the zod schema that allows searching with `email`, `firstName` and `lastName` fields, but not others.
106 |
107 | You can now try to run the exploit again. It should not work anymore since Zod strips all unknown fields like `apiKey`.
108 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/icons/categories/Dos.svelte:
--------------------------------------------------------------------------------
1 |
38 |
--------------------------------------------------------------------------------
/packages/app/src/routes/Progress.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
33 |
34 |
63 |
64 | {/if}
65 |
66 |
173 |
--------------------------------------------------------------------------------
/packages/app/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
42 |
43 |
46 |
47 |
60 |
74 |
79 |
80 |
81 |
87 |
88 |
89 |
106 |
107 |
143 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/icons/categories/AccessControl.svelte:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/icons/categories/InformationDiclosure.svelte:
--------------------------------------------------------------------------------
1 |
122 |
--------------------------------------------------------------------------------
/packages/lessons/broken-object-level-authorization/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Implement Object-Level Authorization'
3 | description: 'Master the essentials of object-level authorization for secure data access and improved application security.'
4 | category: 'Access Control'
5 | difficulty: 'Easy'
6 | owasp: 'API1:2023'
7 | authors: ['escape']
8 | ---
9 |
10 | If this is the first lesson you are doing, welcome! This learning platform is developed conjointly by [Escape](https://escape.tech/) and [the open-source community](https://github.com/Escape-Technologies/graphql-security-academy). All the content of this site is open-source, and contributions are welcome.
11 |
12 | This lesson is about properly setting up object-level authorization in GraphQL with Apollo. The server code is given, with authentication developed following [Apollo's recommendations](https://www.apollographql.com/docs/apollo-server/security/authentication/). Small oversights have made **the authorization mechanism vulnerable**. Our goal is to exploit it and then fix it.
13 |
14 | ## The vulnerable server
15 |
16 | The GraphQL server of this lesson is made of 4 files:
17 |
18 | - `index.js` is the entry point of the server. It creates the Apollo server with a schema and starts it.
19 | - `resolvers.js` contains the resolvers of the GraphQL schema.
20 | - `context.js` contains the function that creates the context of each request. It allows authentication of the current user.
21 | - `database.js` contains a mock database of users and posts.
22 |
23 | The data served by the GraphQL server is a list of posts, each post having an author. Let's take a look at the data served by starting the server:
24 |
25 | - Open a new terminal.
26 | - Run `npm install` to install the dependencies.
27 | - Run `npm start` to start the server. It starts in development mode, so it will restart automatically when you make changes to the code.
28 |
29 | You should now see GraphQL IDE with the following query:
30 |
31 | ```graphql
32 | query {
33 | users {
34 | name
35 | posts {
36 | title
37 | }
38 | }
39 | }
40 | ```
41 |
42 | Running this query allows you to see the list of users and their **published** posts. Is there a way to access the **unpublished** posts of a user?
43 |
44 | ## Missing authorization
45 |
46 | As an attacker, the first step is usually to collect information about the target. Let's try to add all the fields possible to the query above:
47 |
48 | ```graphql
49 | query {
50 | users {
51 | id # One more field here
52 | name
53 | posts {
54 | id # Two more there
55 | published
56 | title
57 | }
58 | }
59 | }
60 | ```
61 |
62 | We now notice something very interesting: ids are sequential. This means that we can easily guess the id of a post: here `2` is missing, let's try to access it:
63 |
64 | ```graphql
65 | query {
66 | post(id: "2") {
67 | id
68 | authorId
69 | title
70 | published
71 | }
72 | }
73 | ```
74 |
75 | **It worked!** In all its glory, here is the unpublished post:
76 |
77 | ```json
78 | {
79 | "data": {
80 | "post": {
81 | "id": "2",
82 | "authorId": "1",
83 | "title": "",
84 | "published": false
85 | }
86 | }
87 | }
88 | ```
89 |
90 | Our server lacks object-level authorization, and this allows any attacker to access unpublished data. Let's fix it!
91 |
92 | ## Limiting access to published posts
93 |
94 | Since the beginning of this lesson, we issue requests as Eve, whose id is 3. The server identify us thanks to the `Authorization: Bearer 3` header, defined in the bottom left corner of the IDE. Eve should not be able to access Alice's unpublished posts.
95 |
96 | Our authentication mechanism is rather simple, but enough for this lesson. It is implemented in `context.js`. The `getContext` functions returns either an object containing the current user, or an empty if the user is not authenticated. This object is then passed to the resolvers as the `context` argument, in third position.
97 |
98 | We already have a resolver that relies on authentication: `me`. You can see that you are properly identified as Eve by running the following query:
99 |
100 | ```graphql
101 | query {
102 | me {
103 | id
104 | name
105 | }
106 | }
107 | ```
108 |
109 | We can use the context argument to check if the user accessing an unpublished post is its author. If not, we can return an error. Let's do that in `resolvers.js`:
110 |
111 | ```js
112 | export const Query = {
113 | // ...
114 |
115 | // Get the query context as the third argument
116 | post: (_, args, context) => {
117 | const post = getPost(args.id);
118 | if (!post) throw new GraphQLError('Post not found');
119 |
120 | // Refuse to return the post if it is unpublished and the user is not its author
121 | if (!post.published && post.authorId !== context.user?.id)
122 | throw new GraphQLError('Unauthorized');
123 |
124 | return post;
125 | },
126 | };
127 | ```
128 |
129 | Running this query as Eve (`Authorization: Bearer 3`) will now throw an error, whereas running it as Alice (`Authorization: Bearer 1`) will properly return the post. **No more unauthorized access!**
130 |
131 | Want to learn further about Access Control vulnerability? Check out [this article](https://escape.tech/blog/authentication-authorization-access-control/).
132 |
--------------------------------------------------------------------------------
/packages/lessons/sql-injection/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Combat SQL Injections'
3 | description: 'Delve into the mechanisms of SQL injections—how to exploit them and the strategies for preventing this enduring vulnerability.'
4 | category: 'Injection'
5 | difficulty: 'Easy'
6 | owasp: 'API8:2019'
7 | authors: ['escape']
8 | ---
9 |
10 | A SQL injection is a common attack vector that allows an attacker to execute arbitrary SQL queries on a database. This can be used to steal data, modify data, or even execute arbitrary code on the database server. This lesson focuses on a privilege escalation attack [leveraging a SQL injection](https://escape.tech/blog/sql-injection-in-graphql/).
11 |
12 | This lesson comes with a GraphQL server offering a login and registration service. To start the server, run the following command:
13 |
14 | - Install the dependencies with `npm install`
15 | - Start the server with `npm start`. The server will start in development mode: it will restart automatically when you make changes to the code and the database will be reset at each restart.
16 |
17 | A GraphQL IDE should open, allowing you to query the server.
18 |
19 | ## The vulnerability
20 |
21 | The server offers a query, `users`, allowing to retrieve the list of users, and two mutations, `login` and `register`, allowing to authenticate and register new users.
22 |
23 | Try creating an account with the following credentials:
24 |
25 | ```graphql
26 | mutation {
27 | register(email: "user@example.com", password: "password1")
28 | }
29 | ```
30 |
31 | You can see that the user has been created by querying the list of users:
32 |
33 | ```graphql
34 | query {
35 | users {
36 | email
37 | admin
38 | }
39 | }
40 | ```
41 |
42 | And you can authenticate with the following mutation:
43 |
44 | ```graphql
45 | mutation {
46 | login(email: "user@example.com", password: "password1") {
47 | id
48 | email
49 | admin
50 | }
51 | }
52 | ```
53 |
54 | Our goal is to exploit the `register` mutation to create an administrator account. The code behind the `register` mutation is the following:
55 |
56 | ```js
57 | db.run(
58 | `INSERT INTO users (email, password, admin) VALUES ('${email}', '${password}', 0)`,
59 | (err) => {
60 | // ...
61 | },
62 | );
63 | ```
64 |
65 | If you look closely, you can see that the email and password are directly injected into the SQL query. **This is a SQL injection vulnerability.** We can exploit it by including a string terminator `'` in the email, and then arbitrary SQL. For instance, registering with the following credentials:
66 |
67 | ```graphql
68 | mutation {
69 | register(
70 | # v We include a string terminator in the email
71 | email: "eve@example.com', '$argon2id$v=19$m=1024,t=1,p=1$Q3FMVVlaNlNjc1dIZWlQcg$p8om9rk2ef3+uzO8Hg0Gwhnx1+1vIll2qDiiWBACrUw', 1); --"
72 | # ^ We provide a password hash compatible with the server ^
73 | # We set the admin flag to 1 |
74 | password: "password1"
75 | )
76 | }
77 | ```
78 |
79 | The resulting query will be: (with added newlines for readability)
80 |
81 | ```sql
82 | INSERT INTO users (email, password, admin)
83 | VALUES (
84 | 'eve@example.com',
85 | '$argon2id$v=19$m=1024,t=1,p=1$Q3FMVVlaNlNjc1dIZWlQcg$p8om9rk2ef3+uzO8Hg0Gwhnx1+1vIll2qDiiWBACrUw',
86 | 1
87 | ); --', '$argon2id$v=19$m=1024,t=1,p=1$T1p2cTlBa0lmVg$kaoMvhUXvLxKXisdaky0kGZU2hoKD5tncvkKQkANagU', 0)
88 | ```
89 |
90 | You can see our malicious payload completely overriding the initial query. The `--` at the end of the query is a comment, allowing the resulting SQL to be valid. The comment contains the rest of the query, `', '${password}', 0)` in the JavaScript code above.
91 |
92 | We can query the list of users again to see if our malicious account has been created:
93 |
94 | ```graphql
95 | query {
96 | users {
97 | email
98 | admin
99 | }
100 | }
101 | ```
102 |
103 | It worked! We can now authenticate with our new account:
104 |
105 | ```graphql
106 | mutation {
107 | login(email: "eve@example.com", password: "password1") {
108 | id
109 | email
110 | admin
111 | }
112 | }
113 | ```
114 |
115 | ## Preventing SQL injections
116 |
117 | There are many ways to [prevent SQL injections](https://escape.tech/blog/sql-injection-in-graphql/#how-to-remediate). Most modern ORMs and database libraries will automatically escape the values you provide to prevent SQL injections. We use [sqlite3](https://www.npmjs.com/package/sqlite3) in this lesson, and it does feature an escaping mechanism: we use the `?` placeholder to escape the values we provide to the query, and provide the values separately as an array.
118 |
119 | Replace the database functions in `src/database.js` with the following:
120 |
121 | ```js
122 | export const createUser = async (email, password) =>
123 | new Promise((resolve, reject) => {
124 | db.run(
125 | // Use the ? placeholder to escape the values
126 | 'INSERT INTO users (email, password, admin) VALUES (?, ?, 0)',
127 | // Provide the values as an array
128 | [email, password],
129 | (err) => {
130 | if (err) reject(err);
131 | else resolve(undefined);
132 | },
133 | );
134 | });
135 |
136 | export const getUserByEmail = async (email) =>
137 | new Promise((resolve, reject) => {
138 | // Same here
139 | db.all('SELECT * FROM users WHERE email = ?', [email], (err, rows) => {
140 | if (err) reject(err);
141 | else resolve(rows[0]);
142 | });
143 | });
144 | ```
145 |
146 | You can retry the attack, but this time it won't work: **our server is now safe from SQL injections!** It, however still lacks proper validation mechanisms for the email, allowing us to register with an invalid email address, but this is the subject of another lesson.
147 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/Editor.svelte:
--------------------------------------------------------------------------------
1 |
125 |
126 | {
128 | if (event.key === 's' && (event.metaKey || event.ctrlKey)) {
129 | event.preventDefault();
130 | await save();
131 | }
132 | }}
133 | />
134 |
135 |
136 |
157 |
158 |
220 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/icons/categories/Complexity.svelte:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/packages/app/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/packages/app/src/assets/escape-logo.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/packages/app/src/assets/byEscape.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
{
59 | resizing = true;
60 | }}
61 | />
62 |
68 |
69 |
108 |
--------------------------------------------------------------------------------
/packages/lessons/disable-debug-mode/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Disable Debug Mode for Production'
3 | description: 'Explore the importance of turning off debug mode in a production environment to safeguard against unwanted information disclosure.'
4 | category: 'Information Disclosure'
5 | difficulty: 'Easy'
6 | owasp: 'API7:2023'
7 | authors: ['escape']
8 | ---
9 |
10 | Apollo Server has its debug mode enabled by default. This is useful for development, but **it can be a security risk in production.** In this lesson, you'll learn how to disable debug mode in production.
11 |
12 | ## What is Debug Mode?
13 |
14 | This lesson contains a mini GraphQL servers that runs directly in your browser. It comes with Apollo's default settings.
15 |
16 | - Install the server by running `npm install` in a terminal.
17 | - Start the server with `npm start`.
18 |
19 | This will open a GraphQL IDE, allowing you to run queries and mutations against the server. Our schema is quite concise, and only contains a single `Lesson` type.
20 |
21 | ```graphql
22 | type Lesson {
23 | title: String!
24 | points: Int!
25 | }
26 | ```
27 |
28 | Unfortunately, our _database_ contains an error: one of the values of `points` is undefined, which is incompatible with the schema. Try querying the `lessons` field to see the error:
29 |
30 | ```graphql
31 | query {
32 | lessons {
33 | title
34 | points
35 | }
36 | }
37 | ```
38 |
39 | You should see a long error message containing the following:
40 |
41 | - The cause of the error: `Cannot return null for non-nullable field Lesson.points.`
42 | - A stack trace, which shows the location of the error in the code.
43 |
44 | The stack trace contains precious information about the **internals of our server:** details about the code architecture, the packages used, etc. **This is a security risk in production.**
45 |
46 | ## Disabling Debug Mode
47 |
48 | Fortunately for us, turning this off in production is only a matter of configuration. Most JavaScript software designed for Node.js adheres to the [`NODE_ENV`](https://nodejs.dev/en/learn/nodejs-the-difference-between-development-and-production/) environment variable, which is [usually considered as a good practice.](https://12factor.net/config) Apollo Server is no exception, and [will omit stack traces when it is set to `production`](https://www.apollographql.com/docs/apollo-server/data/errors/#omitting-or-including-stacktrace)
49 |
50 | The GraphQL server of this lesson uses a `.env` file to set environment variables at runtime. If your server runs in a container, you should use [environment variables](https://docs.docker.com/compose/environment-variables/) instead.
51 |
52 | Set `NODE_ENV=production` in the `.env` file, and restart the server. Rerun the previous query:
53 |
54 | ```graphql
55 | query {
56 | lessons {
57 | title
58 | points
59 | }
60 | }
61 | ```
62 |
63 | The error message should now be much shorter, and the stack trace should be gone. **No more stack traces in production!**
64 |
--------------------------------------------------------------------------------
/packages/app/src/routes/Header.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 | {
50 | menuOpen = !menuOpen;
51 | }}
52 | />
53 | {:else}
54 |
59 | {#if mobile && menuOpen}
60 |
65 |
66 |
120 |
--------------------------------------------------------------------------------
/packages/app/src/lib/editor/Explorer.svelte:
--------------------------------------------------------------------------------
1 |
48 |
49 |
57 |
58 | {#if expanded}
59 |
30 | 
36 |
46 |
47 | {#if mobile}
48 |
37 | 
44 |
45 | API Security Academy
38 |
55 |
57 | {/if}
58 |
61 |
63 | {/if}
64 | -
60 | {#each files as file}
61 | {#if file.directory}
62 |
-
63 |
- 73 | 77 | 78 | {/if} 79 | {/each} 80 |
20 | {Math.ceil($progress)}/{total}
21 |
30 |
31 | {#if done >= total}
32 |
22 |
29 |
23 |
24 |
25 | = total}>
26 | 
27 |
28 | = total}>
35 | 
39 |
40 |
39 |
41 |
62 | Congratulations! You have done all lessons
42 |43 | You can post your certification of completion on your LinkedIn 44 | profile. 45 |
46 | 61 |Welcome on board 👋
48 |49 | API Security Academy provides hands-on, interactive lessons that teach 50 | various vulnerabilities and best practices in GraphQL security. You can 51 | access its full learning potential directly in your browser. 52 |
53 |54 | Each lesson is built around a WebContainer containing a live GraphQL 55 | application, so you'll not only understand why a vulnerability is 56 | risky, but also 57 | how to exploit it and, most importantly, how to fix it. 58 |
59 |61 | The API Security Academy is entirely 62 | 65 | free and open-source! 66 | 67 |
68 |69 | You can support the project by leaving a star, reporting bugs or even 70 | creating new lessons. We welcome all contributions! 71 |
72 |76 | Feel free to jump in and start your first lesson. Happy learning! 🔒 77 |
78 |Lessons
82 | 83 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | openFile(path)}
151 | />
152 |
153 |
154 |
156 |