Develop Reference

Flask API to provide JSON files to a simple HTML+JS+CSS webapp while keeping it secure

I've made a simple webapp that is going to show some data in a table, which will be updated weekly.
This update it done in the backend with some python code, that scrapes and alters some data, before putting it in a SQLite database.
After doing some reading I learned that to deliver that data to my webapp I should make a API with Flask, that can take that data and deliver it to the JS in my webapp in form of JSON, which then can use the data to populate the table. However, I should secure my API with username and pw. But as its a JS frontend that will retrieve data from the API, there is really no point, as the username and pw will have to be hardcoded into JS, which then can be read by the users. (I think)
Should I expose my API to everyone, or is this not the way to go to be able to use SQLite data as a backend for my webapp? I am fine keeping the API to a GET only.

You are correct, it is pointless for you to secure your API. Securing an API is only needed in certain circumstances.
If you are accessing data that you don't want anybody to see, perhaps through a backend call, then it would make sense to add in some form of security (normally an API key or Authorisation tokens in your request headers).
However, if you are making calls from your front-end (i.e. client side) to a backend API, then there is no point putting additional security there as the user can already see the request and already has access to the data the API is returning - so by securing it you are achieving nothing.
Normally, if the page the user is visiting contains sensitive data that you don't want everyone to see, you would take steps to secure your website instead (for example protecting it with a login for username and password before you can access that page). If you were to take this approach, where the website is protected by username and password, then you can update the API to make sure it does not respond to requests where the user is not authenticated (e.g. by generating a session token or something unique for each logged in user).
If you have a look around on websites that have lots of free data available, you will find they all have front end API calls that are completely unsecured (because it is pointless if the data is already free to access). Some websites do take steps to try to make sure it is their own website that is calling the API, but even then it is a bit pointless as web scrapers can always extract the data from the HTML.

Take a look at this page which outlines authentication headers. This simpler route is to hard code the header info in Flask to make it a little more secure. You could also try the more involved route of reading header info from your db. What's currently working for me to read from postgres db is below so you may modify it slightly for sqlite.
def valid():
headers = request.headers
auth = headers.get("X-Api-Key")
user = User.query.filter_by(apikey=auth).first_or_404()
print('from search of db ',user,'',auth)
return str(user)

As you mentioned, you plan to show a public data - then it can be used even
without authentication. Otherwise I think it can take too much unnecessary time spent on that.
As you have just a simple and single table from database, I believe that you don't need an API. You can just create HTML template and render it with data. Some examples can be found here and few more here.

How to process sensitive data in single page apps

I need to understand and maybe ideas about single page apps.
I want to create a project, i'll do it with MVC. I also want to use AngularJS for client side programming.
I know that AngularJS is good for single page applications and when working with SPAs you send your data to API to process. But data sent from Angular is visible to user and open to be manipulated.
I don't want users to be able to see any data or access to the API from the internet. Witch way i should follow?
I'm thinking about keeping sensitive user data in MVC controller. For example let's say user Id is very sensitive for my project. If i keep user id in javascript variable, when i'm sending it to API with some command user will able to change the id and manipulate the system. But if i keep user-id in MVC controller, via user authentication, and send request to my MVC controller then the user won't be able to change it. But i know this is not the best way of doing things, there must be a more clever way.
I'll be glad if someone can explain how this things works in SPAs or when you use Angular and MVC together.

This won't work, you can't prevent user from tampering the data, crafting custom request and doing whatever she wants at her side.
What you should do is to never trust upcoming data - which means validate every incoming id twice, once when you produce it and then when it comes back. Either it comes plain and you verify if it's legal or you encrypt it so when it comes back you decrypt it.
Some data can be stored at the server side, the id you mention is such example. This way user never sees the data, what you pass is the session id which is a long random value, rather impossible to craft. This approach comes with the cost of server side resources that are used, the more users the more resources at the server stored between requests.

form authorization for asp.net web api using javascript

I want to rewrite business application using asp.net web api as service layer and use javascript to call the web api and get data, display etc.
I understand all the scenrios work fine, but main bottleneck is security. We have database for the user name and password. We want that user enter user name and password, validate it using web api. Then for each request pass the user name and password to check rights etc. What is the best way to secure this communication if any.

You're best bet is going to be implementing HTTPS with SSL. You would consider using an encryption algorithm, but everything will be expose anyone if you're using JavaScript which would make encrypting and decrypting on the client quiet pointless.
Here's is a good blog post reference you can review on the matter http://goo.gl/QkZOf

Emailing from Javascript

I know this topic has been covered from all sorts of angles but I'm not sure I've seen the answer to my specific question.
I am writing a prototype web page in HTML5, CSS, and Javascript. I want the user to be able to browse to a file to attach then attach that file to an email I send to a specific email address I've setup. I don't want the user's default email program to pop up.
I have addresses to SMTP servers within my companies intranet but I don't have access to a server at the moment to put server-side code on. On the web page the user will know email is involved but I don't want them to have to do a thing other than select the file and click a button with no other screens popping up.
I know how to use mailto in order to send an email but I don't think you can use that with attachments.
Is there anyway to do this without having to mess with the server side? Is knowing an smtp server address that I have permissions on enough? Again, this is a prototype but possibly the basis for a new feature on a product.
Thanks!

Is there anyway to do this without having to mess with the server side?
Nope, not unless the target browser has exposes an SMTP client object. (And I don't think any do. That would make spam botnets quite a bit easier to build...)
You need to do this on the server.

Email cant be sent just by client side . You must either use a mailto link if you want it on client side but that's not best way . Instead you should send a request to server and do server side processing .If you have SMTP credential you can send email with server side.

I recently wrote a plugin for PostageApp that lets you send emails through jQuery. Basically, you just have to feed it your API key along with the message payload and you can send it through. With PostageApp, you can add your SMTP servers to the app and send through them.
Usage looks like this:
<script type="text/javascript" src="postage.js"></script>
<script type="text/javascript">
$(function() {
$('p').postage({
apiKey: "API KEY HERE",
recipients: "recipient#email.com",
template: "TEMPLATE_SLUG" });
});
</script>
I didn't publish the plugin because well... it never made sense for production usage because your API key was exposed and that's not a good thing. However, it is decent for prototyping (I use it!) and I would be happy to share.
(Full Disclosure: I am the Product Manager of PostageApp.)

How can I implement WCF/OData access as a "paid upgrade" to my ASP.NET site if I want to use AJAX with the same?

Suppose I'm entertaining a business model that offers free access to my propritary data if they visit my website. These users will have advertising subsidize the cost.
Then, for the paid users I want to offer direct raw WCF access to my data as an incentive. I don't want this available to the freebie users, but at the same time the site is using AJAX to render the page content.
The Problem
As it is today, AJAX and raw WCF access appear identical on-the-wire. I need to identify what is the source of the traffic is (webpage, or not), and protect my implementation from abuse.
Possible Solution?
It may be possible to grab a page variable (within ASP.net/Javascript) and use this as a validation key that is required for non-paid users. I can include this key with every AJAX request. If this is the best solution, how should I send it from the server to the client?
Regarding Authentication
Not sure if this matters, but all users (paid and non-paid) will be authenticated. A cookie will be stored on the client and will likely be generated by an STS.

Set a generic domain specific cookie for freebie users, this cookie is sent along any ajax request as well, so you can adjust response. No cookie, no response.