Frontend開発メモ

Localhostでは画面が表示できなくなる

1. 背景

最近までは、問題がなかったのに…

2. 原因調査

ブラウザーのDev Consoleを開いたら、問題はcookies misusing the SameSite attributeのようです。

3. 原因

CookieにあるTokenは、商用環境から持ってきたもので、Localhostのテスト環境に入れようということが禁止されたのようです。
おそらく、Chromeの更新で、今までSameSiteの属性をNoneに設定することを禁止されて、強制的に"secure"を変更されていること。

なるほど。。。テストに使う手口は、サイト攻撃にも使えるもので、ブラウザーは自分の責任だと考えて、禁止されているですね。しかし、開発者には、突然で余計なお世話…

4. 対策

大丈夫、原因はわかったら、対応策はいくらでも考えられる

他のエンジニアの方法 https://stackoverflow.com/questions/60069054/how-to-overcome-the-effect-of-chromes-samesite-cookie-update-in-the-case-of-loc

  // The only workaround I am currently aware of is to check your environment, and set the cookies with SameSite=Lax for your development environment, and to SameSite=None; Secure for production.

  //In Express, you could use the secure parameter to check if you are running on HTTPS, and then set your cookie as follows:

  const {secure} = req;
  res.cookie('key', 'contents', {
  secure,
  httpOnly: true,
  sameSite: secure ? 'None' : 'Lax',
  });
  

JDAIの方法

１の方法は、ソースコードを変更で問題を解決。ただし、本当にいいか？Chromeが配慮してくれることを無くしちゃうの。

そしたら、ローカルでも、HTTPSを使い、ブラウザーに信用させるのは正攻法にしましょう。

5. ステップ

localhost » jdai.devに変えましょう
- linux, MacOSは /etc/hostsに、下記のレコードを追加
```
 127.0.0.0.1  localhost
 127.0.0.0.1  jdai.dev
```
jdai.devの証明書を発行

``` $ openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt ``` 色々聞かれるけど、Common Name以外は適当に入れればいいです。 ``` Country Name State or Province Name Locality Name Organization Name Organizational Unit Name *Common Name* << ここは重要　jdai.devにする Email Address ```

従来は、opensslで自己証明書を作成のは一般的です。しかし、その方法では、最新版のChromeは自己証明書を許可するような道を塞いだ。そして、アプローチは、代わりにmkcertコマンドで、証明書を作成、またCAも合わせて信頼できるのような設定を入れている。そっちに使ったほうがいい。

ただし、mkcertは、Firefoxには対応してない。FFはほかの設定が必要。

nginxにSSL証明書周りの記述を入れましょう

     server {
         listen               443;
         ssl                  on;
         ssl_certificate      /path/to/file/localhost.crt;
         ssl_certificate_key  /path/to/file/localhost.key;
         ssl_ciphers          HIGH:!aNULL:!MD5;
         server_name          jdai.dev;  
         location / {
             proxy_pass  http://backend;
         }
     }
  

私たちはほとんどDockerを使っているので、同じくdocker-composeとsite.confを修正すれば良い。

DONE!

この記事を見ているあなたへ、

JDAIはフロントエンドのエンジニアを募集中です。以下のリンクをクリックしてね。 https://jdai.com/page-careers.php