search

kstm-su / ictsc_2019_kstm_pre2

0 stars 0 forks source link

すごく匿名ダイヤリー #4

Closed Noiri closed 4 years ago

Noiri commented 4 years ago

問題文

匿名で日記が投稿できるサービス「すごく匿名ダイヤリー」を運営しています。 従来、フロントエンドとバックエンドを同じドメインで運用していましたが、 構成変更のため、バックエンドをサブドメインに変更する作業を行っています。

変更前: https://old-diary.ictsc.net/ https://old-diary.ictsc.net/api/

変更後: https://new-diary.ictsc.net/ https://api.new-diary.ictsc.net/

※VNCサーバのWebブラウザからのみ閲覧可能です

ソースコード内のドメインやパスは適切に書き換えましたが、何故か正常に動作しません。 変更前と同じように各機能が動作するよう、サーバにログインして原因調査 及び 修正を行ってください。

なお、サービスはメンテナンス中で限定公開としているため、対応中にサービス断が生じても問題ありません。 また、投稿データについてもバックアップから復元するので、(変更前/変更後環境共に)日記の追加・削除・スター追加は任意に実施して問題ありません。

今後の運用・開発を考慮し、変更は問題解決に必要な箇所に絞り、出来るだけ他に影響を与えないように直してください。 全てを直しきれない場合でも、可能なところまで直してください。

サービス仕様

誰でも匿名で日記が投稿・閲覧できる 投稿されている日記に対して誰でもスターを付けることができる 日記は投稿したブラウザで閲覧すると削除ボタンが表示され、削除が可能 (期間/個数に制限あり) フロントエンドはSPA(Single Page Application)として構築されている 日記の取得/投稿/削除/スター追加はWebAPI経由でバックエンドと通信して実現する

解答方法

修正 と 報告 の両方が必要です 「変更後」のURLでサービスが正常に動作するよう、実際にサーバ上で修正を行ってください。 解答から「原因と実施した修正内容」を報告してください。 報告は最終的に行った内容のみで問題ありません (途中の試行錯誤は記載不要) 具体的に記載してください (例: XXXを直した、ではなく XXXがXXXなので、XXXファイルのXXX部分にXXXXXXXXXを追加した 等)

ログイン情報

VNCサーバから $ ssh 192.168.0.80 -l admin → PW: USerPw@19

※ $ sudo su - にて rootユーザに昇格可能です

rossy0213 commented 4 years ago

memo

rossy0213 commented 4 years ago
rossy0213 commented 4 years ago
  1. /old-front/index.htmlはcspで同一ドメイン間のコンテンツのやりとりしか許可していないため、新しく作ったバックエンドのドメインからコンテンツを取得できるように以下の設定します。 /new-front/index.html の <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"> を <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' api.new-diary.ictsc.net; script-src 'self' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"> に書き換えます。
rossy0213 commented 4 years ago
  1. apiを新しいサブドメインに変更したので、オリジンが変わり、このままフロントからapiに対してリクエストをしようとするとクロスオリジンでブロックされます。なので、バックエンドの方でクロスオリジンを許すように設定します。 以下の設定を /new-api/index.phpに追加する。 
    header('Access-Control-Allow-Origin: https://new-diary.ictsc.net');
header('Access-Control-Allow-Methods: PUT, POST, GET, DELETE, OPTIONS');
header('Access-Control-Allow-Header: Content-Type);
rossy0213 commented 4 years ago
  1. さらに、クロスオリジンの状態でPUTなどのメソッドをもつ単純リクエストじゃないリクエストは、PreflightでiOPTIONSメソッドで利用可能なメソッドを確認するため、apiの方でそれに対応しないといけない。 なので、以下を/new-api/index.phpに追加した。 
    if ( $_SERVER['REQUEST_METHOD'] == "OPTIONS" ) {
header('HTTP/1.1 204');
return;
}
rossy0213 commented 4 years ago
  1. クロスオリジン環境にいて、cooikeを利用しようとしているので、それを許可する必要がある。 /new-api/index.phpに以下を追加した。 
    header('Access-Control-Allow-Credentials: true');

    /new-front/index.phpに以下を追加した。

    axios.defaults.withCredentials = true;
rossy0213 commented 4 years ago
  1. フロントサイドで header.locationを必要とするので、クロスオリジン環境でそれを返せるように許可する必要がある。 /new-api/index.php に以下を追加した。 
    header('Access-Control-Expose-Headers: location');
rossy0213 commented 4 years ago

お疲れ様です。チーム kstmです。

  1. /old-front/index.htmlはcspで同一ドメイン間のコンテンツのやりとりしか許可していないため、新しく作ったバックエンドのドメインからコンテンツを取得できるように以下の設定します。 /new-front/index.html の <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"> を <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' api.new-diary.ictsc.net; script-src 'self' 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"> に書き換えます。

  1. apiを新しいサブドメインに変更したので、オリジンが変わり、このままフロントからapiに対してリクエストをしようとするとクロスオリジンでブロックされます。なので、バックエンドの方でクロスオリジンを許すように設定します。 以下の設定を /new-api/index.phpに追加する。

    header('Access-Control-Allow-Origin: https://new-diary.ictsc.net');
header('Access-Control-Allow-Methods: PUT, POST, GET, DELETE, OPTIONS');
header('Access-Control-Allow-Header: Content-Type);

  2. さらに、クロスオリジンの状態でPUTなどのメソッドをもつ単純リクエストじゃないリクエストは、PreflightでOPTIONSメソッドで利用可能なメソッドを確認するため、apiの方でそれに対応しないといけない。 なので、以下を/new-api/index.phpに追加した。

    if ( $_SERVER['REQUEST_METHOD'] == "OPTIONS" ) {
header('HTTP/1.1 204');
return;
}

  3. クロスオリジン環境にいて、cooikeを利用しようとしているので、それを許可する必要がある。 /new-api/index.phpに以下を追加した。

    header('Access-Control-Allow-Credentials: true');

    /new-front/index.phpに以下を追加した。

    axios.defaults.withCredentials = true;

  4. フロントサイドで header.locationを必要とするので、クロスオリジン環境でそれを返せるように許可する必要がある。 /new-api/index.php に以下を追加した。

    header('Access-Control-Expose-Headers: location');