diff mbox series

[2/3] static: add JS Cookie library to get csrftoken for client-side requests

Message ID 20210817003225.2813222-3-raxel@google.com
State Superseded
Headers show
Series rest: add rest.js to handle PATCH requests & respective responses | expand
Related show

Commit Message

Raxel Gutierrez Aug. 17, 2021, 12:32 a.m. UTC
Currently in Patchwork, requests are made only through older methods via
form submissions, which means the UI is rendered strictly server-side.
This lags behind more modern and versatile approaches that use
JavaScript to send requests and dynamically update the UI based on the
respective responses.

In order to make REST API requests on the client-side secure from CSRF
attacks, add the JS Cookie library which allows the CSRF token to be
passed in the request header. A following patch that introduces the
`rest.js` module will make use of the JS Cookie library in this patch.

The library is a recommendation from Django docs [1]. The files for the
library can be downloaded in the releases page of the GitHub [2].

[1] https://docs.djangoproject.com/en/3.2/ref/csrf/#ajax
[2] https://github.com/js-cookie/js-cookie/releases

Signed-off-by: Raxel Gutierrez <raxel@google.com>
---
 htdocs/README.rst          | 9 +++++++++
 htdocs/js/js.cookie.min.js | 2 ++
 templates/base.html        | 1 +
 3 files changed, 12 insertions(+)
 create mode 100644 htdocs/js/js.cookie.min.js

Comments

Daniel Axtens Aug. 17, 2021, 2:13 a.m. UTC | #1
Raxel Gutierrez <raxel@google.com> writes:

> Currently in Patchwork, requests are made only through older methods via
> form submissions, which means the UI is rendered strictly server-side.
> This lags behind more modern and versatile approaches that use
> JavaScript to send requests and dynamically update the UI based on the
> respective responses.
>
> In order to make REST API requests on the client-side secure from CSRF
> attacks, add the JS Cookie library which allows the CSRF token to be
> passed in the request header. A following patch that introduces the
> `rest.js` module will make use of the JS Cookie library in this patch.
>
> The library is a recommendation from Django docs [1]. The files for the
> library can be downloaded in the releases page of the GitHub [2].
>
> [1] https://docs.djangoproject.com/en/3.2/ref/csrf/#ajax
> [2] https://github.com/js-cookie/js-cookie/releases
>
> Signed-off-by: Raxel Gutierrez <raxel@google.com>

Reviewed-by: Daniel Axtens <dja@axtens.net>

I will merge this once we get the bugs fixed in the REST js.

Something somewhere in the pipeline is corrupting the JS file so I will
replace the js.cookie.min.js with the contents of the v3.0.0 release
from the github repo when I merge it - thank you for the link.

Kind regards,
Daniel

> ---
>  htdocs/README.rst          | 9 +++++++++
>  htdocs/js/js.cookie.min.js | 2 ++
>  templates/base.html        | 1 +
>  3 files changed, 12 insertions(+)
>  create mode 100644 htdocs/js/js.cookie.min.js
>
> diff --git a/htdocs/README.rst b/htdocs/README.rst
> index 62f15c23..128dc7c2 100644
> --- a/htdocs/README.rst
> +++ b/htdocs/README.rst
> @@ -122,6 +122,15 @@ js
>    :GitHub: jQuery plug-in to drag and drop rows in HTML tables
>    :Version: ???
>  
> +``js.cookie.min.js``
> +
> +  Library used to handle cookies.
> +
> +  This is used to get the ``csrftoken`` cookie for AJAX requests in JavaScript.
> +
> +  :GitHub: https://github.com/js-cookie/js-cookie/
> +  :Version: 3.0.0
> +
>  ``selectize.min.js``
>  
>    Selectize is the hybrid of a ``textbox`` and ``<select>`` box. It's jQuery
> diff --git a/htdocs/js/js.cookie.min.js b/htdocs/js/js.cookie.min.js
> new file mode 100644
> index 00000000..63fc3ef9
> --- /dev/null
> +++ b/htdocs/js/js.cookie.min.js
> @@ -0,0 +1,2 @@
> +/*! js-cookie v3.0.0 | MIT */
> +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,r=e.Cookies=t();r.noConflict=function(){return e.Cookies=n,r}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var t={read:function(e){return e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};return function n(r,o){function i(t,n,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape),n=r.write(n,t);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.c
 oo
>  kie=t+"="+n+c}}return Object.create({set:i,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var n=document.cookie?document.cookie.split("; "):[],o={},i=0;i<n.length;i++){var c=n[i].split("="),u=c.slice(1).join("=");'"'===u[0]&&(u=u.slice(1,-1));try{var f=t.read(c[0]);if(o[f]=r.read(u,f),e===f)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){i(t,"",e({},n,{expires:-1}))},withAttributes:function(t){return n(this.converter,e({},this.attributes,t))},withConverter:function(t){return n(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(r)}})}(t,{path:"/"})}));
> diff --git a/templates/base.html b/templates/base.html
> index a9d0906b..5d4349dd 100644
> --- a/templates/base.html
> +++ b/templates/base.html
> @@ -21,6 +21,7 @@
>    <script src="{% static "js/bootstrap.min.js" %}"></script>
>    <script src="{% static "js/selectize.min.js" %}"></script>
>    <script src="{% static "js/clipboard.min.js" %}"></script>
> +  <script src="{% static "js/js.cookie.min.js" %}"></script>
>    <script>
>     $(document).ready(function() {
>         new Clipboard(document.querySelectorAll('button.btn-copy'));
> -- 
> 2.33.0.rc1.237.g0d66db33f3-goog
>
> _______________________________________________
> Patchwork mailing list
> Patchwork@lists.ozlabs.org
> https://lists.ozlabs.org/listinfo/patchwork
diff mbox series

Patch

diff --git a/htdocs/README.rst b/htdocs/README.rst
index 62f15c23..128dc7c2 100644
--- a/htdocs/README.rst
+++ b/htdocs/README.rst
@@ -122,6 +122,15 @@  js
   :GitHub: jQuery plug-in to drag and drop rows in HTML tables
   :Version: ???
 
+``js.cookie.min.js``
+
+  Library used to handle cookies.
+
+  This is used to get the ``csrftoken`` cookie for AJAX requests in JavaScript.
+
+  :GitHub: https://github.com/js-cookie/js-cookie/
+  :Version: 3.0.0
+
 ``selectize.min.js``
 
   Selectize is the hybrid of a ``textbox`` and ``<select>`` box. It's jQuery
diff --git a/htdocs/js/js.cookie.min.js b/htdocs/js/js.cookie.min.js
new file mode 100644
index 00000000..63fc3ef9
--- /dev/null
+++ b/htdocs/js/js.cookie.min.js
@@ -0,0 +1,2 @@ 
+/*! js-cookie v3.0.0 | MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,r=e.Cookies=t();r.noConflict=function(){return e.Cookies=n,r}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var t={read:function(e){return e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};return function n(r,o){function i(t,n,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape),n=r.write(n,t);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.coo
 kie=t+"="+n+c}}return Object.create({set:i,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var n=document.cookie?document.cookie.split("; "):[],o={},i=0;i<n.length;i++){var c=n[i].split("="),u=c.slice(1).join("=");'"'===u[0]&&(u=u.slice(1,-1));try{var f=t.read(c[0]);if(o[f]=r.read(u,f),e===f)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){i(t,"",e({},n,{expires:-1}))},withAttributes:function(t){return n(this.converter,e({},this.attributes,t))},withConverter:function(t){return n(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(r)}})}(t,{path:"/"})}));
diff --git a/templates/base.html b/templates/base.html
index a9d0906b..5d4349dd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,6 +21,7 @@ 
   <script src="{% static "js/bootstrap.min.js" %}"></script>
   <script src="{% static "js/selectize.min.js" %}"></script>
   <script src="{% static "js/clipboard.min.js" %}"></script>
+  <script src="{% static "js/js.cookie.min.js" %}"></script>
   <script>
    $(document).ready(function() {
        new Clipboard(document.querySelectorAll('button.btn-copy'));