LocalStorageの改ざん

Question

JavaScriptでLocalStorageで任意の設定を行います
localStorage.setItem('bgcolor', 'red');
を設定したとしてそれに合わせて
document.body.background=localStorage.getItem('bgcolor');
とするとします
ブラウザツールからLocalStorageの値をblackにすることもblueにすることもできてしまいます
ツールからの編集を不可能にする設定があるか（現状ない？）
またはlocalStorageが変更されたタイミングで発生するイベントがあるか（現状ない？）、
またはsetIntervalで常時値をチェックし、red以外が設定されたらredに変更する（負荷がかかりそう）
setInterval(function(){if(localStorage.getItem('bgcolor')!="red"){localStorage.setItem('bgcolor', 'red');}},100);

この辺り皆様はどうされてるのでしょうか？

Comments

[yambejp]

なぜlocalStorageの改変だけ禁止にしたいのでしょうか？
そもそもdocument.body.background="black"としてしまえば表示は改変できてしまいますよね？

[aaaaee]

確かにできますがLocalStorageの改ざんを抑制する手立てはないのかという前提で質問させていただいております

Answer 1

まず、LocalStrageはクライアントサイドのため、
究極改ざんを防ぎきるのは不可能です。

しかし、今回の質問要件であれば、
setIntervalより、スマートなやり方は存在します。
DOMの変化を監視する方法です。

const target = document.body;

// オブザーバーの作成
const observer = new MutationObserver(records => {
  // 変化が発生したときの処理を記述
  const target = records[0].target;
  // 背景色が、redでなければ、redにする
  if (target.style.backgroundColor != 'red') {
    target.style.backgroundColor = 'red';
  }
});

// 監視の開始
observer.observe(target, {
  attributes: true,
  attributeFilter: ['style']
});

こうすれば、bodyのスタイルが変えられてしまった時にだけ、処理が起動するようにできます。

Answer 2

別にチェックする必要ないのでは？

setInterval(()=>localStorage.setItem('bgcolor', 'red'),100);

Comments

[aaaaee]

そうなるかもしれませんが負荷的な面でどうなんでしょうか？
やはりそれしか、監視法がないんでしょうか
setIntervalはあまり使いたくありません