もちろんバックエンドとのやり取りはCORS対策を行っていますよね？？？

皆さんバックエンドとのやり取りでCORS対策は行っていますか？

今回はLaravelでCORS対策を行うやり方を書いていこうかなと思います。

既にLaravelに触れたことのある方はconfig\cors.phpを見たことがあるかと思います。

config/cors.php

<?php
return [
    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,
];

実際はこんな感じに書いてあります。

ただ、これ注目し欲しいのがallowed_originsです。

この中身を*（アスタリスク）にしてしまうと、全てのドメインから通信を行うことができてしまいます。

便利かもしれませんが、本番環境でどのドメインからも通信を行うことができたら個人情報だだもれですね。

じゃあ対策をしてあげましょう！

ミドルウェアの作成#

以下のコマンドを入力してミドルウェアを作成します。名前は適当に変えて下さい。今回はAPI通信用のCORS対策を行うのでApiCorsとしています。

php artisan make:middleware ApiCors

そしたらapp\Http\Middleware\ApiCors(自分で決めた名前)を開いてください。

Middleware\ApiCors.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ApiCors
{
    public function handle(Request $request, Closure $next)
    {
        if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
            return $next($request)
                ->header('Access-Control-Allow-Origin', config('cors.allowed_origins'))
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers', ['X-Requested-With', 'Content-Type', 'Origin', 'Cache-Control', 'Authorization', 'Accept', 'Accept-Encoding'])
                ->header('Access-Control-Allow-Credentials', true);
        } else {
            return $next($request)
                ->header('Access-Control-Allow-Origin', config('cors.allowed_origins'))
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers', ['X-Requested-With', 'Content-Type', 'Origin', 'Cache-Control', 'Authorization', 'Accept', 'Accept-Encoding']);
        }
    }
}

Access-Control-Allow-Originで通信を行うドメインを入力します。

config('cors.allowed_origins')としているのは、環境変数としてローカルで開発をしている時と本番環境用に分けるためです。

なんたって本番環境用にローカルホストのドメイン入力したら一発アウト。

Karnel.php#

次にMiddleware\Kernel.phpに今作成したミドルウェアを登録します。

Middleware\Karnel.php

    protected $routeMiddleware = [
        'apicors' => \App\Http\Middleware\ApiCors::class,
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];

'apicors' => \App\Http\Middleware\ApiCors::classのようにします。

apicorsの部分はお好きな名前で。

CORS対策の適用#

routes\api.phpにCORS対策のミドルウェアを適用させます。

routes\api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ApisController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('apicors')->group(function() {
  Route::apiResource('/apis', ApisController::class);
});

こんな感じでCORS対策を行うことができます！

これでもまだセキュリティ対策は甘い方だと思います。

まぁでも一歩前進ということで。

以上、「もちろんバックエンドとのやり取りはCORS対策を行っていますよね？？？」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

あと、最近「ココナラ」で環境構築のお手伝いをするサービスを始めました。

気になる方はぜひ一度ご相談ください！

Thank you for reading