CSRF 令牌未激活

Posted 2023-02-22

【中文标题】CSRF 令牌未激活

【英文标题】：CSRF Token not active

【发布时间】：2020-03-12 07:43:16

【问题描述】：

我正在尝试制作一个 VueJs 表单以包含在 php.blade 文件中，用户评论和评分在 0 到 5 星之间。我的问题是用户可以进行 CSRF 攻击，但我的表单中有一个 CSRF 令牌。

我从 vue 中的刀片中检索它。我把它放在我的表格中，但似乎这个令牌有任何效果。

这是我的组件：

<template>
<form v-bind:action=this.route @submit.prevent="submit" method="POST" class="comment-form inline-items">
    <input type="hidden" name="_token" v-bind:value="this.csrf">
    <a class="h6 post__author-name fn"> this.user[0]['firstname']   this.user[0]['lastname'] </a>
    <div class="post__author author vcard inline-items">
        <img >
        <div class="form-group with-icon-right ">
            <textarea name="content" v-model="content" class="form-control" placeholder=""></textarea>
            <star-rating v-model="rating" v-bind:star-size="25"></star-rating>
        </div>
    </div>
    <button type="submit" class="btn btn-md-2 btn-primary">Poster</button>
    <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color">Annuler</button>
</form
</template>

  <script>
import StarRating from 'vue-star-rating';
import axios from 'axios';
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) 
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
 else 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');


export default 
    components: 
        StarRating
    ,
    props: ['csrf', 'user'],
    data() 
        return 
            'userid': this.user,
            'content': '',
            'rating': 0,
            'route': window.location.pathname,
        
    ,
    mounted() 
        console.log('test.')
    ,
    methods: 
        submit:function() 
            axios.post(this.route, 
                content: this.content,
                rating: this.rating,
                route: this.route,
            ).then(function (response) 
                console.log(response)
            )
        ,
    ,

我的 app.js：

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('commentarypost-component', require('./components/CommentarypostComponent.vue').default);
Vue.component('commentary-component', require('./components/CommentaryComponent.vue').default);

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue').default
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue').default
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue').default
);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue(
    el: '#app',
);

我的刀片：

<div class="container">
    <div class="col col-xl-12 col-12">
        <h2 class="presentation-margin">Poster un commentaire</h2>
    </div>
    <div class="row">
        <div class="col col-lg-6 col-md-12 col-sm-12 col-12">
            <div id="app" class="ui-block">
                <commentarypost-component csrf="csrf_token()" :user=" $user "/>
            </div>
        </div>
    </div>
</div>

我的 bootstrap.js ：

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try 
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
 catch (e) 

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) 
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
 else 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');


/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo(
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// );

这是输出：

Vuejs outputs

html meta

Form output

【参考方案1】：

您不需要包含 'csrf' 作为道具。在 bootstrap.js 中，对于 Axios，csrf 得到了照顾。

只需添加您的<head>：

<head>
   <meta name="csrf-token" content=" csrf_token() ">
</head>

同样在您的组件中，您不需要这部分，因为 bootstrap.js 包含在您的 app.js 中：

import axios from 'axios';
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) 
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
 else 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

【讨论】：

您好，谢谢您的回答，我已经有了meta。它位于我在刀片中扩展的布局中（称为“HTML 元”的屏幕）

你是否也从你的组件中删除了我提到的块？

是的，我删除了它。