Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@maaaaakoto35

クロスサイトに対応する

環境

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

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
5
Help us understand the problem. What are the problem?