Angular 6,我应该在environment.ts文件中放置秘密环境变量吗?

有两个子问题:

>我应该在environment.ts文件中放置秘密环境变量吗?
>过程变量垫片消失了.如果我使用它,tsc将抛出一个错误:找不到名称’process’.

这是我的事:

关于Q1:我不认为在environment.ts文件中放置秘密环境变量是正确的.因为这些文件将推动源代码管理,如GitHub,gitlab,bitbucket.这不安全.所以我认为秘密环境变量应该通过process.env传递,比如process.env.ACCESS_TOKEN,或者,如果使用docker-compose,应该将秘密环境变量放在.env文件中,并将此文件添加到.gitignore文件中.

关于Q2:如果我使用Heroku来设置我的环境变量,它取决于流程变量.现在,angular6摆脱了过程的垫片,我如何使用Heroku?此外,通过.env文件使用docker-compose传递环境变量也取决于进程.

如果使用docker-compose的.env文件,则会出现一个新问题:How to pass variables in .env file to angular6 environment.ts file

更新1:

这是一个案例:

首先,没有后端

我使用github api或其他开放的api,并且有一个名为access_token的环境变量,
如果我把它放在environment.ts文件中并将我的前端源代码推送到Github,Github将检测到秘密信息并给我一个警告,他们说,你不应该在源代码中放入github访问令牌并将其推送到repo,所以他们将撤销我的访问令牌.

所以我想使用process.env.ACCESS_TOKEN,但是过程变量shim在Angular6中消失了,我该如何解决这个问题呢?我应该将environment.ts文件添加到.gitignore文件中还是什么?

更新2

这是另一个案例:

继续更新1.现在,我添加docker-compose和Dockerfile来在docker容器中运行我的前端应用程序.这是工作流程:

>编写Dockerfile,运行npm run build命令并将./build目录复制到docker容器的nginx静态文件目录. ./build目录包含index.html,bundle.js文件等.
>将access_token和其他秘密环境变量放入.env文件中.
>运行docker-compose以在docker容器中运行我的应用程序.

我认为这个工作流程很扎实.不需要后端服务,.env和.gitignore中的秘密环境变量包含.env文件,因此它不会被推送到Github repo.

但是,关键点是流程垫片已经消失.我无法通过流程获取环境变量.

更新3

我认为我的问题集中在前端应用程序开发阶段.
我继续用上面的案例来解释.

为了准备生产,工作流程是:

>当oauth工作流完成时,为github oauth提供后端服务.Back-end服务将access_token发送到前端.
>前端登录成功,从后端服务获取access_token并将其存储在localStorage或cookie中.不需要从process.env获取access_token

但是对于开发阶段,前端和后端开发是针对一般情况分开的.因此,前端不应该依赖于后端服务.

而且我不想在一开始就构建整个大系统.

所以我认为问题是:

在哪里存储秘密环境变量以及如何获取Angular6前端应用程序代码?有几种情况需要考虑:

>使用PaaS Heroku配置变量
> dockerlize(docker-compose,Dockerfile),. env文件.
>没有后端服务.
>将环境变量文件添加到.gitignore,不要推送到SCM(Github,gitlab等)

TL; DR

您不应将environment.ts视为与process.env类似的内容.名称相似但行为绝对不是.如果我们谈论浏览器,环境变量就是你的sessionStorage / localStorage项(localStorage更像是添加到你的bash配置文件的变量; cookies和indexedDB的行为方式相同). environment.ts是在应用程序内部构建的,因此它只是代码的一部分.

这就是为什么以任何方式将秘密泄露给环境都是不安全的.在某些服务层或任何上述存储中的后端使用秘密.

长版

在客户端应用程序中没有这样的秘密.由于浏览器中的代码将能够获取这些变量,因此每个人都可以在运行时获取这些变量.

这意味着,您明确或隐含使用的所有库,用户的浏览器扩展以及任何能够嗅探您/您的用户流量的人 – 他们都可以轻松获取您的秘密.

你怎么通过它并不重要.通过process.env或environment.ts,所有这些都将最终生成在生成的main.js文件中,在那里它们不再是秘密,因为讨论实际上是无用的.

回答第1部分的更新:

如果access_token是您的(或您的合成用户)令牌,那么您有两个选择:

>编写代表此Github用户推送代码的后端服务.这意味着令牌将存储在后端的环境变量中,这是一种非常合适的做事方式
>要求您的用户为每次推送输入令牌或询问一次并将其存储在localStorage中.这仅在每个用户都有自己的/不同令牌的情况下才有意义

回答第2部分的更新:

您可以在前端周围构建一个docker,在虚拟机内的kubernetes集群中运行它,该虚拟机托管在世界上最安全的服务器上,如果您将其置为角度环境变量,它将不会使您的令牌安全,因为它是公共的不能保密.

你似乎不理解要点:GitHub给你一个错误并且不允许推送代码,你应该已经感激它在你的架构中发现了问题.如果您想解决问题,请使用上述解决方案.如果你想简单地绕过GitHub的验证并且你不关心安全性,那么只需将你的令牌字符串分成两部分并将它存储分开,GitHub将无法找到它.

回答第3部分的更新:

您可以直接从前端执行GitHub的Oauth2请求.您的每个用户都应该拥有一个帐户,这将解决您的所有问题.这实际上与提出的解决方案#2相同.

如果您使用带有后端的解决方案#1,出于开发目的,只需预先设置cookie或使用localStorage.setItem(‘your-token-here’).这对于开发来说已经足够了.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会就会被绕晕了,最起码英文文档中的代码与中文文档中的代码是一致的,但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。   其中用到的软件:   Chart.js框架,版本1.0.2,一
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示: 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
HTML:让表单、文本框只读,不可编辑的方法有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使中国">的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中,移动端新近增加了一个功能“微信授权登录”,由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉。 首先,熟悉一下微信授权部分的源代码,如下所示:
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据,第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题,刚开始以为只是个警告,没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位,显示以下代码存在错误:
AngularJS控制器controller之间如何通信angular控制器通信的方式有三种:1,利用作用域继承的方式。即子控制器继承父控制器中的内容2,基于事件的方式。即$on,$emit,$boardcast这三种方式3,服务方式。写一个服务的单例然后通过注入来使用利用作用域的继承方式由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值
AngularJS路由问题解决遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:Couldnotresolve'yhDtlMaintain/yhdetail'fromstate'yhMaintain'药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情
书海拾贝之特殊的ng-src和ng-href在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下:1)浏览器加载静态HTML文件并解析为DOM;2)浏览器加载angular.js文件;3)angular监听DOMContentLoaded事件,监听到时开始启动;4)angular寻找ng-app指令,确定作用范围;
angularjs实现页面跳转并进行参数传递Angular页面传参有多种办法,我在此列举4种最常见的:1.基于ui-router的页面跳转传参(1)在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId
AngularJS实现表格数据的编辑,更新和删除效果实现首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据var app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $sc
ANGULAR三宗罪之版本陷阱      坑!碰到个大坑,前面由于绑定日期时将angular版本换为angular-1.3.0-beta.1时,后来午睡后,登录系统,发现无论如何都登陆不进去了,经过调试,发现数据视图已经无法实现双向绑定了。自己还以为又碰到了“僵尸程序”了呢,对比药店端的程序发现并没有什么不同之处。后来自己经过一番思索才隐约感觉到是不是angular的版本造成的,将版本换为之前
JS实现分页操作前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果。受前面“JS实现时间选择插件”的启发,自己首先需要查看一下HTML5能否实现此效果。 整了半天,不管是用纯CSS3也好,还是用tmpagination.js还是bootstrap组件也好,到最后自己静下心来理
浏览器兼容性解决之道前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证An
JS利用正则表达式校验手机号绪 由于项目需求,需要在前端实现手机号码的校验。当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完成校验,然后将校验结果返回给客户端,客户端根据返回的结果再进行进一步的处理。如此反而复杂化了处理过程。 其实,处于安全考虑,应该在服务端进行二次校验。以下为在客户端的JS中校验手机号码格式
基于项目实例解析ng启动加载过程前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。 下面以实际项目为例进行简要讲解。1.载入ng库2.等待,直到DOM树构造完毕。3.发现ng-app,自动进入启动引导阶段。4.根据ng-app名称找到相应的路由。5.加载默认地址。6.Js顺序执行,加载相应模版页sys_tpls/