Simple CSRF

Simple CSRF

Simple CSRF plugin that automatically adds to each form on a page input with csrf token.

What is CSRF?

https://en.wikipedia.org/wiki/Cross-site_request_forgery

Why I need protection?

CSRF is a type of attack when hackers send maleficent requests to your website (in other words: do bad things). To prevent these attacks you need to "sign" each request with token, that will be checked on the website's server.

Ok, I got it. What to do next?

First of all you need to prepare your website server to generate and check token. When it will be done you can add CSRF protection to webpage, using this plugin.

Done. How to add plugin to website?

To do this just add simple-csrf.js to your html page:

<span class="pl-kos"><</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span>="<span class="pl-s">en</span>"<span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">head</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">UTF-8</span>"<span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Your awesome project<span class="pl-kos"><!--</span--><span class="pl-ent">title</span><span class="pl-kos">></span>
    <span class="pl-c"><!-- Your generated token below: --></span>
    <span class="pl-kos"><</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span>="<span class="pl-s">_csrf</span>" <span class="pl-c1">content</span>="<span class="pl-s">715cadfc84f3592683c75b74c7ba6950</span>" />
    <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">//path/to/scrpits/simple-csrf.js</span>"<span class="pl-kos">></span><span class="pl-kos"><!--</span--><span class="pl-ent">script</span><span class="pl-kos">></span>
<span class="pl-kos"><!--</span--><span class="pl-ent">head</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">body</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">form</span> <span class="pl-c1">id</span>="<span class="pl-s">form_to_protect</span>" <span class="pl-c1">method</span>="<span class="pl-s">POST</span>" <span class="pl-c1">action</span>="<span class="pl-s">/send_request</span>"<span class="pl-kos">></span>
        <span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">name</span>="<span class="pl-s">first_name</span>" <span class="pl-c1">value</span>="<span class="pl-s">John</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter first name</span>" />
        <span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">name</span>="<span class="pl-s">last_name</span>" <span class="pl-c1">value</span>="<span class="pl-s">Doe</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter last name</span>" />
        <span class="pl-kos"><</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">Submit</span>"<span class="pl-kos">></span>Submit<span class="pl-kos"><!--</span--><span class="pl-ent">button</span><span class="pl-kos">></span>
    <span class="pl-kos"><!--</span--><span class="pl-ent">form</span><span class="pl-kos">></span>
<span class="pl-kos"><!--</span--><span class="pl-ent">body</span><span class="pl-kos">></span></span></span></span></span></span></span>

Then, you need configure plugin:

<span class="pl-k">const</span> <span class="pl-s1">csrf</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">SimpleCSRF</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">fromMeta</span>: <span class="pl-s">'_csrd'</span><span class="pl-kos">,</span>
  <span class="pl-c1">name</span>: <span class="pl-s">'_csrf-token'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// To add CSRF protection to a form, you need to specify which form you want to protect</span>
<span class="pl-c">// with DOM element</span>
<span class="pl-s1">csrf</span><span class="pl-kos">.</span><span class="pl-en">addToForm</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">forms</span><span class="pl-kos">.</span><span class="pl-c1">form_to_protect</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// or with form id</span>
<span class="pl-s1">csrf</span><span class="pl-kos">.</span><span class="pl-en">addToForm</span><span class="pl-kos">(</span><span class="pl-s">'form_to_protect'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// or if you want to add CSRF protection to all forms on the page, you can use:</span>
<span class="pl-s1">csrf</span><span class="pl-kos">.</span><span class="pl-en">addToAllForms</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

That's it! After opening this page your form will look like this:

<span class="pl-kos"><</span><span class="pl-ent">form</span> <span class="pl-c1">id</span>="<span class="pl-s">form_to_protect</span>" <span class="pl-c1">method</span>="<span class="pl-s">POST</span>" <span class="pl-c1">action</span>="<span class="pl-s">/send_request</span>"<span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">name</span>="<span class="pl-s">first_name</span>" <span class="pl-c1">value</span>="<span class="pl-s">John</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter first name</span>" />
    <span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">name</span>="<span class="pl-s">last_name</span>" <span class="pl-c1">value</span>="<span class="pl-s">Doe</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter last name</span>" />
    <span class="pl-kos"><</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">Submit</span>"<span class="pl-kos">></span>Submit<span class="pl-kos"><!--</span--><span class="pl-ent">button</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">input</span> <span class="pl-c1">id</span>="<span class="pl-s">form_to_protect__csrf</span>" <span class="pl-c1">name</span>="<span class="pl-s">_csrf-token</span>" <span class="pl-c1">value</span>="<span class="pl-s">715cadfc84f3592683c75b74c7ba6950</span>" />
<span class="pl-kos"><!--</span--><span class="pl-ent">form</span><span class="pl-kos">></span></span></span>

And token will be sent with form data when user clicks submit. Profit :)

Documentation

Configuration for SimpleCSRF looks like:

• fromMeta: string - put name of meta tag where CSRF token is stored. See example above
• token: string - put CSRF token here if it's not stored in meta. For example:

<span class="pl-k">new</span> <span class="pl-v">SimpleCSRF</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">token</span>: <span class="pl-s">"715cadfc84f3592683c75b74c7ba6950"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

• name: string - name of hidden input. See example above
• methods: string[] - list of methods to use CSRF. ["POST"] by default. If you need to add CSRF protection only for POST and PUT methods you need to set methods:

<span class="pl-k">new</span> <span class="pl-v">SimpleCSRF</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">methods</span>: <span class="pl-kos">[</span><span class="pl-s">'POST'</span><span class="pl-kos">,</span> <span class="pl-s">'PUT'</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

• generateInputId: function(form) -> string - function to generate input id. By default it generates id like:
  {{form.id}}__csrf. See example above

SimpleCSRF object has methods:

• addToForm(formDOMOrId: string|Node) - Adds CSRF token input to specified form. formDOMOrId - form DOM element or form id.
• addToAllForms() - Adds CSRF token inputs to all forms on a page
• updateToken(token: string) - updates token value in all inputs

I have questions

Feel free to contact me: artyomshaitor@gmail.com. (Simple CSRF in the email subject)