在react应用程序中使用API​​密钥

Question

我有一个使用两个第三方服务的React应用程序。该应用是使用#include <stdio.h> #include <lapacke.h> #define COL 3 #define ROW 4 int main() { char transa ='N'; lapack_int m, n, nrhs, lda, ldb, info; m=ROW; n=COL; nrhs=1; lda=ROW; ldb=ROW; double* work; double A [COL*ROW] = { 1.1, 4.2, 1.7, 2.5, 2.1, 2.8, 3.4, 4.2, 8.5, 4.4, 5.2, 7.8 }; double b[ROW] = { 39.3, 27.4, 29.3, 42.1 }; printf("test 1 \n"); lapack_int lwork=n; if (m<n){lwork=m;} lwork=-1; double query; dgels_(&transa, &m, &n, &nrhs, A, &lda, b, &ldb, &query, &lwork, &info); lwork=(int)query; printf("the optimal size is %d \n",lwork); work=malloc(lwork*sizeof(double)); if(work==NULL){fprintf(stderr,"maloc failed\n");exit(1);} dgels_(&transa, &m, &n, &nrhs, A, &lda, b, &ldb, work, &lwork, &info); printf("test 2 \n"); printf("%g %g %g\n",b[0],b[1],b[2]); free(work); double Aa [COL*ROW] = { 1.1, 4.2, 1.7, 2.5, 2.1, 2.8, 3.4, 4.2, 8.5, 4.4, 5.2, 7.8 }; double bb[ROW] = { 39.3, 27.4, 29.3, 42.1 }; //with lapacke info= LAPACKE_dgels(LAPACK_COL_MAJOR,transa, m, n, nrhs, Aa, lda, bb, ldb); printf("%g %g %g\n",bb[0],bb[1],bb[2]); // double Aaa [COL*ROW] = { 1.1, 4.2, 1.7, 2.5, 2.1, 2.8, 3.4, 4.2, 8.5, 4.4, 5.2, 7.8 }; double bbb[ROW] = { 16.3, 17.9, 45.8, 46 }; //with lapacke info= LAPACKE_dgels(LAPACK_COL_MAJOR,'T', n, m, nrhs, Aaa, n, bbb, ldb); printf("%g %g %g\n",bbb[0],bbb[1],bbb[2]); double Aaaa [COL*ROW] = { 1.1, 4.2, 1.7, 2.5, 2.1, 2.8, 3.4, 4.2, 8.5, 4.4, 5.2, 7.8 }; double bbbb[ROW] = { 16.3, 17.9, 45.8, 46 }; // it is still possible to allocate the buffer yourself once for all if LAPACKE_dgels_work is used. // it can be useful if dgels is used many times, using the same transa, m,n,nrhs,lda,ldb but different A or b. info= LAPACKE_dgels_work(LAPACK_COL_MAJOR,'T', n, m, nrhs, Aaaa, n, bbbb, ldb,&query,-1); lwork=(int)query; printf("the optimal size is %d \n",lwork); work=malloc(lwork*sizeof(double)); if(work==NULL){fprintf(stderr,"maloc failed\n");exit(1);} info= LAPACKE_dgels_work(LAPACK_COL_MAJOR,'T', n, m, nrhs, Aaaa, n, bbbb, ldb,work,lwork); free(work); printf("%g %g %g\n",bbbb[0],bbbb[1],bbbb[2]); return 0; } 启动的。

这两项服务都需要API密钥。

通过脚本标记提供一个密钥，如下所示：

react-create-app

请求中使用了另一个API密钥。我将实际的密钥存储在一个常量中，并使用它来形成请求。像这样：

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

Google的best practice tips处理API密钥说：

  

不要直接在代码中嵌入API密钥

这让我想到了第一个问题：

1。如何在const MY_OTHER_KEY = 'MY_OTHER_KEY' let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}` 中使用变量？

在我的index.html文件中，我有两个看起来像这样的标签：

index.html

显然，<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 是一个变量。如何添加变量%PUBLIC_URL%以避免直接在我的代码中嵌入API密钥？

得到这样的东西：

%MY_KEY%

与此问题相关，将API密钥存储在常量中是否安全，就像我对<script type="text/javascript" src="https://myapi?key=%MY_KEY%"> </script> 所做的那样？

谷歌还说：

  

不要将API密钥存储在应用程序的源代码树

中的文件中

这让我想到了第二个问题：

2。 API密钥是否仍然在捆绑包中？

说我做谷歌所说的和我

  

...将它们存储在环境变量或您的文件外的文件中   应用程序的源代码树

假设我将密钥存储在外部文件中。我认为，该文件将在某个时刻被读取，并且它的内容要么在包中复制，要么以其他方式引用。最后，除了可能更难找到之外，还没有看到密钥仍然在捆绑中可见？这对此有何帮助？

第3。有没有在反应应用程序中使用API​​密钥的canonic方法？或者由个人开发人员决定？

自我解释，我正在寻找解决这个问题的反应方式，如果有的话。

感谢您的帮助！

Answer 1

<强> 1。如何在index.html中使用变量？

回答1：请仔细阅读Adding Custom Environment Variables，了解如何添加您所示类型的环境变量作为示例。

<强> 2。 API密钥是否仍然在捆绑包中？

回答2：即使您的密钥（MY_KEY）作为脚本标记中的环境变量，它也会在页面上呈现并显示。通常，这些是浏览器密钥，旨在用于客户端。这些可以通过在您的请求中提供Http Referer标头来限制。更多关于保护这些密钥的功效here。但是，API密钥（如MY_OTHER_KEY）不应在客户端使用，不应在脚本标记中呈现或存储在客户端JS中。

第3。有没有在反应应用程序中使用API​​密钥的canonic方法？或者由个人开发人员决定？

回答3：使用第三方API密钥的规范方法是让客户端应用向您的后端API发送请求。然后，您的后端API会根据第三方API格式化请求，添加密钥并调用第三方API。收到响应后，它可以将其解压缩并将其转换为您的前端应用程序可以理解的域对象，或将原始响应发送回前端应用程序。通过这种方式，API密钥保留在后端，永远不会发送到客户端。