ScrapboxのCSP制限による外部API接続エラーはTampermonkeyのGM_xmlhttpRequestで超えらえる

ScrapboxのページをAPIで読み取って、それをはてなブログに下書きとして転送するような処理を作ろうとしていた。しかしはてなブログのAtom Pub APIに接続しようとすると次のようなエラーが出る。

code:log

Refused to connect to 'https://blog.hatena.ne.jp/yuki_2021/yuki-2021.hatenablog.com/atom/entry' because it violates the following Content Security Policy directive: "connect-src 'self' i.gyazo.com t.gyazo.com wss://scrapbox.io api.openai.com *.openai.azure.com maps.googleapis.com https://upload.gyazo.com https://storage.googleapis.com https://sentry.io".

これについてはScrapboxには内部のfetchなどでは特定のドメインにしか接続できないCSPというセキュリティ措置が取られているらしく、実質ほとんどのWEBAPIはScrapboxのユーザスクリプトなどからは使えない。

しかし、こちらについてはTampermonkeyのGM_xmlhttpRequestを使って接続することで回避可能である。

サンプルコードとしてはこんな感じ。

code:javascript

// ==UserScript==

// @name はてなブログAPIテスト

// @version 0.1

// @description はてなブログのAPIをGM_xmlhttpRequestで叩くテスト

// @author yuki2021

// @grant GM_xmlhttpRequest

// ==/UserScript==

(function() {

'use strict';

// はてなブログのAPIエンドポイント（例: はてなブログのAtomPubエンドポイント）

const endpoint = 'https://blog.hatena.ne.jp/{{user id}}/{{ユーザのベースURL}}/atom/entry';

// 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