tích hợp ckeditor và ckfinder vào website laravel

2021-01-16 4878 lượt xem

Trương Thanh Hùng

Mục lục [ hide ]

thông thường bạn code php nếu muốn cài ckfinder cho web bạn có thể download trực tiếp từ website ckfinder đường link này rồi config $_SESSION để bảo mật và phân quyền.

Kết quả cuối cùng: Trong laravel bạn sử dụng composer downlaod về và sẽ có 1 ckfinder hoàn chỉnh như này:

Nói về cách tích hợp thông thường.

Với Ckfinder việc tích hợp thông thường sẽ là download về và bõ vào thư mục public của dự án như bài viết này: tích hợp ckeditor và ckfinder vào website php. Nhưng đó không phải là cách tích hợp đúng của ckfinder vào laravel. vì nó rất nguy hiểm cho hệ thống khi file tĩnh chứa code php của ckfinder. ví dụ như cfrs_token cũng là 1 trong những lỗi bảo mật.

Chúng ta nhìn sơ qua về trang chính thức của ckfinder có nói về việc download ckfinder trong laravel:

Cài đặt CKEditor

Đầu tiên bạn cài đặt ckeditor 4 như bình thường. Bản thân mình thấy khá không quen với ckeditor 5 nên mình thường chọn ckeditor 4. bạn có thể download về và giải nén bỏ vào folder public của dự án. download ckeditor 4 tại đây

Cài đặt CKFinder

Để cài ckfinder cho laravel mình khuyến nghị bạn sài composer. nếu chư có thì bạn download và cài đặt composer cho macos theo đường dẫn này : download và cài đặt composer cho macosx

nếu bạn dùng windows thì cứ download và cài đặt bình thường theo link này download và cài đặt composer.

Sau khi bạn đã có composer thì bạn cài đặt package CKFinder bằng 2 lệnh sau:

composer require ckfinder/ckfinder-laravel-package
php artisan ckfinder:download

Sau khi quá trình cài đặt và download hoàn tất chạy tiếp lệnh sau để xuất file css, js và file config vào public.

php artisan vendor:publish --tag=ckfinder-assets --tag=ckfinder-config

Cuối cùng tạo thư mục userfiles bên trong public của Laravel

mkdir -m 777 public/userfiles

Bảo mật Ckfinder hơn với Middleware

Chúng ta tạo Middleware bằng lệnh:

php artisan make:middleware ckFinderAuthentication

Sửa lại nội dung file App\Http\Middleware\ckFinderAuthentication như sau:

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Auth;
use Closure;

class ckFinderAuthentication
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (Auth::check()) {
            config(['ckfinder.authentication' => function() use ($request) {
                return true;
            }] );
        } else {
            config(['ckfinder.authentication' => function() use ($request) {
                return false;
            }] );
        }

        return $next($request);
    }
}

Hoặc nếu bạn không cần bảo mật thì dùng đoạn này:

 <?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Auth;
use Closure;

class ckFinderAuthentication
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        config(['ckfinder.authentication' => function() {
            return true;
        }]);
        return $next($request);
    }
}

Cơ chế bảo vệ CSRF trong laravel với CKFinder

CKFinder theo mặc định sử dụng cơ chế bảo vệ CSRF dựa trên cookie gửi hai lần. Trên một số cấu hình, có thể yêu cầu cấu hình Laravel không mã hóa cookie do CKFinder đặt.

Để làm điều đó, bạn thêm tên cookie ckCsrfToken vào mảng $except của middleware EncryptCookies:

// app/Http/Middleware/EncryptCookies.php

namespace App\Http\Middleware;

use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        'ckCsrfToken',
        // ...
    ];
}

Bạn cũng nên tắt cơ chế bảo vệ CSRF của Laravel cho đường dẫn của CKFinder bằng cách vào app/Http/Middleware/VerifyCsrfToken.php thêm dòng 'ckfinder/*'

// app/Http/Middleware/VerifyCsrfToken.php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        'ckfinder/*',
        // ...
    ];
}

Cấu hình CKFinder

Tiếp theo các bạn mở file /config/ckfinder.php và tìm đến dòng sau

$config['authentication'] = '\CKSource\CKFinderBridge\CKFinderMiddleware';

bạn đổi thành dòng sau:

$config['authentication'] = '\App\Http\Middleware\ckFinderAuthentication';

sửa đổi load router trong laravel

phần này cũng khác quan trọng để mình chủ động đường dẫn đến ckeditor.

# config/ckfinder.php
$config['loadRoutes'] = false;

Chỉnh sửa router web.php

bạn vào ckfinder trong folder vendor đã download có cái router kiểu đường dẫn vầy:

[LARAVEL]/vendor/ckfinder/ckfinder-laravel-package/src/routes.php

sau đó copy hết nội dung bõ vào router web.php

## /routes/web.php
Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
    ->name('ckfinder_connector');

Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
    ->name('ckfinder_browser');

//Route::any('/ckfinder/examples/{example?}', '\CKSource\CKFinderBridge\Controller\CKFinderController@examplesAction')
//    ->name('ckfinder_examples');

Chạy thử nghiệm thành quả

tạo file view như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <title>Chạy thử ckeditor blog trương thanh hùng </title>
</head>
<body>
    <textarea name="hungtt" id="text" cols="30" rows="10"></textarea>
    <script src={{ url('[path đến đường dẫn ckeditor]/ckeditor.js') }}></script>
    <script>
    CKEDITOR.replace( 'hungtt', {
        
        filebrowserBrowseUrl     : "{{ route('ckfinder_browser') }}",
        filebrowserImageBrowseUrl: "{{ route('ckfinder_browser') }}?type=Images&token=123",
        filebrowserFlashBrowseUrl: "{{ route('ckfinder_browser') }}?type=Flash&token=123", 
        filebrowserUploadUrl     : "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Files", 
        filebrowserImageUploadUrl: "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Images",
        filebrowserFlashUploadUrl: "{{ route('ckfinder_connector') }}?command=QuickUpload&type=Flash",
    } );
    </script>
    @include('ckfinder::setup')
</body>
</html>

và router thêm 1 route như sau:

Route::get('/test', function () {
    return view('test');
});

Cuối cùng bạn có thành quả :

Cuối cùng CKFinder 3 License

nếu bạn không muốn dùng bản demo bạn có thể lấy key ở đây:

CKFinder 3 License

chủ đề

laravel

2020-10-28

laravel là 1 trong những framework php được dùng p...

những tag

php developer

2020-10-26

php developer

bài viết trong chủ đề

Ebudezain

Bài này mình sẽ hướng dẫn tích hợp CKEditor và CKFinder cho Laravel. Lý do mình phải viết bài này là vì lý do cần bảo mật. Tại sao lại bảo mật bạn cùng xem bài viết nhé.

tích hợp ckeditor và ckfinder vào website laravel

Nói về cách tích hợp thông thường.

Cài đặt CKEditor

Cài đặt CKFinder

Bảo mật Ckfinder hơn với Middleware

Cơ chế bảo vệ CSRF trong laravel với CKFinder

Cấu hình CKFinder

sửa đổi load router trong laravel

Chỉnh sửa router web.php

Chạy thử nghiệm thành quả

Cuối cùng CKFinder 3 License

2020-10-28

2020-10-26

2021-01-02

2021-07-06

2020-11-06

2021-01-04

2021-01-17

2020-11-20

2021-02-09

2022-02-14

2020-11-06

2020-11-06

2021-07-11

2021-03-02

2021-06-28

2021-07-12

2022-01-23

2022-04-24

2021-04-01

2022-01-27

2022-03-12

2022-03-03

2020-12-22

2021-01-02

2021-08-23

2021-03-01

2020-09-30

2020-12-17

2021-07-20

Ebudezain blog - chia sẽ kiến thức lập trình

0674, Xã Bình Giã,Huyện Châu Đức Tỉnh Bà Rịa - Vũng Tàu,Việt Nam