dev_server_proxyのススメ

dev_server_proxyのススメ

Transcript

1. Dev server – proxyのススメ 平崎 葵(ひらさき まもる) 2021/12/06
2. 自己紹介 平崎 葵 (ひらさき まもる) クーガー株式会社 所属 https://couger.co.jp/ ◦フロントエンド、サーバサイドエンジニア ◦バーチャルヒューマンエージェントの開発 趣味：音楽、ドラム、作曲
3. 発表内容 Dev serverのproxy機能を使用して、 効率よくcors対策をしよう。
4. Cors (Cross Origin Resource Sharing)とは？ Web Server1 (https://web_server1.co.jp) Web Server2 (https://web_server2.co.jp) ユーザのブラウザ ②Jsやcss、html をダウンロード ①Web Server1の サイトが見たい ③画面が表示され、 jsが実行される。 ❌ ④jsで裏側でWeb Server2にアク セス使用とするとブロックされる。 Webセキュリティの重要なポリシーの一つ「Same-Origin Policy(同一オリジンポリシー)」に関わる。 参考URL ◦ https://javascript.keicode.com/newjs/what-is-cors.php (CORS とは？) ◦ https://qiita.com/att55/items/2154a8aad8bf1409db2b (なんとなく CORS がわかる...はもう終わりにする。)
5. Corsで防ぎたい脆弱性 lXSS (Cross Site Scripting) ユーザがWebサイトにアクセスすることで不正なスクリプ トがWebブラウザ上で実行されてしまう脆弱性。 lCSRF (Cross-Site Request Forgeries) ユーザが、他サイトでの意図しない処理をブラウザ上で 実行される脆弱性。(ログインしたユーザにしか実行でき ない処理「記事の投稿や削除など」)
6. ローカル開発(localhost)でもcorsは有効 Front end dev server (http://localhost) Server side dev server (http://localhost:8080) ローカルで $ npm run startなどで開発用サーバを実行 Mysqlやredis, elastic searchな どはdockerで立ち上げている。 ブラウザ ②Jsやcss、htmlをダ ウンロード ①front end開発 のためアクセス ❌ ③Web API実行 (例：/api/user/login) Corsでひっかかる。
7. Corsをgoogle chromeデベロッパーツールで確認 http://localhostから http://localhost:8080にアクセス しようとしたので「同一オリジンポ リシー」に反する。 Origin: http://localhost 見えてないですけど、アクセス元 のオリジン情報がリクエストヘッ ダーに含まれている。
8. Corsはサーバ側で許可することで回避できる。 l Laravelの場合 https://qiita.com/kyo-san/items/a507aa0b46037df1b139 (LaravelでのCORS対策とmiddlewareへの理解) https://github.com/fruitcake/laravel-cors l Nodejs (express)の場合 https://expressjs.com/en/resources/middleware/cors.ht ml l Python (flask)の場合 https://flask-cors.readthedocs.io/en/latest/
9. サーバ側設定例 // app.js const cors = require('cors') app.use( cors({ credentials: true, origin: ['http://localhost'], optionsSuccessStatus: 200, }), ) Nodejs (express) Php (Laravel ) // config/cors.php … ‘allowed_origins’ => [’http://localhost*’] … ※Laravelのバージョンで導入方法が違う 可能性あり https://github.com/fruitcake/laravel-cors Python (Flask) # $ pip install -U flask-cors app = Flask(__name__) cors = CORS(app, resources={r"/api/*": {"origins": ”http://localhost"}}) Access-Control-Allow-Origin: http://localhost Access-Control-Allow-Headers "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept" 設定すると、サーバからのResponseのheaderに以下のような情報が追加される。
10. サーバサイドにcors対策を入れて解決はできた。 しかし、フロントのdev serverのproxyの機能を使えば、 サーバサイドに手を入れることなくcors対策ができる。
11. Dev Server Proxyを導入する。 Front end dev server (http://localhost) Server side dev server (http://localhost:8080) Mysqlやredis, elastic searchな どはdockerで立ち上げている。 ブラウザ ②Jsやcss、htmlを ダウンロード ①front end開発 のためアクセス ◦ ③Web API実行 (例：/api/user/login) Dev serverのproxy経由でアクセス。 ④proxyがserver sideのサーバにアクセス リクエストヘッダーの「Origin」ヘッダーをproxy サーバで変換して、corsの辻褄合わせをしてい る。
12. dev server proxy設定方法① ▪web packの場合 // webpack.config.js … devServer: { static: { directory: path.join(__dirname, '__public/'), }, compress: true, historyApiFallback: { index: "", disableDotRule: true }, proxy: { "/api/**": { target: 'http://localhost:8080', withCredentials: true, secure : false, } } }, ※/apiから始まるURLをproxy経由にする場合。 https://webpack.js.org/configuration/dev-server/
13. dev server proxy設定方法② ▪Vue-cliの場合 // vue.config.js devServer: { proxy: { "^/api": { target: "http://localhost:8080", changeOrigin: true, }, }, }, ※/apiから始まるURLをproxy経由にする場合。 https://cli.vuejs.org/config/#devserver-proxy
14. dev server proxy設定方法③ ▪React-create-appの場合 ※/apiから始まるURLをproxy経由にする場合。 https://create-react-app.dev/docs/proxying-api-requests-in-development/ // $ npm install --save-dev http-proxy-middleware // src/setupProxy.js const createProxyMiddleware = require('http-proxy-middleware’) module.exports = (app) => { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true, withCredentials: true, secure: false, }), ) }
15. (余談)Localhostでhttpsしたい 1. ngrok ◦ローカルPC上で稼働しているサービスを外部公開できるサー ビス。 https://qiita.com/mininobu/items/b45dbc70faedf30f484e (ngrokが便利すぎる) 2. WebpackDevServerでhttps(TLS)ができるみたい(未検証) ◦https://blog.hinaloe.net/2017/04/14/tls-webpack-dev-server/
16. エンジニア募集中 https://couger.co.jp/news/career/ カジュアル面談実施中！ lフロントエンドエンジニア lDevOpsエンジニア lAI/機械学習エンジニア lサーバアプリケーションエンジニア