BETA

JSONを返すAPIのCORS対策

投稿日:2020-06-13
最終更新:2020-06-26

注:筆者は「CORS」という言葉を1日前に知ったレベルです。

CORSを許可していなくても、APIにURLで直接アクセスした場合、データを取得できました。
(なんで?)

CORS 禁止 許可
URLで直接(GET)
同鯖(fetch+GET)
同鯖(fetch+POST)
他鯖(fetch+GET) ×
他鯖(fetch+POST) ×

上記の条件がすべてだと仮定した場合、

CORS 禁止+POST 許可+POST
URLで直接(GET) × ×
同鯖(fetch+GET) × ×
同鯖(fetch+POST)
他鯖(fetch+GET) × ×
他鯖(fetch+POST) ×

「POST」に限定すれば思い通りにアクセス制限できるかなと思いました。
(まだ調べ切れていないがメモのためにこの記事を書きました)

大元のコードは以下の動画を参考にさせていただきました。
JavaScript入門#9 @しまぶーのIT大学

テストデータは以下のサイトで生成させていただきました。
テストデータ・ジェネレータ

index.html

<!DOCTYPE html>  
<html lang="ja">  
  <head>  
    <meta charset="UTF-8" />  
    <title>Document</title>  
  </head>  
  <body>  
    <ol id="lists"></ol>  
    <button id="btnAdd">もっと</button>  

    <script src="index.js"></script>  
  </body>  
</html>  

index.js

const button = document.getElementById("btnAdd");  
const lists = document.getElementById("lists");  

let _page = 0;  

function addList(user) {  
  const list = document.createElement("li");  
  list.innerText = user.name;  
  lists.appendChild(list);  
}  

async function getUsers() {  
  const res = await fetch("https://u0001.shop/json.php?p=" + _page++, { method: "POST" });  
  const users = await res.json();  
  console.log(users);  
  return users;  
}  

async function listUsers() {  
  const users = await getUsers();  

  if(users != false)  
    users.forEach(addList);  
}  

window.addEventListener("load", listUsers);  
button.addEventListener("click", listUsers);  

json.php

<?php  

require_once("./vars/vars.php");  

if($_SERVER["REQUEST_METHOD"] == "GET"){  
    $array = [  
        ["id" => "-1","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],  
        ["id" => "-2","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],  
        ["id" => "-3","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],  
    ];  

    echo json_encode($array);  

} else { // POST  
    function get_connection()  
    {  
        return pg_connect(CONNECTION_STRING);  
    }  

    $con = get_connection();  
    $result = pg_query($con, "SELECT * FROM profile LIMIT 10 OFFSET ".pg_escape_string($_GET["p"] * 10).";") or die("not work".pg_last_error());  
    pg_close($con);  
    echo json_encode(pg_fetch_all($result));  
}  

?>  

SQL(PostgreSQL)

CREATE TABLE profile (  
  id SERIAL PRIMARY KEY,   
  name VARCHAR(256),  
  time TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP  
);  

INSERT INTO profile (name) VALUES ('丹羽 幸郎');  
INSERT INTO profile (name) VALUES ('庄司 忠博');  
INSERT INTO profile (name) VALUES ('佐藤 希和');  
...  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@u4xiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう