tutorial security

Security

Do not forget to use HTTPS always, this prevents most security issues.

Token + cookie security

Cookies (or other mechanisms like challenges) prevents XSS attacks. Do not forget in the server to set the Secure attribute (only HTTPS), SameSite=Strict property, (cookie is stripped if the request is to another site) and HttpOnly flag (JS cannot read cookie from responses).

Cookies are sessions, and also CSRF vulnerable if not properly set. Authorization tokens (eg: JWT) are a way to have stateless state. They usually compound on an access token (stored in the client), and another refresh token. Do not store both tokens in the same place. Otherwise, any XSS will be able to create new tokens.

Therefore, the Authorization or access token located in the client storage is vulnerable to XSS (a malicious JS code can steal the token). So any secure service call should check both the session and the token. In this case, the cookie is not accesible to the attacker so the damage is limited.

Fast way of authentication & authorization

This method is useful for development, but for production apps you should use a more robust solution (for production, forbid accessing the headers and cookies with javascript, then the third parties plugins can be used safely).

// after calling the login process (i.e: by using a form POST)
fetch('login.html')
 .then(res => ir.security().setAuthenticated(res.headers.get("Authorization")))
 .catch(err => console.error(err))

Built-in refresh token in ajax() call

The ajax() function adds automatically Authorization token to the REST calls. If token not found or expired, the function will try automatically to refresh the new token and perform the original call. The server must provide 401 and header Location with the refresh page.

Prevent XSS attacks

Do not trust on data in the client, it can be easily modified by rogue code. Put 99% of data validation/sanitizing/escaping in the server code, before storing content in the database, and before sending data to users.

By default, the library do not allow to inject javascript or HTML tags, so your app is secure without worrying on securing the content. The creation of HTML code is already done in the templates, and the insertion of content is done by using innerText.

If you really want to generate HTML for content, first use a proper js library for sanitizing text, then use a function or pipe to process the content.

<div data-model="user-data">{{toHTML(this, data)}}</div>
<script>
 ir.controller('user-data').toHTML = function(el,text) {
   el.innerHTML= text.replace('#@$','<')
 }
</script>