ScrapboxのCSP制限による外部API接続エラーはTampermonkeyのGM_xmlhttpRequestで超えらえる
code:log
これについてはScrapboxには内部のfetchなどでは特定のドメインにしか接続できないCSPというセキュリティ措置が取られているらしく、実質ほとんどのWEBAPIはScrapboxのユーザスクリプトなどからは使えない。 サンプルコードとしてはこんな感じ。
code:javascript
// ==UserScript==
// @name はてなブログAPIテスト
// @version 0.1
// @description はてなブログのAPIをGM_xmlhttpRequestで叩くテスト
// @author yuki2021
// @grant GM_xmlhttpRequest
// ==/UserScript==
(function() {
'use strict';
// はてなブログのAPIエンドポイント(例: はてなブログのAtomPubエンドポイント)
// Basic認証用のユーザーIDとAPIキー
const userId = 'はてなブログのユーザID';
const apiKey = 'はてなブログのAPI Key';
const basicAuth = btoa(${userId}:${apiKey});
GM_xmlhttpRequest({
method: "GET",
url: endpoint,
headers: {
"Authorization": Basic ${basicAuth}
},
onload: function(response) {
console.log('Response:', response.responseText);
},
onerror: function(response) {
console.error('Error:', response);
}
});
})();
ポイントとしては、ヘッダーの方の@grantでGM_xmlhttpRequestに対して許可を出しておかなくてはダメ。
基本的のこのサンプルコードではてなブログの最新の投稿を取得できる。
public.icon