React + Electron のアプリにて Axios を用いることで TwitterAPI を利用したい

前提・実現したいこと

タイトルの通り、React + Electron で作成しているアプリの内部で TwitterAPI を使用したいと思っています。

ちなみに、Thunder Client にて以下の URL と Header を指定した場合の動作確認は取れているので、React特有、あるいはElectron特有のエラーが出ているのではないか、と考えています。

補足情報等が必要であれば随時追記していきますので、何卒宜しくお願い致します。

発生している問題・エラーメッセージ

xhr.js:187 Refused to connect to 'https://api.twitter.com/2/tweets/search/recent?query=python' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

dispatchXhrRequest @ xhr.js:187

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:99)

該当のソースコード

typescript
1import axios from "axios";
2import React, { useEffect } from "react";
3
4export const App = () => {
5  useEffect(() => {
6    const http = async () => {
7      const config = {
8        headers: {
9          Authorization:
10            "Bearer <BEARER_TOKEN>",
11        },
12      };
13      axios
14        .get(
15          "https://api.twitter.com/2/tweets/search/recent?query=python",
16          config
17        )
18        .then((res) => console.log(res))
19        .catch((e) => console.log(e));
20    };
21    http();
22  }, []);
23
24  return <div></div>;
25};

追加情報

どうやら TwitterAPI に限らず、JSON placeholder のエンドポイントを叩きに行っても同様のエラーが出るようです。

Electronが問題っぽいですね、、

hoshi-takanori

2021/09/09 09:16

CORS を無効にすればいいっぽいってことかな…。 https://qiita.com/yasuflatland-lf/items/4f57b6dd311d4918e8f5

退会済みユーザー

2021/09/09 10:52

index.html の　<head> に <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> を追加してみるとか（ヤマカンです。）

tksx1227

2021/09/09 11:38

> suwmn50799 こちらは既に記述しています！ > hoshi-takanori 以下の Warning が増えただけで、エラーメッセージは変わりませんでした、、 ``` VM76 renderer_init.js:97 Electron Security Warning (Disabled webSecurity) This renderer process has "webSecurity" disabled. This exposes users of this app to severe security risks. For more information and help, consult https://electronjs.org/docs/tutorial/security. This warning will not show up once the app is packaged. warnAboutDisabledWebSecurity @ VM76 renderer_init.js:97 VM76 renderer_init.js:97 Electron Security Warning (allowRunningInsecureContent) This renderer process has "allowRunningInsecureContent" enabled. This exposes users of this app to severe security risks. For more information and help, consult https://electronjs.org/docs/tutorial/security. This warning will not show up once the app is packaged. ```

退会済みユーザー

2021/09/09 12:12

> こちらは既に記述しています！さよか。これは失礼しました〜。あまり頼りにならんかもしれへんが思いつきを回答しました。

tksx1227

2021/09/09 13:15

いえいえ、こちらこそ事前情報が不足していて申し訳ないです。

行動規範の内容に同意します

回答1件

ベストアンサー

手元で確認していないので推測による回答になってしまいますが、

<meta http-equiv="Content-Security-Policy"の content属性に（;区切りで）

text
1script-src 'self' https://api.twitter.com

を追加してみるとどうでしょう？すなわち

diff
1- <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
2+ <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://api.twitter.com">

あるいは、メッセージに 'default-src' is used as a fallback. とありますが、セキュリティ的にベターなのは
default-src 'self' というfallback無しの

diff
1- <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
2+ <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://api.twitter.com">

がよいかもしれません。➡ 参考

投稿2021/09/09 12:10

退会済みユーザー

総合スコア0

tksx1227

2021/09/10 01:37

お教えいただいた最後のコードを適用したところ、正常に動作するようになりました。変更点としてはこちらになります。 - <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> + <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://api.twitter.com"> 誠にありがとうございます！

行動規範の内容に同意します