CSRF in plugin dashboard widget 400 error

Question

Yes, it's another csrf question, the standard, 400 Error - Bad Request: Unable to verify your data submission.

If in config/general.php I set 'enableCsrfProtection' => false, then everything works nicely. So it's definitely a csrf problem.

Here's the twig template for the widget:

src/templates/_components/widgets/Livestream_body.twig
---------------------
<script type="text/javascript">
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
</script>

and the Javascript:

src/assetbundles/livestreamwidget/dist/js/Livestream.js
-------------------
$(document).ready(function () {
   var data = [];
   data[window.csrfTokenName] = window.csrfTokenValue;
   $.post('actions/livestream/main/manage-get', data, function(response, textStatus, jqXHR) {
       alert('Posted OK!'); 
   });
});

I can see the csrf token value changes on page load, and as I said, without csrf enabled, the js successfully loads the widget, so, what am I doing wrong on the csrf? I don't have any element. Would that make a difference?

Answer 1

as jQuery docs says you have to pass data object or string via data. so you should change

var data = [];

to

 var data = {};

in your code