I have scenario where I want to use sockets to wrap my API calls and not available to hit directly the api in browser and get data.
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Report</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
</head>
<body style="background-color:mintcream;">
<div ><span style="font-family: sans-serif;font-size: x-large;al:center;">reportyu</span> <br> <br>
<table id="example" class="table table-striped table-bordered" style="width:100%;">
<thead>
<tr>
<th>Lame</th>
<th>IAr</th>
<th>Hee</th>
<th>ED</th>
<th>SPs</th>
<th>Ts</th>
<th>SD</th>
<th>Rs</th>
<th>Ld</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Lame</th>
<th>IAr</th>
<th>Hee</th>
<th>ED</th>
<th>SPs</th>
<th>Ts</th>
<th>SD</th>
<th>Rs</th>
<th>Ld</th>
</tr>
</tfoot>
</table>
<script>
function setupData() {
$(document).ready(function () {
$('#example').DataTable({
responsive: true,
"ajax": {
"url": "/index_get_data",
"dataType": "json",
"dataSrc": "data",
"contentType":"application/json"
},
"columns": [
{"data": "L_name"},
{"data": "Ia_r"},
{"data": "He_e"},
{"data": "e_d",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='//abc.app.com/"+oData.e_d+"'>"+oData.e_d+"</a>");
}
},
{"data": "s_ps"},
{"data": "t_s"},
{"data": "s_d",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='//app2.com/"+oData.s_d+"'>"+oData.s_d+"</a>");
}
},
{"data": "R_n",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='//sshse.com/"+oData.R_n+"'>"+oData.R_n+"</a>");
}
},
{"data": "l_d"}
],
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
},
'copyHtml5',
'excelHtml5'
]
});
});
}
$( window ).on( "load", setupData );
</script>
</body>
</html>
here is my app.py :
from flask import Flask, render_template, jsonify
import json
app = Flask(__name__)
@app.route('/index')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/index_get_data')
def stuff():
# Assume data comes from somewhere else
with open('crtp.json') as test_file:
data = json.load(test_file)
return jsonify(data)
if __name__ == '__main__':
app.run()
This works as expected but when I hit the url localhost:5000 in browser I am also able to see the API call in network tab of the browser and then if I hit the endpoint localhost:5000/index_get_data
I am able to use the API openly.
I have explored options of sending token based auth in headers and basic auth but still the response can be derived and the API is still open for use which I want to restrict , I came across flask-sockets which seems to help here but not sure how can I implement this here.
Any help regarding this or any other approach to achieve this would be great.
