0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ブラウザのストレージを全く使わないクロスドメインで使えるストレージサービスを作った

Last updated at Posted at 2023-05-15

背景

昨今、ITP規制などによって3rd parth cookieがどんどん排除されたり、有効期間が短くなったりとbrowserからアクセスできるユーザーのstorageはどんどん使いにくくなっている。
そこで、browserのストレージを全く使わずに保持できるstoreがあればいいなと思い、OSSライクなライブラリを作成した。

使い道

Globalなsession storeだと思っていただければほぼその通りです。
ただのsession storeと違うところは、指定のaタグに対して自動的にuuidをクエリに付加するため、クロスドメインでの遷移に対応している部分です。

注意

現在、experimentalなので、使用は自己責任でお願いします。
storageは一度networkの共有KVに送られるため、uuidv4が衝突した場合、データが露出する可能性があります。
絶対にsecureなデータを使用しないでください。

使い方

githubのREADMEにも書いているが、基本的にはheadでscriptを読み込ませた後、指定のsnippetを挿入することでリンク遷移先のアドレスでも、遷移前にsetしたデータが使用可能になる。

  1. SETするページのexample
~~~
<!-- headでsdkを読み込み -->

<head>
  <script async src="https://lc.araj.jp/lc.min.js"></script>
</head>
~~~

<!-- 共有したいリンク先のaタグにdata-lcのattributeを付与する -->
<a href="https://example.com" data-lc="true">external link</a>

~~~

<!-- 共有したいデータをsetしておく -->

<script>
  linkchain = window.linkchain || {}
  linkchain.ready = function (lc) {
    lc.set({ test: "test" }) // objectをそのまま渡す
  }
</script>

  1. GETするページのexample
~~~
<!-- headでsdkを読み込み -->

<head>
  <script async src="https://lc.araj.jp/lc.min.js"></script>
</head>
~~~

~~~

<!-- 共有したいデータにアクセスする -->

<script>
  linkchain = window.linkchain || {}
  linkchain.ready = function (lc) {
    console.log(lc.data)
    // { test: "test" }
  }
</script>

今後

現在、vercelのhobbyプランを使用しているため通信回数などにグローバルな制限があり、安定動作はしていません。
もし需要があれば、namespaceで区切られたデータ領域や、指定ドメインの制限などの機能を追加する予定です。
現状の最優先の目標はjwtトークンを利用したone-time authを実現し、secureなデータでも安心して使えるようにすることです

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?