Simple CSRFSimple CSRF
Simple CSRF plugin that automatically adds to each form on a page input with csrf token.
Simple CSRF
Simple CSRF plugin that automatically adds to each form on a page input with csrf token.
Screenshots
Overview
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 the plugin to my website?
See Instructions block
Documentation
Documentation is provided with download file
I have questions
Feel free to contact me: [email protected]. (Simple CSRF in the email subject)
Features
- Lightweight (~2.5 KB)
- 5 min to install
- No jQuery dependent
- Supports all latest versions of browser including IE11 and above
Requirements
Setup backend server to provide CSRF token
Instructions
To install and use SimpleCSRF you need to add simple-csrf.js to your html page:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your awesome project</title>
<!-- Your generated token below: -->
<meta name="_csrf" content="715cadfc84f3592683c75b74c7ba6950" />
<script src="//path/to/scrpits/simple-csrf.js"></script>
</head>
<body>
<form id="form_to_protect" method="POST" action="/send_request">
<input name="first_name" value="John" placeholder="Enter first name" />
<input name="last_name" value="Doe" placeholder="Enter last name" />
<button type="Submit">Submit</button>
</form>
</body>
Then, you need configure plugin:
const csrf = new SimpleCSRF({
fromMeta: '_csrd',
name: '_csrf-token'
});
// To add CSRF protection to a form, you need to specify which form you want to protect
// with DOM element
csrf.addToForm(document.forms.form_to_protect);
// or with form id
csrf.addToForm('form_to_protect');
// or if you want to add CSRF protection to all forms on the page, you can use:
csrf.addToAllForms();
That's it! After opening this page your form will look like this:
<form id="form_to_protect" method="POST" action="/send_request">
<input name="first_name" value="John" placeholder="Enter first name" />
<input name="last_name" value="Doe" placeholder="Enter last name" />
<button type="Submit">Submit</button>
<input id="form_to_protect__csrf" name="_csrf-token" value="715cadfc84f3592683c75b74c7ba6950" />
</form>
And token will be sent with form data when user clicks submit. Profit :)
| Category | Scripts & Code / JavaScript / Forms |
| First release | 25 June 2020 |
| Last update | 26 June 2020 |
| Files included | .html, Javascript .js |
| Tags | jquery, Javascript, Security, js, forms, protection, csrf |
