クロスサイトに対応する

環境

環境
Laravel7.x
HTTPS
AWS ALB, EC2

PHPでフレームワークはLaravel7.14を利用しています。
webサーバーはnginxです。(あまり関係ない)
下記に行った順で課題に対するコミットを記述していきます。

課題

クロスサイトのPOSTメソッドで指定したオリジンから取得したものをsessionに保存したい。
当プロジェクトでは、あるプラットフォームから取得できるuser_idのようなものを
sessionに保存したい、という課題でした。
しかしながら、解決策はフロントエンドとサーバーサイドでオリジンを分けている際にも対応可能の解決策でした。

①HTTPS化する

私が調査した中で、クロスサイトを有効にするには
通信を暗号化(常時ssl化)し、CookieのSecure属性をtrueにする
というのが最初の打開策でした。
まず、はじめにロードバランサーのエンドポイントにssl証明書を発行します。
30分ぐらいで証明書の発行ができます。
参考URLはこちら↓
https://recipe.kc-cloud.jp/archives/11084

さらに、常時HTTPS化するには(Laravel7.x)

src/app/Http/Middleware/TrustProxies.php

<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string|null
     */
    protected $proxies = '**';

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers = Request::HEADER_X_FORWARDED_ALL;
}

で、LBの終端でHTTPS化が可能となります。

CookieのSecure属性をtrueにする。

次に、Samesite=none; Secureにするために

.env

## .env

SESSION_SECURE_COOKIE=true

src/config/session.php

/*
〜〜〜〜〜〜〜
〜〜〜〜〜〜〜
*/
'same_site' => 'none',

とします。
これでchromeとfireboxでは課題を解決しましたが、
safariではSamesite=noneが実装されていないため
sessionを保存できず、、、、という感じでした。

②CORSの設定を編集

そして行き着いたのは、ヘッダーに許容するオリジンを追加するという手段です。
Laravel7.xにはデフォルトでsrc/config/cors.phpがあるので
下記のように編集します。

src/config/cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    // 許容するmiddlewareのグループを記載する。
    // 当プロジェクトでは * にしています。
    'paths' => ['*'],

    // 許容するメソッドを指定する
    'allowed_methods' => ['GET', 'POST'],

    // 許容するオリジンを指定する。
    // .envに記載してもいい
    // 'allowed_origins' => [env('REQUIRE_DMAIN', NULL)],
    'allowed_origins' => ['https://<ドメイン>'],

    'allowed_origins_patterns' => [],

    // 許容するヘッダーを記載する
    'allowed_headers' => ['X-CSRF-TOKEN', 'Content-Type', 'Origin', 'Authorization', 'Accept', 'X-Requested-With'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

上記のようにすることで、safariでもsessionを記載することができました。
Laravel7.x未満でもcors.phpはcomposerでインストールできますのでそちらを参照してください。

以上が私が行った解決策です。
allowed_origins にポート番号も記載すれば異なるポート番号からも許容できるようになります。
もっと良い方法があれば是非、コメントよろしくお願いします。