JSONPの替わりにJSONoCを使ってみませんか？

jsonをSame Origin Policyの制約を受けずに別のオリジンから取得する方法としてJSONPがあります。
しかしながら、「JSONP 危険」「JSONP 脆弱性」と検索するとセキュリティリスクがあるとわかります。
JSONoCはJSONPのリスクのある一部を防ぐことが可能です。

JSONoCとは

JSONoCとはJSON over CSSの略で、下記CSSのようにCSSの中にJSONを埋め込み、CSSを読み込みスタイルが適用された要素にJavaScriptでアクセスしJSONを取得しよう、という試みです。

CSSファイルはJSファイルと同様にSame Origin Policyの制約を受けずに別のオリジンからアクセスすることが可能です。またCSSファイルはiframeの中の、そのまたシャドウDOMの中で読み込まれるため、元のページと隔絶されており、元ページに悪影響を与える心配がありません。

test.json.css

#_{--j:'{"name":"Bob","age":35}';}

JSONoCの安全性 (JSONPと比較して)

信頼性のない外部サイトからも取得可能

JSONPでは外部の実行可能なjsファイルを実行します。そのjsファイルが信頼性のない場合、セキュリティリスクとなります。一方でJSONoCは前述しているとおり、実行可能なjsファイルではなくCSSファイルを読み込むので、自由なコードを実行される恐れがありません。またそのCSSもiframeの中の、そのまたシャドウDOMの中で読み込まれるため、元のページと隔絶されており、元ページに悪影響を与える心配がありません。

したがって、信頼性のない外部サイトからもJSONoCによってjsonを取得することが可能です。

機密情報はJSONP同様に扱ってはいけない

JSONPではコールバック関数名を秘匿することで、コールバック関数名を知らない第三者は情報を取得し辛くなっています。ですが、総当たりすればわかってしまいますし、仮にJSONPのアドレスがばれてしまえば攻撃者自らjsファイルを取得できるため、JSONPでは機密情報を扱ってはいけませんし、扱うためには別になんらかの認証機構を用意すべきです。JSONoCでもこの点については同様です。情報提供者、情報取得者が同一のKey(文字列)を知っている場合のみにjsonを取得できる仕組みは用意していますが、これもJSONP同様に総当たり可能ですし、CSSファイル自体に攻撃者が直接アクセスすればJSONデータはわかってしまいます。

JSONoCの使いかた

JSONデータの取得

JSONoCにあるjsonoc.jsを読み込み、下記コードを実行すると

  JSONoC.fetch('https://foo.com/test.json.css',5000,"").then(
    (json)=>{
      console.log(json);
    }
  );

下記JSONが取得できます。
ここで、一つ目の引数はJSONデータを埋め込んだCSSファイルのURLを指定します。
二つ目の引数はタイムアウトであり、ここでは5000ミリ秒でタイムアウトすることを示しています。
また、三つ目の引数で空文字を渡していますが、ここはKeyとなっており、情報提供者、情報取得者が同一のKey(文字列)を知っている場合のみにjsonを取得できるようになっています。（今回は空文字にすることでこの機能は不使用としています。）

実行結果

{"name":"Bob","age":35}

このときCSSファイルは下記となっているものとします。

test.json.css

#_{--j:'{"name":"Bob","age":35}';}

JSONデータを埋め込んだCSSファイルの作成

下記コードでJSONデータを埋め込んだCSSファイルを作成することができます。
ここで、一つ目の引数はJSONデータを指定します。
二つ目の引数はKey(文字列)であり、ここでは空文字を渡しています。

let json = JSONoC.cnv( {name:"Alice", age:20} , "");
  console.log(json);

実行結果

#_{--j:'{"name":"Alice","age":20}';}