Bitcoin_Exchange_website
Menu
Network design of the project: 3
Web GUI design: (Check Password). 8
Web GUI design: (Loading animation). 8
Process in Signa up an account. 10
Login Deposit Bitcoin in the account: 12
Login Withdraw Bitcoin in the account: 12
Buy/Sell BTC between account and another account. 14
System requirement:
Web server |
|
Operating system |
Ubuntu 18.04 |
Hardware |
Virtual machine(4GB RAM + 120GB +2 core CPU) |
Software |
PHP7 , phpMyAdmin, MySQL ,Apache 2 |
Network (interface 0 ) |
Internal network IP: 192.168.153.10 |
Function |
Web server + Database server |
Firewall |
|
Operating system |
Pfsense |
Hardware |
Virtual machine(256MB RAM + 4GB +1 core CPU) |
Software |
N/A |
Network (interface 0 ) |
External network IP: 192.168.1.101 |
Network (interface 1 ) |
Internal network IP: 192.168.153.1 |
Function |
Firewall + port forwarding(From webserver to external network) + DHCP(internal network) + DNS(internal network) |
Attacker (For security Demo) |
|
Operating system |
Kali Linux |
Hardware |
Virtual machine(2GB RAM + 80GB +4 core CPU) |
Software |
N/A |
Network (interface 0 ) |
External network IP: 192.168.1.100 |
Function |
Attack firewall & webserver |
Network design of the project:
In the internal network the web server will have a web page in port 80 , that firewall need to port forwarding it to the external network with the firewall IP. So, for the external network the website will become IP 192.168.1.101 and port 80. Also, I have made a DNS for the website in http://eie3117projectbitcoinexchangenet.ga/ . That mean the kali Linux or devices in the external network can use http://eie3117projectbitcoinexchangenet.ga/ or 192.168.1.101 to access the website
That is the firewall setting of port forward
Also, the only port 80 or 443 go form external network to the internal network
And all the port can go from internal network to external network
This is the firewall rule
Pfsense connect rules |
Allow TCP port 80 (HTTP) INPUT |
Allow TCP port 443 (HTTPS) INPUT |
Deny All port INPUT |
ALLOW All port OUTPUT |
So, in kali Linux use Nmap to scan the 192.168.1.101 will only have port 80 and 443
Tools and Frameworks:
Frameworks: |
Apache: mod_security (with owasp rules) https://github.com/SpiderLabs/ModSecurity
mod_evasive https://github.com/jzdziarski/mod_evasive
mod_PageSpeed https://developers.google.com/speed/pagespeed/module
|
HTML + CSS Website template A design for the website https://www.bypeople.com/industrious-business-html5-responsive-template/
|
JavaScript: Local QR Code Generator(qrcode.js) Generate QR code https://davidshimjs.github.io/qrcodejs/
|
PHP: reCAPTCHA(I'm not a robot) Check user must not be robot https://www.google.com/recaptcha/about/
PHPMailer Send email in php https://github.com/PHPMailer/PHPMailer
Basic MultiSig Wallet API (PHP) https://block.io/api/simple/php
|
API: Blockchain Data API https://www.blockchain.com/api/blockchain_api
|
Tools: |
Chrome(Developer Tools) https://www.google.com/intl/zh-HK/chrome/
phpMyAdmin
Adobe Brackets (+ beautify extenuation)
Beautify Extenuation(Formatting php, html, JavaScript, CSS) https://github.com/brackets-beautify/brackets-beautify
Nmap(Scan port)
Freenom (Set DNA domain name)
Testnet Wallet (Bitcoin testnet wallet for android phone) https://play.google.com/store/apps/details?id=de.schildbach.wallet_test&hl=en_US&gl=US
|
Web GUI design:
1. Responsive web design (RWD) -> Design cover phone, table, and desktop
2. Web GUI have three parts, the information part box will in the center
3. That makes the UI can fit both the mobile and desktop.
This is the design pattern of the web UI.
This is the UI show in mobile phone |
This is the use show in table/desktop computer |
Web GUI design: (QR code)
The receive address will use JavaScript to Generate QR code(For phone wallet users) The QR code is (“Bitcoin:<receive address>”)
Web GUI design: (Check Password)
Check password is correct or not can clearly show the password requirement
Web GUI design: (Loading animation)
In some pages need to wait few seconds(such as Record and Personal information) add some loading animation, that let the user know is loading the page. It is not no responsive and make the page eyes catching.
|
Process in Signa up an account
1. Go to the sign-up page (From index page signup button or login page ”Want a new account”) |
Fill in the form in the blank and click “Submit Form and send an email to check”: |
Check the email , click “confirm account” and done |
Process in Login:
Go to login page and enter the form and click login |
Login successful |
Login Deposit Bitcoin in the account:
1. In the login index click this button |
2. User your wallet sends crypto to this address: |
E.g., use my wallet send BTC |
In the record page will show After the exchange done will add to your bitcoin value |
Login Withdraw Bitcoin in the account:
1. Go to the withdraw bitcoin page and fill in the form and click “View the withdraw detail” |
If you do not know the value of the bitcoin, you only want to sell specific value bitcoin (such as value $1000 USD BTC) $1000 USD = 0.016061 BTC And you will get the price of BTC |
2. Then generate the withdraw detail , if user want to send click “Send it now” |
3. Now in the login index page will have this box click it that you can view the exchange detail |
Buy/Sell BTC between account and another account
1. Sellers launch the sale. Go to Exchange Bitcoin page and click “Edit my selling” |
2. Then Sellers input all the information and click “Add New Sale” |
3. If the information is correct that will show it in your selling. In this time seller need to wait someone buy it. |
4. In the Buyer, they can view the payment in the exchange page, if they want to see the detail click “view” |
5. If the buyer wants to buy it, Upload the payment record image can click “Submit and apply the payment”. |
6. Then the buyer will show the detail waiting the seller confirm If buy want to view the uploaded image can click “view image” |
7. Buyer can use the button to zoon the size to view the image |
8. The seller Exchange Bitcoin Edit page will change like the follow image; seller can click “view” to view the image like ‘7.’ If the seller think it is ok, it can click “confirm” to confirm the payment. The payment is done and the BTC will send to the buyer |
If want to view the record , that can go to the record page to view it |
Show Bind
Database design
Database: Bitcoin_Exchange_website
The database will have one account:
1. management account (only can insert data and update data)
All the function of the website only needs insert and update to achieve it.
Security evaluation:
Apache:
mod_security:
This apache module can detect the attack and defense it (Such as SQL injection Attacks, Cross-site Scripting or Path Traversal Attacks). In server use OWASP ModSecurity core rule Set to become the rule.
mod_evasive:
The apache module can protect the web server that is having dos attack.
PHP:
Google reCAPTCHA
User to identify the user is robot or not. Avoid malicious registration of robots or interested persons to affect the website.
Firewall:
Only allow the port with is in needed. So, the firewall only open port 80,443.
Website:
Will check the user input only allow specific character such as(input price only can input float number). So, input have specific value will use hash to check it such as (Login ID or password)
Difficulties
The bitcoin wallet is difficult to set up, for example, I need to know how many coins used to deposit and withdraw. I make a specific address for the user and let them deposit their coin, finally, it can check how many users save coins in the address. Generate a specific address only allow withdrawals to specific users
The firewall port forwarding is difficult to do it. It is because the set up always not working or apply. I set up and reset 5 time and it work.
Firewall and the web server network are not stable. Sometimes the firewall and the web server will suddenly disconnect to the internet. To make it stable , I only set it with static IP and always save the status of web server and firewall in snapshot. That make it more stable and restore it when the network has problem.
The crypto wallet is difficult to set up, so I ask my friend and watch how to set up it, finally the setup is done.
It difficult to save the image into database, so I change the way save the image into specific location and give them a unit id for the file. The database only saves the image name.
Reference
W3schools : https://www.w3schools.com/
Learn web development : https://developer.mozilla.org/en-US/docs/Learn
How TO - Password Validation: https://www.w3schools.com/howto/howto_js_password_validation.asp
qrcode.js : https://davidshimjs.github.io/qrcodejs/
How to Install the LAMP Stack on Ubuntu 18.04 : https://phoenixnap.com/kb/how-to-install-lamp-stack-on-ubuntu
pfSense Documentation : https://docs.netgate.com/pfsense/en/latest/
【程式】整合 reCAPTCHA v3 到 PHP 程式
https://bojack.pixnet.net/blog/post/46667961
Testnet Wallet
https://play.google.com/store/apps/details?id=de.schildbach.wallet_test
Reference in function, Step and UI design:
Binance exchange website : https://www.binance.com/zh-TW
Coinbase : https://www.coinbase.com/
HTML Website Templates : https://nicepage.com/html-templates
9 basic principles of responsive web design
https://blog.froont.com/9-basic-principles-of-responsive-web-design/
Bitcoin testnet3 faucet
https://coinfaucet.eu/en/btc-testnet/
How to Install mod_security and mod_evasive on Ubuntu 16.04
https://linuxhostsupport.com/blog/how-to-install-mod_security-and-mod_evasive-on-ubuntu-16-04/
PageSpeed Module
https://developers.google.com/speed/pagespeed/module
Pure CSS Loader - Optimized Spinners for Web · Loading.io
51: Upload Files and Images to Website in PHP | PHP Tutorial | Learn PHP Programming | Image Upload
https://www.youtube.com/watch?v=JaRq73y5MJk
Docs » pfSense® software » Network Address Translation
https://docs.netgate.com/pfsense/en/latest/nat/port-forwards.html
PHPMailer
https://github.com/PHPMailer/PHPMailer/releases
Bitcoin Testnet - Blockchain.com
https://www.blockchain.com/explorer?view=btc-testnet
Freenom