Help us understand the problem. What is going on with this article?

クロスサイトに対応する

環境

環境
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

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にポート番号も記載すれば異なるポート番号からも許容できるようになります。
もっと良い方法があれば是非、コメントよろしくお願いします。

maaaaakoto35
大学にて、情報系の学部を専攻しております。 自作の開発にて気づいたことや思ったこと、 また調べてもあまりヒットせず、解決に時間かかったものを備忘録として記録していきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした