Secure Flask API used for serving JSON files to a basic HTML, JavaScript, and CSS web application

I have developed a basic web application that will display data in a table and be updated on a weekly basis.

To perform this update, I utilize Python code in the backend to scrape and modify data before storing it in a SQLite database.

After some research, I discovered that in order to deliver this data to my web app, I need to create an API using Flask. This API will receive the data and send it to the JavaScript in my web app as JSON for populating the table. However, considering securing the API with a username and password may not be necessary since the frontend is in JS and the credentials could potentially be accessible to users.

Should I make my API accessible to everyone, or is there a better way to use SQLite data as a backend for my web application? I am open to keeping the API restricted to GET requests only.

javascriptflaskflask-restful

Answer №1

Your API security measures may be unnecessary in some cases, as securing an API is only crucial under specific circumstances.

If you are handling confidential data that should not be accessible to everyone, especially through backend calls, implementing security measures such as API keys or authorization tokens would be advisable.

On the other hand, if your frontend is making calls to a backend API and the user can already view and access the data being returned, adding extra security might not serve any purpose.

In situations where sensitive information on a webpage needs protection, focusing on securing the website itself (such as requiring a login with credentials) could be more effective. By ensuring that only authenticated users can access certain pages, you can update the API to limit responses to authorized requests.

Websites offering free data often have unsecured frontend API calls since the data is freely available. While some sites try to verify their own domain is accessing the API, this method can still be circumvented by web scrapers extracting data from the HTML.

Answer №2

For an in-depth guide on adding authentication headers to your Python Flask app, check out this helpful resource. One approach is to hard code the header information directly into Flask for added security. Alternatively, you can explore a more complex method of retrieving header data from your database. Below is a snippet of code that retrieves information from a PostgreSQL database, which can be adapted for use with SQLite:

def authenticate():
  headers = request.headers
  authorization_key = headers.get("X-Api-Key")
  authorized_user = User.query.filter_by(apikey=authorization_key).first_or_404()
  print('Retrieved from database: ', authorized_user,'', authorization_key)
  return str(authorized_user)

Answer №3

  1. If your intention is to display public data, there may not be a need for authentication. Implementing unnecessary security measures could result in wasted time.
  2. With only a simple database table, creating an API may be overkill. You can opt for generating an HTML template and populating it with the data instead. Check out some sample templates here and browse through a few more examples here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

% unable to display on tooltip pie chart in highcharts angular js

https://i.stack.imgur.com/Ccd7h.png The % symbol isn't displaying correctly in the highcharts ageData = { chartConfig: { options: { chart: { type: 'pie', width: 275, height: 220, marginTop: 70 ...

javascriptangularjshighchartspie-chart

What is the reason behind React deciding to skip the final question, even though it has been accurately saved to the

A simple web application was developed to calculate risk scores by asking five questions, with additional points awarded if a checkbox is checked. Despite extensive hours spent debugging, a persistent bug remains: the final question does not appear on the ...

javascriptreactjs

Issue with setting HTML content using jQuery's .html() method

I have a simple functionality. When a user clicks on the edit link, it transforms the previous element into an input element for editing, and changes the edit link into a cancel link. If the user decides not to edit, they can click on cancel and everything ...

javascriptjqueryhtml

What is the best way to retrieve an object instead of an array?

When attempting to retrieve a JSON Object, I unexpectedly received an array instead. My query is based on the primary key, so I anticipate only one result. This is my current method : router.get("/student_info/:id", (req, res, next) => { connecti ...

javascriptmysqlnode.jsexpress

Sending a $.ajax post request transforming into a get

Struggling to understand the behavior of my jquery ajax request, I've hit a roadblock. function newContact() { $.ajax({ type: 'POST', contentType: 'application/json', // url: ...

javascriptjqueryajaxjsonhttp-post

Launching a program through a web browser - a step-by-step guide

I am looking to create a specific sequence of events: A web browser opens, and a user logs in (the exact action is not crucial) The user is then redirected to a new page where another program should automatically open This process is similar to what happ ...

javascripthtmlweb

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

javascripthtmlreactjs

Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

When utilizing ng-repeat with dynamic ng-include that includes variables, the variables are not being properly recognized. Take a look at this code snippet. Here is the main HTML code: <table style> <tr> <th>Student</th> ...

javascriptangularjsvariablesangularjs-ng-repeatangularjs-ng-include

Warning: Unidentified JavaScript alert(notification) encountered without declaring a

Imagine this scenario - when I type the following command: open google.com I need JavaScript to detect "open google.com" and prompt me with an alert. The challenge is figuring out how to generate an alert for just "google.com" without including "open". ...

javascript

Finding the length of a filter in an AngularJS directive

I'm trying to figure out how to retrieve the value of filtered.length within my custom directive called my-dir. <li my-dir ng-repeat="result in filtered = (results | filter:query | orderBy: 'title')"> <h1>{{ result.title }}& ...

javascriptangularjsangularjs-directive

Adding an HTML element to the DOM in an AngularJS directive without using jQuery

Looking to enhance my AngularJS directive by including an svg tag within the current element, currently using jQuery for this purpose. link: function (scope, iElement, iAttrs) { var svgTag = $('<svg width="600" height="100" class="svg">< ...

javascriptjqueryhtmlangularjs

What is the best way to transfer the main-video-wrap div into the video-list-Wrapping div?

Thank you @Kathara for your valuable assistance I have successfully set up the video layout with a picture-in-picture mode option. When I click on a video to move it to the background, it works well. However, I am facing difficulty in moving the entire vi ...

javascriptjquery

FadeOut Television static on Canvas after a period of inactivity

Is there a way to smoothly fade out the TV noise after a specific timeout period? I found this code snippet on Stack Overflow that seems to address a similar issue: var canvas = document.getElementById('canvas'), ctx = canvas.getContext( ...

javascripthtmlcanvas

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...

javascriptvue.jsvue-routervuetify.jsv-stepper

Tips for concealing scrollbars across various browsers without compromising functionality

Is there a way to hide the scrollbar functionality on a horizontal scrollbar without using "overflow: hidden"? I need to maintain JS functionality and ensure compatibility with all modern browsers. $j = jQuery.noConflict(); var $panels = $j('#primar ...

javascriptjquerycssscrollbar

Setting up redux with Next.js: a step-by-step guide

After setting up redux in this manner, everything is functioning properly. The _app.js file has been reorganized as follows : import App from 'next/app'; import { Provider } from 'react-redux'; import withRedux from 'next-redux-wr ...

javascriptreduxnext.js

The JSON output is throwing an error because it is unable to access the property '0' since it is

Trying to convert JSON data into an HTML table, I encountered the following error: "Cannot read property '0' of undefined" <?php $idmatchs = "bGdzkiUVu,bCrAvXQpO,b4I6WYnGB,bMgwck80h"; $exploded = explode(",", $idmatchs); $count = count( ...

javascriptphpjsonhtml-table

A guide to accessing items imported from a glb file within the Babylon JS game engine

When I use the BABYLON.SceneLoader.ImportMesh() method to load a .glb file created in Blender, one of the objects is named Cube.003. Surprisingly, after calling the method, Cube.003 is not included in the scene.meshes array. It does show up in the scene ...

javascriptblenderbabylonjs

Adjust the Appearance of Highcharts Legend Post-Rendering

After a Highchart is rendered, is it possible to modify the display settings without redrawing the chart? For instance, I would like to relocate the legend box from the right to the bottom upon screen resize, as illustrated in this image: --Example Pictur ...

javascriptangularjshighcharts

Display various formats in a pop-up window when different buttons are clicked

There has to be a simpler way to handle this situation. Currently, I have a modal with 4 hidden forms, one of which is active based on the "active" class. I want to show each form when different buttons like sign-up, forgot password, or sign-in are clicked ...

javascriptbootstrap-modal