Skip to content

urasoko/ai-generated-app

 
 

Repository files navigation

AI Generated App

This app was generated by the prompt, "create a webapp that allows users to upload PDF files then download them later."

It contains several first-party code vulnerabilities, including an easily exploitable Path Traversal vulnerability.

By using the Snyk IDE extension, we can find the vulnerabilities and fix them with the Snyk DeepCode AI engine.

Running the App

  1. Clone this repository and open it in your preferred IDE (note: this guide is aimed at VSCode).
  2. Build and test the app by running the npm run build && npm test command.
  3. Transpile TypeScript (index.ts) to JavaScript (index.js) by running the tsc command.
  4. Run the npm start command to run the app, and access it at http://localhost:3000.

Scanning for Vulnerabilities

Install the Snyk IDE Extension and Enable DeepCode AI Fix if you haven't done so already.

Snyk scans are disabled by default in this workspace. This was done intentionally so that Snyk can be revealed in the middle of the demo flow. Review the included .vscode directory for more details.

To enable Snyk in VSCode, run Command+Shift+P, type "snyk," and select Snyk: Settings (or click Snyk Security on the bottom right of your IDE). Click the Workspace tab, then enable all of the Snyk > Features: <scan type>.

Tip: To quickly reload VSCode, run Command+Shift+P, type "reload," and select Developer: Reload Window.

Tip: To reset all changes you made during your demo, including source code and Snyk IDE extension settings, run git reset --hard HEAD followed by git clean -fd.

Exploiting the Path Traversal Vulnerability

This repo contains a Path Traversal vulnerability that can be exploited as follows:

  1. Run a Snyk Code scan and review the Path Traversal vulnerability information and fix advice.
  2. Run the app and open it at http://localhost:3000
  3. Construct a URL similar to http://localhost:3000/download/..%2F..%2F..%2FPictures%2Fhacked.jpg. You may need to add or remove ..%2F as needed, and adjust the path to the "exploited" file. Each ..%2F is a "dot dot slash" that moves up a directory.
  4. Copy and paste the URL into your browser. By using this path traversal method, an attacker can access any file on your server. This may include source code and configuration files.

Suggested Demo Flow

  1. Disable all AI code generation extensions in VSCode by navigating to Extensions in the left pane. Click the cog wheel on each extension and select Disable (Workspace). This demo is intended to be AI tool agnostic.
  2. Describe how the app was generated by AI using the prompt, "create a webapp that allows users to upload PDF files then download them later."
  3. Describe how AI generated the index.ts (backend code), public/index.html (frontend code), and tests/server.test.ts (unit tests).
  4. Describe how we didn't just get code, but an app that actually runs! Run the app with npm start.
  5. Access the app at http://localhost:3000 and show how it works. Create a blank PDF using cd ~/Desktop && touch demo.pdf. Upload the PDF. Show how it was added to the app's /uploads folder. Copy the upload ID in the web browser to your clipboard. Change the URL to /download/<id> to show that the PDF was downloaded successfully.
  6. Ask a trick question, "Our app works, our unit tests are passing. Safe to ship it to production, right?" Of course not. We should scan for vulnerabilities using Snyk!
  7. Quickly enable Snyk scans in your IDE settings as described above, then reload the window if needed.
  8. Review the vulnerabilities in the index.ts file and open the side panel for the Path Traversal vulnerability. Click on the vulnerability overview and review the description: "an attacker can use 'dot dot slash' notation to access arbitrary files."
  9. Demonstrate that it's a serious vulnerability; something we need to care about. Exploit the vulnerability by following the instructions above.
  10. Fix the vulnerability using DeepCode AI. Any of the proposed solutions should fix it.
  11. Stop the server with CTRL+C, rebuild the app with the tsc command, and run the app again with the npm start command.
  12. Your web browser should still be showing the vulnerable URL and an arbitrary file. Refresh your web browser. You are no longer be able to access arbitrary files!
  13. Summarize the demo by re-iterating how easy it is for developers to find and fix vulnerabilities using Snyk.

About

Sample AI generated app for Snyk demonstration purposes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 76.5%
  • HTML 21.9%
  • JavaScript 1.6%