概要

現在ローカル環境で作成している投稿型webアプリケーションでTwitterのシェア機能を実装しようと思って、以下のQiita記事を参考に実装していました。
[HowTo]Twitterへのリンクシェア機能をお手軽に実装する！

とても簡単そうだったのですが、何故かページが表示されなくなってしまいました。

原因

google consoleを開いてissueを確認すると以下のメッセージがきておりました。

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.

読めないので翻訳

SameSite属性を指定して、クロスサイトリクエストでCookieを送信するかどうかを示します。CookieのSameSite属性が設定されていないか無効であるため、デフォルトでSameSite = Laxに設定され、クロスサイトリクエストでCookieが送信されなくなります。この動作により、ユーザーデータが誤ってサードパーティに漏洩したり、クロスサイトリクエストフォージェリが発生したりするのを防ぎます。 Cookieの属性を更新して、この問題を解決します。クロスサイトリクエストでCookieを送信する必要がある場合は、SameSite = NoneおよびSecureを指定します。これにより、サードパーティによる使用が可能になります。クロスサイトリクエストでCookieを送信しない場合は、SameSite = StrictまたはSameSite = Laxを指定します。

SameSiteがわからなかったのでググってみると、
cookie設定の属性でCSRFへのセキュアレベルの設定ができるようになるみたいです。
設定値はStrict,Lax,Noneで、StrictとLaxを指定するとCSRFをブラウザレベルで防げるようになります。

そんなん設定してたっけ？とさらにググっていくとLaravel8.12では初期設定されていたみたいです。

config/session.phpを開いてみると

config/sessiton.php

<?php

use Illuminate\Support\Str;

return [
    /*
    |--------------------------------------------------------------------------
    | Same-Site Cookies
    |--------------------------------------------------------------------------
    |
    | This option determines how your cookies behave when cross-site requests
    | take place, and can be used to mitigate CSRF attacks. By default, we
    | will set this value to "lax" since this is a secure default value.
    |
    | Supported: "lax", "strict", "none", null
    |
    */

    'same_site' => 'lax',

];

laxになっていました。

Noneに変更する場合は、secure属性を有効にする必要があるみたいですが、ローカル環境なのでhttps化をしておりません。

つまりサーバにアップしてから実装しろってことなんだと思います。

まとめ

サーバに公開してから実装することにします！

参考文献

Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた
LaravelでCookieのSameSite属性を設定する

本記事は、TechpitがQiitaで投稿している環境構築記事のまとめです。

今後も適時更新していきます(最終更新日：2021/2/26)

「〇〇の環境構築も掲載してほしい！」
「〇〇のエラーが解決できない」
等ありましたら、ぜひコメントしてください。

記事一覧表

Ruby on Rails

0から Ruby on Rails の環境構築【macOS】 (Homebrew のインストールから Rails のインストールまで)

0からRuby on Railsの環境構築【Cloud9】(Rubyのバージョン変更からRailsのインストールまで)

Laravel

【最新版】はじめてのLaravel！Laradockを用いたLaravel開発環境構築

React

React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~

React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~

Docker

?【すぐ開発を始めたい人向け】DockerをMacにインストールする手順?

?WindowsでDockerを始める手順?

?Docker Toolboxのインストール?

今後もプログラミング学習に役立つような情報を発信していきます！アカウントをフォローしてお待ちください！

初めに

タイトルの通りのことをソースコードを眺めているときに思ったのでそれについて調べたことをまとめた備忘録です。

Laravelにより提供されているIlluminate配下のソースコードを眺めているときになんだこれ？って思ったのがきっかけです。

以下、なんだこれ？って思った処理のあるソースコード。

Illuminate/Auth/AuthManager.php

protected function resolve($name)
{
    $config = $this->getConfig($name);

    // ～～中略～～

    $driverMethod = 'create'.ucfirst($config['driver']).'Driver';

    if (method_exists($this, $driverMethod)) {
        return $this->{$driverMethod}($name, $config);  // ★
    }

    // ～～後略～～
}

★のところに注目してください。この部分の$this->{$driverMethod}($name, $config)がなにをしているのかが疑問だったのでその疑問を解決すべく調べてみました。

この表記はどうやら可変関数というらしい

PHP は可変関数(variable functions)の概念をサポートします。 これにより、変数名の後に括弧が付いている場合、その値が何であろうと PHPは、同名の関数を探し実行を試みます。 この機能は、コールバック、関数テーブル等を実装するために使用可能です。
引用：PHP: 可変関数 - Manual

例えば、

function foo()
{
    echo "Foooooo in foo()";
}

$method = "foo";

のようにfoo()と、関数名と同じ名前の文字列を持つ$method変数があったとします。

このとき$method()のように、$methodの後ろに丸括弧を付けてみましょう。

するとPHPが自動で$methodの文字列と同名の関数を探し出して実行してくれます。これが可変関数という概念らしいです。

$method(); // "Foooooo in foo()"が出力される

それを踏まえてさっきのやつを見直してみる

以上で記事の主題は解決しました。ですが、せっかくなので先ほどのIlluminate/Auth/AuthManager.phpがなにをやっているのかを追えるとこまで追っていきましょう。

以下、再掲です。

Illuminate/Auth/AuthManager.php

protected function resolve($name)
{
    $config = $this->getConfig($name);

    // ～～中略～～

    $driverMethod = 'create'.ucfirst($config['driver']).'Driver';  // 1. 

    if (method_exists($this, $driverMethod)) {  // 2.
        return $this->{$driverMethod}($name, $config);  // 3.
    }

    // ～～後略～～
}

このメソッドが呼び出される状況を、

• $nameには"web"という文字列
• $configにはgetConfig($name)メソッドによって ['driver' => 'session', 'provider' =>'users']という連想配列

がそれぞれ代入される、というように仮定します。

それを踏まえて番号のついた行を詳しく見てみましょう。

1. の処理

$driverMethod = 'create'.ucfirst($config['driver']).'Driver';  // 1. 

ucfirst()という関数はPHP組み込みの関数で、引数がアルファベットの文字列なら頭文字を大文字に変換して返すという処理をしてくれます。

なので、$config['driver']が"session"であることを踏まえると、$driverMethodには'createSessionDriver'という文字列が代入されます。

2.の処理

if (method_exists($this, $driverMethod)) {  // 2.

こちらも1. と同様にmethod_exists()というPHP組み込みの関数が使われています。

これは第1引数に指定したクラスオブジェクトに、第2引数で指定した名前のメソッドが定義されているかを真偽値で返してくれる関数になります。

それを踏まえると2. の処理はAuthManagerクラスにcreateSessionDriverという名前のメソッドが存在するか、という条件分岐を行っている処理だということが分かりました。

3.の処理

return $this->{$driverMethod}($name, $config);  // 3.

3.の処理において先ほど説明した可変関数の概念が使われています。

いままで説明してきたことを踏まえると、この処理は$this->createSessionDriver($name, $config);であるということが明らかとなりました。

以下、本題からそれるので簡単な説明になりますが、このcreateSessionDriver()によってLaravelではセッションによる認証機能の提供が行われることになります。

よく見かける、

Auth::user();

といったAuthファサードによるユーザー情報の取得処理にも、このcreateSessionDriver()から提供されている認証機能が使われています。

終わりに

Laravelのファサードの実体を追っている中で疑問に思ったことをまとめてみました。

次回はファサードの実体がどこにあるかを追ってみて、その調査結果をまとめてみたいと思います。

お疲れ様です。TaYです

PHPでのポートフォリオ制作・外部公開が終わり、これからの課題が見えてきました。

現時点での課題

• オブジェクト指向に基づいたコーディングができていない
• MVCモデルについての理解・経験がない
• フレームワークを触った経験がない

これらを解決するべくLaravelの学習を始ました。

使用する書籍はこちら

評価が高かったため、こちらを選びました。

すこし読んでみて、自分なりにLaravelについて分かったことを備忘録として残しておきます。

フレームワークとは
・機能提供だけでなく『仕組み』も提供する
（ライブラリは、あくまでも「機能提供」→どう使うかはプログラマ次第）
・プログラマは仕組みに従って、「呼び出されて動くプログラム」の部分を作成すれば良い
・セキュリティ、メンテナンス性、拡張性を兼ね備えてる

Laravelの特徴
・MVCに準拠している
・堅牢なシステムであるSymfonyが土台
・Composerにより、プログラム管理が容易
・ORM（Object-Relational Mapping)によりデータベースをオブジェクトのように扱える
・Bladeテンプレートエンジンで複雑なデザインも簡潔に記述できる
・コードがわかりやすく、学習コストが低い

今回はここら辺で

前回、HTTPSやRedisを導入し、段々オールインワンっぽくなって来た。
【コピペ】Docker ComposeでLaravel開発環境を構築その伍

更にオールインワン化を目指しつつ、そろそろPHP8を使いたいし、Xdebug3にしたい。
ついでに、MySQLのレプリケーションも欲しくなったので修正する。

マシンスペック

• Mac mini 2018
• macOS Catalina（10.15.x）
• Intel Core-i7 3.2GHz 6コア
• メモリ 32GB
• SSD 512GB

Docker環境

• Nginx 最新版
• PHP（PHP-FPM） 8.x
• Xdebug 3.x
• MySQL 8.x
• Composer 2.x
• Laravel 8.x
• Redis 最新版
• MailHog 最新版
• phpMyAdmin 最新版
• MongoDB 最新版
• mongo-express 最新版
• Redmon 最新版

やること

• PHP8が欲しい
• XDebug3が欲しい
• レプリケーションが欲しい
• オールインワンを目指す

補足

各環境を行ったり来たりするので、下記のように記載します。

[Mac]$ MacのターミナルでMac内の作業
[PHP]$ MacのターミナルからPHPコンテナに接続して作業
[SQL]# MacのターミナルからMySQLコンテナに接続して作業

追加・変更あれこれ

PHP 8.x

https://github.com/bobtabo/docker4/blob/master/php/Dockerfile

下記に変更する。

FROM php:8-fpm

Xdebug 3.x

3.x にすると設定ファイルが変わるので、2.x に固定してたのを修正する。

https://github.com/bobtabo/docker4/blob/master/php/Dockerfile

RUN pecl install xdebug-2.9.8
↓
RUN pecl install xdebug

https://github.com/bobtabo/docker4/blob/master/php/xdebug.ini

下記に変更する。

xdebug.mode=debug,develop
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9001
xdebug.idekey=PHPSTORM

※参考
Xdebug3.0.0がリリースされたので、ver2からの雑な設定コンバート
Xdebug 2 から 3 へのアップグレード

phpMyAdmin

いつもPhpStormからDB見てるけど、一応入れておく。

phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: ${PMA_CONTAINER}
    depends_on:
      - mysql
    environment:
      - PMA_ARBITRARY=${PMA_ARBITRARY}
      - PMA_HOSTS=${PMA_HOSTS}
      - PMA_USER=${PMA_USER}
      - PMA_PASSWORD=${PMA_PASSWORD}
    ports:
      - "${PMA_PORT}:80"
    volumes:
      - ./data/phpmyadmin/sessions:/sessions

MongoDB

もしかして使う機会あるかもなので入れておく。

mongo:
  image: mongo
  container_name: ${MONGO_CONTAINER}
  environment:
    MONGO_INITDB_ROOT_USERNAME: ${MONGO_USERNAME}
    MONGO_INITDB_ROOT_PASSWORD: ${MONGO_PASSWORD}
  ports:
    - "${MONGO_PORT}:27017"
  volumes:
    - ./data/mongo:/data/db

mongo-express

MongoDBを可視化できるらしいので入れておく。

mongo-express:
  image: mongo-express
  container_name: ${MONGO_EX_CONTAINER}
  ports:
    - "${MONGO_EX_PORT}:8081"
  environment:
    ME_CONFIG_BASICAUTH_USERNAME: ${MONGO_EX_USERNAME}
    ME_CONFIG_BASICAUTH_PASSWORD: ${MONGO_EX_PASSWORD}
    ME_CONFIG_MONGODB_PORT: ${MONGO_PORT}
    ME_CONFIG_MONGODB_ADMINUSERNAME: ${MONGO_EX_ADMINUSERNAME}
    ME_CONFIG_MONGODB_ADMINPASSWORD: ${MONGO_EX_ADMINPASSWORD}
  depends_on:
    - mongo

Redmon

phpRedisAdminはキーが増えると遅いらしいので、Redmonを導入。

redmon:
  image: vieux/redmon
  container_name: ${REDMON_CONTAINER}
  links:
    - redis:redis
  ports:
    - "${REDMON_PORT}:4567"
  command: -r redis://redis:6379

MySQLのレプリケーション

.envに追加

MYSQL_SLAVE_CONTAINER=mysql-slave
MYSQL_SLAVE_PORT=13306

Master＆Slave設定を作成

コチラから必要ファイルを丸パクして配置。

docker-compose.ymlを修正

version: '3.8'
〜 略 〜
  mysql:
〜 略 〜
    volumes:
      - ./mysql/master/my.cnf:/etc/mysql/my.cnf
      - ./data/mysql:/var/lib/mysql
      - ./mysql/master/init.sql:/docker-entrypoint-initdb.d/init.sql

  mysql-slave:
    image: mysql:8
    container_name: ${MYSQL_SLAVE_CONTAINER}
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_ALLOW_EMPTY_PASSWORD: 1
      TZ: "Asia/Tokyo"
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    ports:
      - "${MYSQL_SLAVE_PORT}:3306"
    depends_on:
      - mysql
    tmpfs:
      - /var/lib/mysql
    volumes:
      - ./mysql/slave/my.cnf:/etc/mysql/my.cnf
      - ./mysql/slave/init.sql:/docker-entrypoint-initdb.d/init.sql
〜 略 〜

※参考
docker-composeでMaster/Slave構成のMySQLを手に入れる
docker-composeでお手軽mysqlのmaster-slave構成
docker-mysql-master-slave/docker-compose.yml at master · raahii/docker-mysql-master-slave

Laravelのデータベース設定を変更

src/laravel/.env.example

DB_CONNECTION=mysql
DB_MASTER_HOST=mysql
DB_MASTER_PORT=3306
DB_SLAVE_HOST=mysql-slave
DB_SLAVE_PORT=13306
DB_DATABASE=hoge
DB_USERNAME=fuga
DB_PASSWORD="docker#DOCKER1234"

src/laravel/config/database.php

<?php

return [
〜 略 〜
        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'read' => [
                'host' => env('DB_SLAVE_HOST', '127.0.0.1'),
                'port' => env('DB_SLAVE_PORT', '3306'),
            ],
            'write' => [
                'host' => env('DB_MASTER_HOST', '127.0.0.1'),
                'port' => env('DB_MASTER_PORT', '3306'),
            ],
            'sticky' => true,
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],
〜 略 〜
];

完成！！
https://github.com/bobtabo/docker5

使い方

コンテナ定義をクローンして起動する。

[Mac]$ cd <任意のディレクトリ>
[Mac]$ git clone https://github.com/bobtabo/docker5.git docker
[Mac]$ cd docker
[Mac]$ cp -p .env.example .env
[Mac]$ docker-compose up -d
・・・
Creating redis         ... done
Creating mailhog       ... done
Creating mysql-slave   ... done
Creating mysql         ... done
Creating mongo         ... done
Creating redmon        ... done
Creating mongo-express ... done
Creating php           ... done
Creating phpMyAdmin    ... done
Creating nginx         ... done

コンテナ起動を確認する。

[Mac]$ docker-compose ps

    Name                   Command               State                    Ports                  
-------------------------------------------------------------------------------------------------
mailhog         MailHog                          Up      1025/tcp, 0.0.0.0:8025->8025/tcp        
mongo           docker-entrypoint.sh mongod      Up      0.0.0.0:27017->27017/tcp                
mongo-express   tini -- /docker-entrypoint ...   Up      0.0.0.0:8081->8081/tcp                  
mysql           docker-entrypoint.sh mysql ...   Up      0.0.0.0:3306->3306/tcp, 33060/tcp       
mysql-slave     docker-entrypoint.sh mysql ...   Up      0.0.0.0:13306->3306/tcp, 33060/tcp      
nginx           /docker-entrypoint.sh ngin ...   Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp
php             docker-php-entrypoint php-fpm    Up      0.0.0.0:9001->9000/tcp                  
phpMyAdmin      /docker-entrypoint.sh apac ...   Up      0.0.0.0:8080->80/tcp                    
redis           docker-entrypoint.sh redis ...   Up      0.0.0.0:6379->6379/tcp                  
redmon          redmon -r redis://redis:6379     Up      0.0.0.0:4567->4567/tcp

Stateが全てUpならOK、Exit 1だとエラー。
エラー時は下記コマンドでログを見る。

[Mac]$ docker-compose logs

MySQLコンテナに入り、レプリケーション状態を確認する。

[Mac]$ docker-compose exec mysql-slave bash
[SQL]# mysql -u root -p
Enter password:dcoker#DOCKER1234
mysql> SHOW SLAVE STATUS\G
*************************** 1. row ***************************
〜 略 〜
             Slave_IO_Running: Yes
            Slave_SQL_Running: Yes
〜 略 〜
mysql> quit
[SQL]# exit

PHPコンテナに入り、Laravelを設定する。

[Mac]$ docker-compose exec --user 1000 php bash

[PHP]$ pwd
/home/docker

[PHP]$ cd laravel
[PHP]$ composer install
[PHP]$ chmod -R 777 storage
[PHP]$ chmod -R 777 bootstrap/cache
[PHP]$ cp -p .env.example .env
[PHP]$ php artisan key:generate
[PHP]$ chmod 755 bin/clear-laravel.sh
[PHP]$ bin/clear-laravel.sh
[PHP]$ php artisan migrate:refresh --seed

hosts編集

[Mac]$ sudo vi /private/etc/hosts
★下記を点線内を追記
---
127.0.0.1 laravel.local
---
:wq

ブラウザで動作確認

http://laravel.local/
https://laravel.local/

※httpsはSafariだと簡単に見れる（Chromeだと面倒）

http://laravel.local:8025/

http://laravel.local:8080/

http://laravel.local:8081/

http://laravel.local:4567/

コンテナ削除

[Mac]$ docker-compose down --rmi all --volumes

※参考
《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド

Laravel6/7 (laravel/ui)でのLogin機能の実装方法

#Laravel 6.x
composer require laravel/ui:^1.0 --dev

#laravel 7の場合
composer require laravel/ui:^2.4

root@***********::/work# php artisan ui vue --auth

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

C:\Users\name\*****\*****\backend>npm install

npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
                                                        ~~省略~~

C:\Users\name\*****\*****\backend>npm run dev

> @ dev C:\Users\name\*****\*****\backend
> npm run development

> @ development C:\Users\name\*****\*****\backend
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
                                                        ~~省略~~

これで完璧！！！

今後は自作できるように頑張ります。