ウェブアプリの値の渡し方について知っていることを増やす
適当Railsアプリを作成している最中にページ間で値を共有したいと思う時があった。
クエリパラメータ、クッキー、セッション、LocalStrage、SessionStorageが思いついた。
ページ間で値を共有したいと思う場面が増えてきたので、
各々について知っていることを増やそうと思った。
適当クエリパラメータ・パスパラメータでサーバに値を渡すと、
URLで状態を再現することができる。
◆ 状態の種類
- 絞り込み
- 検索
- タグ
- 並び替え
- ページネーション
- 言語
- トークン
- メールやその他媒体を通じて、一時的な認証や操作で使うランダムな文字列
適当公開しないから正直、ページ間で値を共有できれば何だって良い。
制限時間無いから試しに全部使ってみる。
適当クッキー
読んだサイト
Document: cookie プロパティ
HTTP Cookie の使用
メモ
サーバがブラウザに送信する小さなデータ。
Cookieの用途は大きく３つ。
クライアントからサーバにデータを送信しない。または、大量のデータを保存する場合、
CookieではなくウェブストレージAPIやIndexedDBを利用すると良い。
クライアントでのCookieのオプションについてはこのURLで紹介されている。
サーバでのCookieのオプションについてはこのURLで紹介されている。
Cookieにsecure属性を追加するとHTTPSプロトコルでのみ送受信する。
CookieにHttpOnly属性を追加するとJavaScript の Document.cookie API からのアクセスを防ぐことができる。
実際に使ってみる。
無事やりたことはできた。
サーバーに送信しなかった。
クッキーじゃなくても良い。
適当宿題TODO
著名付きCookie
著名付きCookieをコントローラで作成し、cookies.signed[:symbol] = 'value'
ブラウザでデコードする。
このJavaScriptのコードを理解する。
確かデコードした値でatobを呼び出す必要があった気がする。
function decodeBase64(base64String) {
const normalized = base64String.replace(/-/g, '+').replace(/_/g, '/');
const padded = normalized + '='.repeat((4 - normalized.length % 4) % 4);
try {
const decoded = atob(padded);
return decoded;
} catch (e) {
return 'デコード失敗: ' + e.message;
}
}
デコードした値を元にデータを改竄し、
著名とともにエンコードしサーバに渡す。
するとnilが帰ることを確認する。
暗号化クッキー
暗号化Cookieをコントローラで作成し、cookies.encrypted[:symbol] = 'value'
ブラウザでデコードする。
どのような文字列になるのか確認してみる。
適当importmapでjs-cookieを使ってみた
js-cookie github
importmapは https://jspm.org のCDNを使うようだ。※ 間違っているかも
rails console
# importmap.rb
pin "js-cookie", to: 'https://ga.jspm.io/npm:js-cookie@3.0.5/dist/js.cookie.mjs'
// hoge_controller.js
import { Controller } from "@hotwired/stimulus"
import Cookies from 'js-cookie';
export default class extends Controller {
connect() {
console.log(Cookies.get());
}
}
# app/views/xxx/index.html.erb
<div data-controller="hoge"></div>
クロスサイトスクリプティングを調べた
JavaScriptを書いてGPTさんとお話しする際に、
XSSの危険性がありますと表示された。
改めてXSSについて調べてみることにした。
利用者からの入力を受けとり画面表示する時にXSSが起きる。
利用者からの入力のタイミングをリストアップしたら今より安心できる気がする。
◆ 僕がローカル環境で過去に再現できたXSS
- 利用者がフォームで送信した値をDBに保存する。DBに保存された値をサニタイズせずに画面表示。するとサイトを開いた時にJavaScriptが動作する。
- 利用者が絞り込み機能を使う。その時のクエリパラメータをサニタイズせずに画面表示。するとURLを共有したときにJavaScriptが動作する。
◆ 以下を元に画面表示する時がXSSを気をつけるタイミング
- フォームでDBに保存した値
- クエリパラメータの値
- パスパラメータの値
- クッキーの値
- アップロードファイルのテキスト
- ローカルストレージ、セッションストレージの値
適当クロスサイトスクリプティングを調べた２
DBの値を元にhref属性の値を置き換える。
href属性の値がjavascript:xxxという形式だった場合、
JavaScriptを実行することができるので、
クリック時のXSS対策ができていないとGPTさんに指摘いただいた。
javascript:がそもそも何か知らないため調べた。
mdnの URIスキームがあり、javascript: URLに辿り着いた。
/^https?:/.test("文字列")という条件を追加しXSSを予防した。
適当ウェブストレージAPI使ってみた
ウェブストレージAPIとはキーと値のペアを保存することができる仕組み。
ウェブストレージには２種類ある。
sessionStorage
ブラウザが閉じられるまでデータを保存する。
データがサーバに保存されることはない。
localStorage
ブラウザを閉じてもデータは削除されない。
ブラウザキャッシュのクリアまたは、
ローカルに保存したデータのクリアで削除される。