Differences
This shows you the differences between two versions of the page.
|
ii:assignments:s2:stegano [2023/04/24 20:56] florin.stancu |
ii:assignments:s2:stegano [2023/05/24 17:14] (current) florin.stancu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ~~NOTOC~~ | ~~NOTOC~~ | ||
| - | ====== Main: Web-based steganography tool ====== | + | ====== Web-based steganography tool ====== |
| - | <note important> | + | **Deadline**: |
| - | **Work In Progress:** This is NOT the final version of the text / tasks! Please wait for an official announcement before starting the assignment! | + | * **//04.06.2023//**: <color red>HARD!</color> |
| - | </note> | + | |
| + | **Changelog:** | ||
| + | * //24.05.2023//: ''/image/decode'' & ''/image/last/*'' endpoint clarifications + final deadline! | ||
| ===== Context ===== | ===== Context ===== | ||
| Line 36: | Line 38: | ||
| ===== Specification ===== | ===== Specification ===== | ||
| - | You must implement either a Python CLI -- command-line interface (for a max. score of 40%) -- or a web-based page, or both (for an easy bonus!). Whatever you choose, you must respect the specifications written at each of the sub-sections below: | + | You must implement a Flask web server serving a basic User Interface with several (*ahem*, two) HTML forms for uploading images, plus specific backend routes for receiving the uploaded files, doing the actual steganography encoding / decoding processing and giving back the results. |
| + | |||
| + | In the following subsections, we define some minimal (required) aspects to be followed (especially to make the grading process easy to automate) + recommandations of the best approaches to consider (as notes / hints). | ||
| <note> | <note> | ||
| - | We recommend to start this assignment by first writing small Python functions / modules with the steganography encoding / decoding algorithms. | + | We recommend to start this assignment by first writing small Python functions / modules and/or CLI script for running the steganography encoding / decoding algorithms. |
| This will decouple the tasks (encoding / decoding vs web frontend), allowing you to partly validate the solution before continuing. | This will decouple the tasks (encoding / decoding vs web frontend), allowing you to partly validate the solution before continuing. | ||
| - | + | OFC, bonus for using unit testing ;), although this is out of scope. | |
| - | Bonus for using unit testing ;) , although this is out of scope. | + | |
| </note> | </note> | ||
| - | ==== CLI ==== | + | ==== REST-ful Web API ==== |
| - | The CLI script (if present) must be named ''cli.py'' and use the following syntax: | + | A Web-based API (Application Programming Interface) is a contract between the provider of a service and the user wishing to make use of it. |
| - | <code> | + | This usually consists of the format of the different URLs, specific parameters, HTTP methods they may be called with and request / response body formats. |
| - | ./cli.py [encode|decode] [-m MESSAGE] INPUT_IMAGE [OUTPUT_IMAGE] | + | [[https://en.wikipedia.org/wiki/Representational_state_transfer|REpresentational State Transfer (REST)]] is a set of common principles / rules which makes such APIs consitent and easy to use. |
| - | Encodes or decodes the . | + | Your Flask application must, too, adhere to such an API: |
| + | |||
| + | * ''/'': serves the front HTML page; | ||
| + | * ''/image/encode'': receives a [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type|''multipart/form-data'']] with the following fields (i.e., form names): ''file'' (the uploaded file, binary data) and ''message'' (the string message to embed into the image using steganography); responds with the generated image (as binary downloaded data); the encoded image should also be saved onto the server's disk for later retrieval requests; | ||
| + | * ''/image/last/encoded'': retrieves (i.e., downloads / displays) the binary contents of the last encoded image (no arguments required); | ||
| + | * ''/image/decode'': takes an encoded image and outputs the original steganography message (using the least significant bits technique); request should have a ''multipart/form-data'' content type and receive a ''file'' field with the stegano-encoded image, and output the decoded message (either as HTML page or as a simple ''plain/text''' output); it should also store the decoded text / binary data (if you wish to support it); | ||
| + | * ''/image/last/decoded'': retrieves the last decoded plain text (or binary data, if you support this); do not output HTML here, just the raw data (used for test automation purposes). | ||
| - | </code> | + | Image formats: use any web-compatible lossless compression format (e.g., ''png'' is a safe choice; for advanced users: ''webp'' ;) ). |
| + | As stated before, this is important for automating the grading process, so please respect it! | ||
| - | ==== Web Interface ==== | + | You may add any additional routes as required by your HTML+CSS-based UI (described below). |
| - | The web server must repond to the following URLs implementing the requested functionality: | + | You may also add additional parameters (but they must be optional!) to the encode / decode endpoints if you with to make the steganography technique customizable (e.g., use more significant bits or encode some redundancy, for bonuses ;) ). |
| - | + | ||
| - | * ''/image/encode'': receives a ''multipart/form-data'' with the following arguments: | + | |
| - | asdasd | + | |
| - | ===== Resources ===== | + | ==== User Interface ==== |
| - | * [[https://pillow.readthedocs.io/en/stable/|pillow]] is a image processing module that has support for many image formats and grants the developer access to the pixel data. You can install it using ''pip3'' (see our [[:ii:labs:03|previous lab]] for info regarding ''pip'' and virtual environments). | + | The web frontend should present a (somewhat) friendly user interface with, at minimum, a simple front page (with a basic description) and the two upload form pages for steganography encoding / decoding. |
| - | * [[https://docs.python.org/3/library/argparse.html|argparse]] is a command line argument parser (useful if you want nice CLI scripts configurable with options). | + | |
| + | All pages must have a common menu bar (hint: use a Jinja2 template!) directly linking to the three pages (index / encode / decode). | ||
| + | We recommend the use of a CSS framework (e.g., [[https://getbootstrap.com/docs/5.3/getting-started/introduction/|Bootstrap]]) for easily adding vertical / horizontal menus to a HTML page. | ||
| + | |||
| + | The image upload forms should contain at least one file input, a textbox for the message to encode (for the encoding page) or a box to display the decoded image (for the decoding page). You should also show the last image uploaded to the server side-by-side with the form (e.g., as floating image; use the ''/image/last/*'' REST endpoints for this). | ||
| + | |||
| + | The design (aspect) of the web pages does not matter as long as it meets the requirements above and one is able to determine which link to press for accessing the required steganography encode / decode functions. | ||
| + | |||
| + | ==== Containerization ==== | ||
| + | |||
| + | In order for your web application to be easily deployable / shared (with us :P), you must add a Dockerfile installing all of its dependencies (use PIP requirements, ofc!). | ||
| + | You may start from any base image, although we recommend ''alpine'' due to its low disk footprint. | ||
| + | |||
| + | Thus, a containerized solution must work using the following steps: | ||
| + | * the ''docker build -t iap-tema2 .'' command should run successfully; | ||
| + | * ''docker run -p 8080:80 -it iap-tema2'' should start the Flask server and make it accessible on ''http://localhost:8080''. | ||
| + | |||
| + | <note> | ||
| + | Please follow the archiving conventions and have everything (especially the ''Dockerfile'') inside its root directory! | ||
| + | </note> | ||
| ===== Grading ===== | ===== Grading ===== | ||
| - | The base assignment constitutes **4p** out of your final grade (100p homework = **5p** final grade). The 100p are split between the following tasks: | + | The base assignment constitutes **4p** out of your final grade (100p homework = **4p** final grade). |
| - | * **[40p] Stegano encode / decode script:** either console-based or web-based (using Flask + HTML), as long as it works as intended! | + | The 100p are split between the following tasks: |
| + | |||
| + | * **[40p] Stegano encode / decode script:** either working in console (via CLI scripts) or web-based (using Flask + HTML), as long as it works as intended! | ||
| * **[40p] Web UI (HTML Forms + Flask):** web-based frontend for uploading images and encoding / decoding secret messages using the described technique (Note: it must respect the given specification!); | * **[40p] Web UI (HTML Forms + Flask):** web-based frontend for uploading images and encoding / decoding secret messages using the described technique (Note: it must respect the given specification!); | ||
| - | * **[20p] Docker container:** write a (working) Dockerfile for easily building & running the server or CLI; | + | * **[20p] Docker container:** write a (working) Dockerfile for easily building & running the server; |
| - | * **[up to 10p] Bonuses (choose any):** | + | * **[up to 10p] Bonus ideas:** |
| - | * Implement both a CLI (using ''argparse'') + Web frontend using a modular approach (shared encoding / decoding code!); | + | * A nice UX ;) |
| - | * Extra steganography analysis (e.g., by adding additional checkbox fields) for visualizing the data of specific color channels of an image using the masking technique; | + | * Implement both a CLI (using ''argparse'') + Web frontend using a modular approach (code sharing!); |
| + | * Extra steganography-related functionality (e.g., by adding additional form fields); e.g., add parameters for visualizing the data of specific color channels of an image using binary masking, use specific color channels / multiple bits for encoding the data etc. | ||
| - | <note> | + | Write a README (.txt / .md) containing a description of your implementation, design choices, any third party libraries used (e.g., PIL), challenges you encountered, etc. Feel free to add your feedback here as well. |
| - | Write a README containing the description of your implementation, design choices, challenges you encountered, etc. Feel free to add your feedback here as well. All submissions that do not include a README will be greatly devalued! | + | |
| - | ---- | + | The project's source code (i.e., no binary / generated files need to be included) must be archived (''.zip'' please) and make sure the scripts (incl. Dockerfile) are placed directly in the root folder (i.e. depth 0) of the archive! Otherwise, the grading process will be slower => lower score :( |
| - | **NOTE:** Assistants are free do deduct points for bad / illegible code. | + | <note important> |
| + | **NOTE:** Assistants are free do deduct points for bad / illegible code! | ||
| + | |||
| + | Also, please double-check if you followed all naming conventions! | ||
| </note> | </note> | ||
| - | ===== Test Images ===== | + | ===== Resources ===== |
| - | {{:ii:assignments:s2:secret.zip|This archive}} contains a PNG image with 5 secrets hidden at certain bit levels and at different channels. | + | * [[https://pillow.readthedocs.io/en/stable/|pillow]] is a image processing module that has support for many image formats and grants the developer access to the pixel data. You can install it using ''pip3'' (see our [[:ii:labs:03|IDST labs]] for info regarding ''pip'' and virtual environments). |
| + | * [[https://docs.python.org/3/library/argparse.html|argparse]] is a command line argument parser (useful if you want nice CLI scripts configurable with options). | ||
| + | * [[https://flask.palletsprojects.com/en/2.2.x/|Flask]] web framework for Python. | ||
| + | * [[https://jinja.palletsprojects.com/en/3.1.x/templates/|Jinja2]] template engine (integrated with Flask). | ||
| + | * [[https://docs.docker.com/get-started/|Docker]] container engine (Getting started tutorial). | ||
| ===== FAQ ===== | ===== FAQ ===== | ||
| **Q: Can I write the tool in something other than Python?** \\ | **Q: Can I write the tool in something other than Python?** \\ | ||
| - | A: No. | + | A: No. You have the [[:ii:assignments:s2:chip8|Chip8 Bonus Assignment]] in C, if you want to be closer to the metal ;) |
| **Q: What platform will this assignment be tested on?** \\ | **Q: What platform will this assignment be tested on?** \\ | ||
