Lycolog

各サービスの振る舞いが少し気になったので適当にサッと軽く見たメモです
ある程度モダンそうなところを適当に選んだので特に観点とかはないです

確認環境

• Google Chrome 91.0.4472.124（Official Build）
• Cookie offはファーストパーティCookieをブロックして確認

超簡単なまとめ

Qiita

Cookie off

ログインしようとするとエラーになります

JS off

ページの一部が欠損しますが、特にエラーは出ない模様

Twitter

Cookie off

ログインしようとするとログインページでループします

JS off

エラーが出ます

GitHub

Cookie off

めちゃくちゃシンプルなエラーが出ます

JS off

ページの一部が欠損し、場所によってはエラーになる模様

Google

検索ページとログインページで確認

Cookie off

ログインしようとするとエラーになります

JS off

検索はできましたが、ログインしようとするとエラーになります

Youtube

Cookie off

Googleと同じなのでパス

JS off

読込中の状態で止まります

mercari

Cookie off

未確認

JS off

読込中の状態で止まります

DMM

Cookie off

Twitter同様にログインページでループしました

JS off

ページ上部に通知が生えてきます
ついでにページ表示が崩れたり、一部のページ遷移が機能しなくなりました

DLSite

Cookie off

ログインしようとするとログアウト処理に飛びました

カートにアイテムを入れても入りません

JS off

ページの一部が欠損するので成人向けサイトでも超健全に！

カートからアイテムを消すと謎のエラーが出ますが、カートからは一応消えます

skeb

Cookie off

白紙ページになります
Consoleに次のエラーが出るので想定外ということでしょう

DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

JS off

白紙ページになりました

Tayori

Cookie off

エラーになります

JS off

• トップページの一部が欠損
• トップページからヘッダーのリンクを叩くと表示されるコンテンツが白紙に
• ユーザーのFAQページは検索が動作不能

SoundCloud

Cookie off

ログインできずにループします

JS off

エラーになります

nginxの設定ファイルを更新したのに読み込んでくれないときの対処法

• 次のようにnginxのリロードや再起動をしても通じないとき
  • nginx -s reload
  • nginx -s stop -> nginx
• 次のコマンドを流すとプロセスが綺麗に死んでくれて再読込できることがある
  • sudo kill -HUP $(cat /var/run/nginx.pid)

ReactでSPAを組んでいてブラウザバックしたときのフォームの入力内容が消し飛んで気になったので、ブラウザバックした時にどうなるのかというのを軽く調査した結果

確認したパターンとしては次の2つ

1. フォームの入力値をDOMに保持させるステートレスな方式
2. フォームの入力値をJSに保持させるステートフルな方式

LocalStorageに画面情報を保存して復元するとか、条件分岐を使ってDOMを隠して保持させるとか、そういう系は考慮しない

結果

1. フォームの入力値をDOMに保持させるステートレスな方式

この方式だとhistory.push()でDOMが消し飛ぶのでSPA内でのブラウザバックで入力したデータが保持されません
その代わりSPAの外、別のサイトに遷移してからブラウザバックしたときは、DOMが残っているので入力したデータが保持されます

2. フォームの入力値をJSに保持させるステートフルな方式

この方式だとJSでステート管理をしているため、history.push()で遷移してDOMが消し飛んでも、 defaultValueに持ってる値を突っ込んであげれば、取り敢えず入力したデータを保持することが出来ます
反対にSPAの外、別のサイトに遷移してからブラウザバックしたときは、メモリの中身が飛んでるので入力したデータが保持されません

各手法の実装方式

ちゃちゃっと書いたのでコードは超雑です

確認環境

1. フォームの入力値をDOMに保持させるステートレスな方式

大正義ステートレスです
Function Componentはステートレスなので、こうあってほしいですよね～
コードもシンプルで管理しやすいのが素敵なところです

export const StatelessPage = () => {
  const history = useHistory();
  return (
    <div>
      <form>
        <input type="text" />
        <button onClick={() => history.push(AppRoute.dom2.path)}>submit</button>
      </form>
    </div>
  );
};

2. フォームの入力値をJSに保持させるステートフルな方式

ギルティなステートフル方式です
Class Componentを捨てたはずなのにどうしてこうなった…
コードが煩雑で管理が大変です

export const StatefullPage = () => {
  const ctx = useContext(ExampleContext);
  const history = useHistory();
  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
    ctx.text = ev.target.value;
  };

  return (
    <div>
      <form>
        <input
          type="text"
          defaultValue={ctx.text}
          onChange={(ev) => onChange(ev)}
        />
        <button onClick={() => history.push(AppRoute.ctx2.path)}>submit</button>
      </form>
    </div>
  );
};

手順

1. xrdpが入っていなければxrdpをインストール
   1. Desktop版なら最初から入ってた気もする
2. 3389ポートを開ける
   1. sudo ufw allow 3389
3. オートログインを殺す
   1. sudo sed -ie 's/AutomaticLoginEnable=true/AutomaticLoginEnable=false/' /etc/gdm3/custom.conf
4. あとは再起動してWindowsのリモートデスクトップから繋げて画面が映ればOK
   1. sudo reboot

トラブルシューティング

接続したけど画面が真っ暗

pkill gnome-sessionでログインセッションを殺す

左にあるDockが表示されない・設定に外観がない・その他物理接続時とデスクトップの表示が異なる

sudo nano /etc/xrdp/startwm.shして以下の内容を追記する

export DESKTOP_SESSION=ubuntu
export GNOME_SHELL_SESSION_MODE=ubuntu
export XDG_CURRENT_DESKTOP=ubuntu:GNOME