APIトークンを使ったレコードの更新について

kintone カスタマイズ
1

kintoneのアクセス権設定の内容に左右されず編集画面を開いた際に文字列フィールド（依頼番号）に値を入力したく、APIトークンを使って下記カスタマイズを行いましたがフィールドに値が入りません。

(function() {
"use strict";

kintone.events.on(["app.record.edit.show"],function(event){
var url = 'https://サブドメイン名.cybozu.com/k/v1/record.json';
var headers = {
'X-Cybozu-API-Token':'トークンの情報',
'Content-Type': 'application/json'
};
var param = {
"app" : kintone.app.getId(),
"id" : kintone.app.record.getId(),
"record": {
"依頼番号": {
"value": moment().format("YY-MMDD-HHmmss")
}
}
};

kintone.proxy(url, 'PUT', headers, param, function(body, status, headers) {
console.log(status, JSON.parse(body), headers);
}, function(error) {
console.log(error);
});

});
})();

ブラウザのコンソールログでは「文字が正しくありません」と出力されております。
※トークンにはレコード閲覧、追加、編集権限を付与しております。

APIトークンを使ったレコードの更新方法に誤りがありましたらアドバイス頂けると助かります。

2

こんにちは。

ブラウザは何をお使いでしょうか？

過去の記事を検索するとIEで同じエラーが出るケースがあるようです。

（手元のIEで同じソースで試した限りではエラーにはならなかったのですが・・・）

 

> APIトークンを使ったレコードの更新方法に誤りがありましたらアドバイス頂けると助かります。

 

現状の方法だと、ユーザーがHTMLソースを見るだけでAPIトークンが見えてしまうため、セキュリティ的はあまりよろしく無いのかなと思います。

プラグイン化して、プラグイン側にAPIトークンを保存させておくのが安全かと思います。

https://developer.cybozu.io/hc/ja/articles/203661160

3

asaga 様

お世話になっております。
アドバイス、有難うございます。

他のブラウザでも確認してみたのですが、下記エラーの通りでした。

※Firefox
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
※Chrome
Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)

現状の方法だとHTMLソース上にAPIトークンが見えてしまうとの事ですが、ブラウザのソース表示で確認できる
下記の部分を指されている認識でよろしいでしょうか？

cybozu.data[‘REQUEST_TOKEN’] = ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’;

上記に表示されたTOKENの情報と、実際にkintoneアプリ側で生成されているトークンの情報が異なる為
教えて頂けると助かります。

4

uto さん

エラーメッセージを見る感じだと、JSON.parse(body) がエラーになってる可能性が高そうですね。

・console.log(status, JSON.parse(body), headers); をコメントアウトしたらどうなるか

・bodyには何が返ってきてるか（console.log(body)）

あたりを確認してみるのはいかがでしょうか？

 

APIトークンが見える件ですが、HTMLソースの下の方を見ると、以下のようにJavascriptを読み込んでるところがあると思います。

ここで読み込んでるファイルをダウンロードしてから開くと、APIトークンが簡単に見えると思います。

<script src="https://サブドメイン.cybozu.com/k/api/js/download.do?〜\>

5

asaga 様

お世話になっております。
ご回答、有難うございます。

console.log(status, JSON.parse(body), headers); をコメントアウトすると
ブラウザのコンソールには何もエラーは出力されませんでした。

次にbodyに何が返ってきてるか確認しましたが、ブラウザのコンソールに下記が出力されました。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"><!--
t = new String(location.hostname).split('.');
t.splice(1, 0, 's');
s = t.join('.');

url = "https://"+s+location.pathname+location.search+location.hash;
cookies = document.cookie.split(';');
for( i = 0; i < cookies.length; i++ ) {
c = cookies[i].replace(/^\s+|\s+$/g, '').split('=');
if( c.length == 2 && c[0] == 'goto_skylab' && c[1] == '1' ) {
location.href = url;
}
}
function goto_skylab() {
document.cookie = 'goto_skylab=1; expires=Tue, 1-Dec-2037 00:00:00 GMT; path=/';
}
// -->
</script>
<meta charset="utf-8">
<title>Forbidden</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/forest_error/css/style.css">
</head>

<body>
<div class="pagewrap">
<div class="column"> <img src="/forest_error/image/cloud.png" width="178" height="107" alt="">
<h2>アクセスするには認証が必要です。</h2>
<p>クライアント証明書をお持ちでしたら、こちらでアクセスできます: </p>
<p>
<script type="text/javascript"><!--
escaped_url = url.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
document.write('<a href="'+escaped_url+'">'+escaped_url+'</a>');
//-->
</script>
<a href=""></a>
.</p>
<form>
<label><input class="checkbox" type="checkbox" name="auto" value="1" onclick="javascript:goto_skylab()" /> このボタンをチェックすると、以後自動的にリダイレクトします。</label>
</form>
<p>Code: 403 Forbidden</p>
</div>
</div>
<div class="footer">
<p>Copyright(C) Cybozu</p>
</div>
</body>
</html>

 

APIトークンが見れてしまう件については理解できました。

bodyの情報から何かお分かりになられましたらアドバイス頂けると助かります。

6

utoさん

bodyに返ってきている情報がおかしいですね。

正常であれば {revision: “18”}のような結果が入るはずです。

貼って頂いた内容からすると、IPアドレス制限を行っている環境に対してAPIリクエストを送ってしまっているように見えるのですが、接続先のサブドメインは合ってますでしょうか？

 

あと、別のやり方として、REST APIでレコードを更新するのでは無く、

・「フィールドの値を書き換える」を使って値をセットする
https://developer.cybozu.io/hc/ja/articles/202166270#step4

・編集させたくないフィールドは「フィールドの編集可／不可を設定する」を使って編集不可にする
https://developer.cybozu.io/hc/ja/articles/202166270#step5

を組み合わせる方法もありそうです。

 

7

asaga 様

お世話になっております。
度々のご回答、有難うございました。

ご回答頂いた中で「IPアドレス制限を行っている環境に対してAPIリクエストを送ってしまっているように見えるのですが」
とご回答頂いておりますが、その通りでしてIPアドレス制限を行っております。

試しにIPアドレス制限を解除した所、{revision: “18”}のような結果が入り、フィールドにも値が入る様になりました。

IPアドレス制限を掛けている環境では、REST APIを使って値を更新する事は出来ないのでしょうか？
認識が足りておらず恐縮ですが、ご教示頂けると助かります。

尚、代替案のアドバイス有難うございました。大変助かります。
IPアドレス制限を掛けている環境でREST APIを使った更新が出来ないのであれば、そちらの方向で検討したいと思います。

8

utoさん

通常はIPアドレス制限の影響を受ける事は無いのですが、kintone.proxyを使ってレコードの更新を行うと、

自社環境のkintone（JavaScript） → cybozu.comのサーバー → 自社環境のkintone

という通信の流れになるので、IPアドレス制限の影響を受けてしまいます。（REST APIの接続元がcybozu.comのサーバーになるため）

 

今の仕組みで実現するとしたら、IPアドレス制限でcybozu.comのIPアドレスを許可する方法になるかと思います。

IPアドレスは以下に記載されています。

https://faq.cybozu.info/alphascope/cybozu/web/cybozu.com/Detail.aspx?id=e7a486a48772b374f43426c3166563150797874326f4e43456276416d5a755251795661714a3639374b73513d

9

asaga 様

お世話になっております。
ご回答、有難うございました。

アドバイス頂いた通り、IPアドレス制限にcybozu.comのIPアドレスを許可しましたら
フィールドに値が入る様になりました。
さて、先に助言頂きました通り、このままですとソースにAPIトークンが丸見え状態になってしまうため
プラグイン化まで何とか実現したいと考えております。

プラグインの作成は初めてですので、下記のサイトを参考に見よう見まねでプラグイン作成を勉強しました。
https://qiita.com/sy250f/items/011254b5c0ffac9a9a05

今回カスタマイズで作成したJavascriptファイル(auto_number.js)とマニュフェストファイル(manifest.json)、画像アイコンをプラグイン化(kintone-plugin-packerでzip化)し
kintoneのプラグインに登録する事で、プラグインが動く所までは確認できたのですが、
先にアドバイス頂いた「プラグイン化して、プラグイン側にAPIトークンを保存させておくのが安全かと思います。」とは
上記作業の事を指されていたでしょうか？
（例えば、Javascriptファイルの中に定義したトークン情報は、別ファイルに定義するなど、ひと手間必要なのでしょうか？）

お手数を掛けますが、アドバイス頂けると助かります。

10

utoさん

プラグイン化しただけでは以前と動きは変わっていませんので、

外部のAPIの実行に必要な情報をプラグインに保存する

に書かれている方法を使えば良いかと思います。

11

asaga 様

お世話になっております。
ご回答、有難うございました。

そのままパッケージしただけでは意味が無いと言う事ですね。
もう少しプラグインの作成方法について勉強して、
分からなければ別件で問い合わせようと思います。

また参考URLのご紹介、有難うございました。大変助かりました。

今後とも、よろしくお願い致します。

12

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。